Datum a čas

Příklad vložení aktuálního roku:

<script>
  document.write(new Date().getFullYear());
</script>

Typografie na webu

Vložení pevných mezer za definované předložky a spojky:

<script>
  var document;
  function nbsp() {
    var x = document.querySelector("body");
    x.innerHTML = x.innerHTML.replace(/ ([ai]|[kosuvz]|do|ke|na|od|po|se|ve|za|ze) /g, " $1&nbsp;");
  }
  nbsp();
</script>

CSS behavior

CSS vlastnost behavior (chování) podporovaná pouze prohlížečem Internet Explorer umožňuje implementovat JavaScriptu do webových stránek pomocí kaskádových stylů.

Oproti klasickému zápisu JavaScriptu se do každého (X)HTML prvku nemusí psát ovladač (onclick, onmouseover, onmouseout atd.) jehož hodnotou je skript. Stačí pouze (X)HTML prvku přiřadit styl s vlastností behavior, která obsahuje přímo skript nebo adresu na externí soubor s příponou *.htc (HTml Component). HTC komponenta se nejvíce vyplatí u složitých nebo často se opakujících skriptů.

Příklady použití:

• CSS3 PIE (Progressive Internet Explorer) umožňuje používat některé CSS3 vlastnosti v prohlížeči IE8-
  • border-radius
  • box-shadow
  • border-image
  • CSS3 Backgrounds (-pie-background)
  • Gradients
  • RGBA Color Values
  • PIE Custom Properties
    • -pie-watch-ancestors
    • PNG alpha transparency and -pie-png-fix
    • Lazy Initialization (-pie-lazy-init)
    • Layout polling (-pie-poll)

Průhlednost PNG formátu v IE6

Do hlavičky webové stránky vložte:

<!--[if (gt IE 5)&(lte IE 6)]>
  <link type="text/css" rel="stylesheet" media="screen, projection" href="ie-6.css" />
<![endif]-->

Obsah souboru ie-6.css:

/* obrazky musi mit nastavene rozmery */
img {
  behavior: expression((this.runtimeStyle.behavior="none") && (this.src.toLowerCase().indexOf('.png')>-1) && (this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')", this.runtimeStyle.paddingTop = this.height, this.runtimeStyle.height = 0));
  overflow:hidden;
}
/* pozadi se nebude dlazdicove opakovat a bude zarovnano vlevo nahoru */
.png {
  behavior: expression((this.runtimeStyle.behavior = "none") && (this.currentStyle.backgroundImage.toString().toLowerCase().indexOf('.png')>-1) && (this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','') + "', sizingMethod='crop')", this.runtimeStyle.zoom = 1, this.runtimeStyle.backgroundImage = "none"));
}

Odkazy:

• PNG transparency in IE 6 with no extra HTTP reques
• IE PNG Fix.

Sjednocení vzhledu formulářových prvků

Bližší informace viz Formalize CSS.

jQuery

jQuery je JavaScriptová knihovna, která zjednodušuje použití JavaScriptu v HTML dokumentu.

jQuery umožňuje vytvářet interaktivní webové aplikace. Funkčnost jQuery je možné dále rozšiřovat pomocí tzv. "zásuvných modulů", které nabízejí již hotová řešení nejčastějích požadavků.

Typickým příkladem použítí mohou být např. reakce na události, okamžitá validace formuláře již při jeho vyplňování, nejrůznější animace, bez nutnosti používat technologii Flash, jednoduchá spolupráce s AJAX technologií atd.

Co budeme potřebovat:

• jQuery zkoušečka – jquery.jslab.net/zkousecka/#ab6
• editor zdrojového kódu: PhpStorm, PSPad, Notapad++ atd.
• webový server: XAMPP, MAMP atd.
• nástroje pro ladění kódu: Firebug+FireQuery (Firefox), Developer Toolbar (Google, Firefox, IE) atd.
  • konzole
  • kontrolní body (krokování)
  • sledování hodnot proměnných

jQuery knihovnu je možné k dokumentu připojit v hlavičce dokumentu interně (jQuery knihovna je součástí webové stránky) nebo externě např. pomocí odkazů na jQuery CDN, Google CDN nebo Miscrosoft CDN.

Zajištění dostupnosti jQuery knihovny (1. z CDN zdroje, 2. z lokálního umístění):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
  if (!window.jQuery) {
    var jq = document.createElement('script'); jq.type = 'text/javascript';
    jq.src = '/path-to-your/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(jq);
  }
</script>

Funkce "Dokument je připraven ke zpracování jQuery" + změna obsahu H1 (příkaz se provede ihned po načtení stromové struktury stránky DOM (Document Object Model) tj. ještě před načtením externího obsahu např. obrázků):

$(document).ready(function() {
  $("h1").text("Nový text tagu H1.");
});

• výraz $() je zkrácený zápis funkce jQuery()
• element h1 je prvek, na který se jQuery apikuje (selector)
• metoda .text vloží požadovaný osah
• "funkci $() předáme element h1 na který aplikujeme metodu .text"

Vkládání textu před a za:

...
<body>
  <h1>jQuery</h1>
</body>
...

$(document).ready(function() {
  $("h1").prepend("Knihovna ");
  $("h1").append(" je skvělá.");
});

Příklad automatického skrytí prvku:

$(document).ready(function(){
  $(".my-css-class").hide(1000);
});

.my-css-class – CSS selektor

.hide – jQuery metoda

Příklad výpisu proměnné do konzole webového prohlížeče (Developer Toolbar):

$(document).ready(function(){
  var text = "Text vypsaný v konzole.";
  console.log(text);
});

Detekce existence elementu:

if ($("#myID").length) {
  $("#myID").show();
}

Výhody použití Behaviors v Drupalu

$('.my-selector').click(function(e) {

    e.preventDefault();
});

$('.my-selector').click(function() {

    return false;
});

$(document).ready(function(){
  var skyscraperAd = $("#skyscraper");
  var skyscraperOffset = skyscraperAd.offset().top;
  var skyscraperBottom = $("#footer").offset().top – skyscraperAd.height();
  $(window).scroll(function() {
    skyscraperAd.stop();
    var windowTop = $(window).scrollTop();
    if (windowTop > skyscraperOffset) {
      if (windowTop > skyscraperBottom) windowTop = skyscraperBottom;
      if (windowTop < 0) windowTop = 0;
      skyscraperAd.animate({top: windowTop + 'px'}, 'fast');
    } else
      skyscraperAd.animate({top: skyscraperOffset + 'px'}, 'fast');
  });
});

#skyscraper {
  position: absolute;
  top: 300px;
  left: 50%;
  margin-left: 500px;
  width: 120px;
  height: 600px;
}

/**
 * Sticky element in the wrapper on scroll
 */
var jQuery = jQuery.noConflict();
jQuery("document").ready(function($){ 
  $(window).scroll(function () {
    var sticky = $(".sticky");
    var wrapper = $(".wrapper");
    var top = $(window).scrollTop();
    var wrapperTop = wrapper.offset().top;
    var wrapperBottom = wrapperTop + wrapper.height();
    var normalPosition = wrapperBottom - sticky.height();
    if (wrapperTop < top && normalPosition > top) {
     sticky.addClass("sticky-top");
      sticky.removeClass("sticky-bottom");
    } else {
      sticky.removeClass("sticky-top");
      if (wrapperBottom > top && normalPosition < top) {
        sticky.addClass("sticky-bottom");    
     } else {
        sticky.removeClass("sticky-bottom");
     }
    }
  });
});

/**
 * Sticky element in the wrapper on scroll
 */
body {
  min-height: 2000px; /* optional */
}
.wrapper {
  position: relative;
  height: 300px; /* optional */
  background: #eee; /* optional */
}
.sticky {
  width: 300px; /* optional */
  background: #ccc; /* optional */
}
.sticky-top {
  position:fixed;
  top: 0;
}
.sticky-bottom {
  position: absolute;
  bottom: 0;
}

<!-- show-hide -->
<script type="text/javascript">
  $(document).ready(function() {
    $('.show-hide').hide();
    $('a.toggle_link').click(function() {
      $(this).next('div.show-hide').toggle();
      return false;
    });
  });
</script>

<a href="#" class="toggle_link">Více</a>

<div class="show-hide">...</div>

$(document).ready(function(){
  $('#block-1 .text').remove();
  $('#block-1 .title').text('Nadpis');
  $('#block-1 .link').append('<a href="#">Odkaz</a>');
});

$(document).ready(function(){
  $('#block-1 .content a').each(function(){
    $(this).attr('href', 'http://www.myweb.cz' + $(this).attr('href'));
  });
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>Fixed menu on scroll</title>
    <meta name="description" content="How to make fixed menu on scroll with jQuery and CSS" />
    <meta name="keywords" content="fixed,menu,scroll" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/fixed-menu-on-scroll.js"></script>
   
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
   <div class="header">Brand</div>
   <div class="main-menu">
     <ul class="clearfix">
      <li><a href="#">Home</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">CSS</a></li>
     </ul>
    </div>
    <h1>Fixed menu on scroll</h1>
    <p>Make fixed menu on scroll with jQuery and CSS.</p>
  </body>
</html>

/**
* Fixed menu on scroll
*/
var jQuery = jQuery.noConflict();
jQuery("document").ready(function($){

var nav = $('.main-menu');

$(window).scroll(function () {
   if ($(this).scrollTop() > 110) {
     nav.addClass("fixed");
    } else {
     nav.removeClass("fixed");
    }
  });
});

/**
* Fixed menu top on scroll
*/
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

Dean Edwards IE

Dean Edwards IE je JavaScriptová knihovna umožňující naučit Internet Explorer W3C standardům:

• opravuje mnoho HTML a CSS problémů
• umožňuje používat transparentní PNG obrázky

Nevýhody:

• funkční pouze ve webovém prohlížeči se zapnutou podorou JavaScriptu
• vyžaduje strojový čas pro vykonání skriptu (nevhodné u velmi pomalých počítačů)
• velikost v základní konfiguraci cca 30kB (zůstává v cache)
• nic není dokonalé – vždy se mohou vyskytnout neočekávané situace

HTML5 script

HTML5 enabling script umožňuje prohlížeči Internet Explorer rozpoznat HTML5 prvky.

Modernizr

Viz modul Modernizr.

Otevření odkazu do nového okna (záložky)

<p>Webová standardizační organizace <a href="http://www.w3.org"
 type="text/html" charset="utf-8" hreflang="en" xml:lang="en"
 lang="en" title="The World Wide Web Consortium"
 onclick="return !window.open(this.href);" 
 onkeypress="return !window.open(this.href);">W3C</a></p>

Automatické otevření nového okna po načtení obrázku

Pozice left, top platí pro  IE4+, pozice screenX, screenY platí pro Netscape 4+

<img src="obrazek.jpg" onload="window.open('http://www.google.cz/',
 'reklama', 'width=600, height=400, left=100, top=100,
 screenX=100, screenY=100, location=no, directories=no,
 status=no, menubar=no, toolbar=no, copyhistory=no,
 scrollbars=yes, resizable=yes');" alt="Popis obrázku"/>

Průhlednost PNG formátu v IE6-

IE6- neumí zobrazit průhlednost u PNG obrázků. Můžete jej to ovšem naučit :)

Pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku.

Pouze obrázky

1. Z níže uvedeného kódu vytvořte soubor s názvem fix-png.js, který umístěte do svého webu např. do adresáře scripts/
   

   /*
     Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola 
   */
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) {
     for(var i=0; i<document.images.length; i++) {
       var img = document.images[i]
       var imgName = img.src.toUpperCase()
       if (imgName.substring(imgName.length-3, imgName.length) 
        == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className 
          + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title 
          + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" 
          + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
          + " style=\"" + "width:" + img.width + "px; height:" 
          + img.height + "px;" + imgStyle + ";"
          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
          + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
       }
     }
   }

2. Do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-png.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script defer type="text/javascript" src="scripts/fix-png.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript.

Obrázky a obrázkové mapy

1. Z níže uvedeného kódu vytvořte soubor s názvem fix-png-map.js, který umístěte do svého webu např. do adresáře scripts/
   

   /*
     Correctly handle PNG transparency in Win IE 5.5 & 6.
     http://homepage.ntlworld.com/bobosola/imagemap.htm
   */
   var strGif = "scripts/transparentpixel.gif"
   var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) {
     for(var i=0; i<document.images.length; i++) {
       var img = document.images[i]
       var imgName = img.src.toUpperCase()
       if (imgName.substring(imgName.length-3, imgName.length)
        == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className 
          + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title
          + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;"
          + imgStyle
         if (img.useMap) {  
   	var strAddMap = "<img style=\"position:relative; left:-"
            + 0 + "px; top:" + 0 +"px;" + "height:" + img.height
            + "px;width:" + img.width +"\" " + "src=\"" + strGif
            + "\" usemap=\"" + img.useMap + "\" border=\"" + img.border
            + "\"></span>"
   	var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:"
            + img.height + "px;" + imgStyle + ";" + "filter:"
            + strFilter + "(src=\'" + img.src + "\',
            sizingMethod='scale');\">" 
   	strNewHTML += strAddMap
         }
         else {
   	var strNewHTML = "<span " + imgID + imgClass + imgTitle
           + " style=\"" + "width:" + img.width + "px; height:"
           + img.height + "px;" + imgStyle + ";" + "filter:"
           + strFilter + "(src=\'" + img.src + "\',
           sizingMethod='scale');\"></span>"
         } 
         img.outerHTML = strNewHTML
         i = i-1
       }
     }
     for(i=0; i < document.forms.length; i++)
      findImgInputs(document.forms(i))
   }
   function findImgInputs(oParent) {
     var oChildren = oParent.children
     if (oChildren) {
       for (var i=0; i < oChildren.length; i++) {
         var oChild = oChildren(i)
         if ((oChild.type == 'image') && (oChild.src)) {
   	var origSrc = oChild.src
           oChild.src = strGif
           oChild.style.filter = strFilter + "(src='" + origSrc + "')"
         }
         findImgInputs(oChild)
       }
     }
   }
   

