wz

Podporuje prohlížeč input typu date

17:56 24.01.2015

Jaký je stav podpory určité vlastnosti v různých prohlížečích, lze pěkně zjistit např. na stránce caniuse.com. Na této konkrétní pod-stránce tam pak zjistíme stav ohledně inputů pro datum a čas.

HTML5: Input pattern

20:59 13.07.2014

V HTML5 lze k inputům přidávat atribut pattern, do kterého lze zadat regulární výraz, kterému by měly odpovídat hodnoty, které budou do inputu zadávány. Bez javascriptového kódu si tak lze vynutit kontrolu vstupů na straně klienta. Příklad následuje

<form method="get" action="">
        <div>Input: <input type="text" value="" pattern="[ab]*"></div>
        <div><input type="submit" value="Odeslat"></div>
      </form>
Input:

HTML: Jak začít číslovat seznam od jiného čísla než 1

21:28 03.02.2014

Předpokládejme, že víš, že pomocí elementů <ol> a <li> můžeš v HTML zrealizovat číslovaný seznam. V takovém seznamu nepravíš vůbec nic o jeho číslování, a on se ti začne číslovat od 1. Jako např. zde:

  1. Avatar
  2. Počátek

Takovýto seznam jsem vytvořil pomocí následujícího kódu:

<ol>
<li>Avatar</li>
<li>Počátek</li>
</ol>

Když bych chtěl, aby mi číslování v tomto seznamu nezačínalo od čísla 1, ale od čísla 2009, tak lze využít atribut start elementu ol a vytvořit následující kód:

<ol start="2009">
<li>Avatar</li>
<li>Počátek</li>
</ol>

Výsledek pak vypadá takto:

  1. Avatar
  2. Počátek

Klíčová slova: html ol start, ordered list starting number, číslování html seznamu od vyššího čísla, startovní číslo html seznamu, ...

JavaScript: Odpočet s progress metrem

23:21 28.01.2014

Tento příkládek ukazuje možnost realizace odpočtu času. Ten se neustále opakuje. Progress je zobrazován pomocí elementu meter, což je novinka v HTML 5.

Demo:

Zdrojový kód:

<script>
        var waiter;
        var delay=nastavenyDelay = 5000;
        var decrement = 1000;
        
        function tStart(){
            waiter = clearInterval(waiter); 
            var hodnota = parseInt($("#cislo").val());
            if(isNaN(hodnota)){
              return false;
            }
            $("#meter").attr('max',hodnota).attr('value',hodnota);
            
           delay = hodnota*1000;
           nastavenyDelay = delay;
           
           waiter = setInterval('tik()',decrement);
        }
        
        function tStop(){
           waiter = clearInterval(waiter); 
        }
        
        function tik(){
          delay-=decrement;
          if(delay<0){
            delay = nastavenyDelay;
          }
          $("#meter").attr('value',delay/decrement);
        }
        
        $(document).ready(function(){
          tStart();
        });
        
      </script>
      <div><meter id="meter" min="0" max="5" value="5" style="height:15px;opacity:0.5;width:50px"></meter></div>
      <div><a href="#" onclick="tStart();return false;">(Re)Start</a></div>
      <div><a href="#" onclick="tStop();return false;">Stop</a></div>
      <div><input id="cislo" type="number" value="5"></div>

HTML5: Atribut hidden

19:08 01.12.2013

V HTML5 se objevil atribut hidden. Ten když použijeme u elementu, tak jeho obsah nebude prohlížečem zobrazen. Jde tedy o věc, kterou dříve člověk řešil např. pomocí CSS.

Příklad:

<p hidden>Tento paragraph má nastaven atribut hidden.</p>
<p>Tento paragraph nemá nastaven atribut hidden.</p>

<div hidden>Tento blok má nastaven atribut hidden.</div>
<div>Tento blok nemá nastaven atribut hidden.</div>

Výsledek:

Tento paragraph nemá nastaven atribut hidden.

Tento blok nemá nastaven atribut hidden.

HTML5: Datalist

14:04 22.11.2013

V HTML5 se objevil element datalist. Přes ten lze udělat v inputu předvýběr nějakých hodnot, které bude chtít dost možná uživatel zadat.

Příklad:

Kód:

    <form method="get" action="/clanek/html5-datalist_660">
      <input type="text" name="cityy" value="" list="mestoo" />
      <datalist id="mestoo">
        <option value="Praha"></option> 
        <option value="Brno"></option> 
        <option value="Ostrava"></option>
        <option value="Plzeň"></option>
      </datalist>
      <input type="submit" value="Odeslat">
   </form>
   

HTML 5: Obrázek s obsahem canvasu

17:17 17.11.2013

Tento příspěvek obsahuje příklad canvasu, jehož obsah byl zobrazen jako obsah elementu img. Tento obrázek lze jednoduše stáhnout. Canvas je neviditelný.

<canvas id="canvas14" width="300" height="300" style="background:#fff;display:none">tvůj prohlížeč je zastaralý</canvas>  
      
      <p><img id="obrazek14" title="image with content of canvas" /></p>
      <script>
        var canvas14 = document.getElementById('canvas14');    
        if(canvas14.getContext){
          var context14 = canvas14.getContext('2d');
          
          context14.beginPath();
          context14.fillStyle='red';
          context14.rect(100,100,200,200);
          context14.fill();
          
          var dataURL14 = canvas14.toDataURL();
          document.getElementById("obrazek14").src = dataURL14;
        }
      </script>

HTML 5 Canvas: Příklad kompozice

23:50 16.11.2013

      <canvas id="canvas13" width="300" height="300" style="background:#fff">tvůj prohlížeč je zastaralý</canvas>  
      <script>
        var canvas13 = document.getElementById('canvas13');    
        if(canvas13.getContext){
          var context13 = canvas13.getContext('2d');
          
          context13.beginPath();
          context13.fillStyle='red';
          context13.rect(100,100,100,100);
          context13.fill();
          
          context13.globalCompositeOperation = 'destination-out';
          
          context13.beginPath();
          context13.fillStyle='blue';
          context13.rect(150,150,100,100);
          context13.fill();
        }
      </script>
tvůj prohlížeč je zastaralý
      <canvas id="canvas13b" width="300" height="300" style="background:#fff">tvůj prohlížeč je zastaralý</canvas>  
      <script>
        var canvas13b = document.getElementById('canvas13b');    
        if(canvas13b.getContext){
          var context13b = canvas13b.getContext('2d');
          
          context13b.beginPath();
          context13b.fillStyle='red';
          context13b.rect(100,100,100,100);
          context13b.fill();
          
          context13b.globalCompositeOperation = 'xor';
          
          context13b.beginPath();
          context13b.fillStyle='blue';
          context13b.rect(150,150,100,100);
          context13b.fill();
        }
      </script>
tvůj prohlížeč je zastaralý
      <canvas id="canvas13c" width="300" height="300" style="background:#fff">tvůj prohlížeč je zastaralý</canvas>  
      <script>
        var canvas13c = document.getElementById('canvas13c');    
        if(canvas13c.getContext){
          var context13c = canvas13c.getContext('2d');
          
          context13c.beginPath();
          context13c.fillStyle='red';
          context13c.rect(100,100,100,100);
          context13c.fill();
          
          context13c.globalCompositeOperation = 'source-in';
          
          context13c.beginPath();
          context13c.fillStyle='blue';
          context13c.rect(150,150,100,100);
          context13c.fill();
        }
      </script>
tvůj prohlížeč je zastaralý
      <canvas id="canvas13d" width="300" height="300" style="background:#fff">tvůj prohlížeč je zastaralý</canvas>  
      <script>
        var canvas13d = document.getElementById('canvas13d');    
        if(canvas13d.getContext){
          var context13d = canvas13d.getContext('2d');
          
          context13d.beginPath();
          context13d.fillStyle='red';
          context13d.rect(100,100,100,100);
          context13d.fill();
          
          context13d.globalCompositeOperation = 'lighter';
          
          context13d.beginPath();
          context13d.fillStyle='blue';
          context13d.rect(150,150,100,100);
          context13d.fill();
        }
      </script>