2. Vyptvořte si průhledný obrázek o velikosti 1x1 px ve formátu GIF s názvem např. transparentpixel.gif, který umístěte do svého webu např. do adresáře scripts/. V případě jiného umístění obrázku upravte ve skriptu proměnnou strGif.
3. Do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-png.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script defer type="text/javascript" src="scripts/fix-png-map.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript.

Oprava vzhledu elementu <object> v IE7-

IE7- nastavuje u elementu <object> vlastní okraje, rámeček a vertikální posuvník. Tomuto chování je možné zabránit:

1. z níže uvedeného kódu vytvořte soubor s názvem fix-object.js, který umístěte do svého webu např. do adresáře scripts/
   

   function fixObjectImages () {
     var objs = document.getElementsByTagName ('object');
     for (n = 0; n < objs.length; n++) {
       var obj = objs [n];
       if ((obj != null && obj.type != null) && ((obj.type ==
        "image/png") || (obj.type == "image/jpeg") || (obj.type ==
        "image/gif"))) {
         fixObject (obj);
       }
     }
   }
   function fixObject (obj) {
     obj.body.style.margin = '0';
     obj.body.style.border = 'none';
     obj.body.style.overflow = 'hidden';
   }
   // Do this only for IE!
   window.onload = fixObjectImages; 