tvůj prohlížeč je zastaralý
      <canvas id="canvas13e" width="300" height="300" style="background:#fff">tvůj prohlížeč je zastaralý</canvas>  
      <script>
        var canvas13e = document.getElementById('canvas13e');    
        if(canvas13e.getContext){
          var context13e = canvas13e.getContext('2d');
          
          context13e.globalCompositeOperation = 'lighter';
          
          context13e.beginPath();
          context13e.fillStyle='red';
          context13e.rect(100,100,100,100);
          context13e.fill();
          
          context13e.beginPath();
          context13e.fillStyle='blue';
          context13e.rect(150,150,100,100);
          context13e.fill();
          
          context13e.beginPath();
          context13e.fillStyle='green';
          context13e.rect(50,50,100,100);
          context13e.fill();
          
          context13e.beginPath();
          context13e.fillStyle='black';
          context13e.rect(50,150,100,100);
          context13e.fill();
        }
      </script>   
tvůj prohlížeč je zastaralý

HTML 5 Canvas: Obdélník

17:59 12.11.2013

Tento příspěvek obsahuje příklad vykreslení obdélníku na canvas.

     <canvas id="canvas10" width="500" height="300" style="background:#fff">tvůj prohlížeč je zastaralý</canvas>  
      <script>
        var canvas10 = document.getElementById('canvas10');    
        if(canvas10.getContext){
          var context10 = canvas10.getContext('2d');
          context10.beginPath();
          context10.rect(50,50, 400, 200);
          context10.fill();
          
          context10.beginPath();
          context10.rect(100,100,100,100);
          context10.fillStyle = "#8ED6FF";
          context10.fill();
          context10.lineWidth = 5;
          context10.strokeStyle = "red";
          context10.stroke();
          
          context10.beginPath();
          context10.rect(300,200,180,100);
          context10.lineWidth = 5;
          context10.strokeStyle = "blue";
          context10.stroke();
        }
      </script>
tvůj prohlížeč je zastaralý
     <canvas id="canvas11" width="500" height="400" style="background:#fff">tvůj prohlížeč je zastaralý</canvas>  
      <script>
        var canvas11 = document.getElementById('canvas11');    
        if(canvas11.getContext){
          var context11 = canvas11.getContext('2d');
          
          context11.beginPath();
          context11.rect(100,100,100,100);
          context11.fillStyle = "#8ED6FF";
          context11.fill();
          context11.lineWidth = 5;
          context11.strokeStyle = "red";
          context11.stroke();
          
          context11.beginPath();
          context11.fillStyle = "violet";
          context11.fillRect(300,200,180,100);

          context11.beginPath();
          context11.strokeStyle = "green";
          context11.strokeRect(200,200,180,100);
        }
      </script>
tvůj prohlížeč je zastaralý

HTML 5 Canvas: Stínované písmo

23:20 05.11.2013

Tento příspěvek obsahuje příklad canvasu se stínovaným písmem. Vidíš tu zdroják i jeho výstup.

      <canvas id="canvas9" width="500" height="500" style="background:#fff">tvůj prohlížeč je zastaralý</canvas>  
      <script>
        var canvas9 = document.getElementById('canvas9');    
        if(canvas9.getContext){
          var context = canvas9.getContext('2d');
          context.font = "40px Courier";
          context.fillStyle = "red";
          context.shadowColor = "green";
          context.shadowBlur = 10;
          context.shadowOffsetX = 15;
          context.shadowOffsetY = 15;
          context.fillText('Stínovaný text 1', 20, 50);
          
          context.fillStyle = "blue";
          context.shadowColor = "red";
          context.shadowBlur = 5;
          context.shadowOffsetX = 15;
          context.shadowOffsetY = 15;
          context.fillText('Stínovaný text 2', 20, 110);
          
          context.fillStyle = "green";
          context.shadowColor = "red";
          context.shadowBlur = 1;
          context.shadowOffsetX = 15;
          context.shadowOffsetY = 15;
          context.fillText('Stínovaný text 3', 20, 190);
          
          context.fillStyle = "orange";
          context.shadowColor = "blue";
          context.shadowBlur = 5;
          context.shadowOffsetX = 5;
          context.shadowOffsetY = 5;
          context.fillText('Stínovaný text 4', 20, 260);
          
          var datum = new Date();
          context.font = "30px arial";       
          context.fillStyle = "red";
          context.shadowColor = "black";
          context.shadowBlur = 5;
          context.shadowOffsetX = 3;
          context.shadowOffsetY = 3;
          context.fillText('Vygenerováno '+datum.getDate()+'. '+(datum.getMonth()+1)+'. '+datum.getFullYear(), 20, 400);
        }  
      </script>
tvůj prohlížeč je zastaralý