2. do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-object.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script type="text/javascript" src="scripts/pngfix.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript

Cvičení 7

Pomocí přiložených dat přidejte do obrázkové mapy ve fotogalerie ze cvičení 5 šipky pro přechod na předchozí a následující fotografii.

Kulaté rožky

Kulaté rožky je možné vytvářet pomocí CSS vlastnosti border-radius.

Curvy Corners

Curvy Corners používají k vytovření kulatých rožků JavaScript.

Níže uvedený příklad použije JavaScript na vytváření kulatých rožků vždy (zvyšuje zátěž počítače):

  ...
  <style type="text/css">
    /* <![CDATA[ */
      .rounded {
        background-color: #ff0;
        border: 3px solid #f00;
      }
    /* ]]> */
  </style>
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/javascript" src="scripts/curvycorners.js"></script>
  <script type="text/javaScript">
    /* <![CDATA[ */
      addEvent(window, 'load', initCorners);
      function initCorners() {
        var settings = {
          tl: {radius: 20},
          tr: {radius: 20},
          bl: {radius: 20},
          br: {radius: 20},
          antiAlias: true
        }
        curvyCorners(settings, ".rounded");
      }
    /* ]]> */
  </script>
</head>
<body>
  <h1>Curvy Corners</h1>
  <div class="rounded">
    Content
  </div>
  ...

Níže uvedený příklad použije JavaScript pouze v případě, kdy prohlížeč nepodporuje CSS3 vlastnot border-radius:

  ...
  <style type="text/css">
    /* <![CDATA[ */
      .rounded {
        background-color: #ff0;
        border: 3px solid #f00;
        /* Do rounding (native in Firefox and Safari) */
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
      }
    /* ]]> */
  </style>
  <meta http-equiv="content-script-type" content="text/javascript" />
  <script type="text/JavaScript" src="scripts/curvycorners.js"></script>
</head>
<body>
  <h1>Curvy Corners</h1>
  <div class="rounded">
    Content
  </div>
  ...

Nifty Corners

Nifty Corners nabízí další způsob vytvoření kulatých rožků.

Překrytí stránky

Colorbox – a jQuery lightbox (obrázky včetně "Retina", stránky, multimédia)

Lightbox2 – pouze obrázky

Shadowbox – obrázky, stránky, multimédia

Greybox – obrázky, stránky, multimédia

Média

mediaelementjs.com – HTML5 přehrávač