Animace načítání stránky – JavaScript

Klikněte si:

Živá ukázka

Zdrojový kód

Hezké, že? Po kliknutí na tlačítko se úplně nahoře na stránce promítne červené znázornění načtení stránky. V HTML kódu stačí na prvním řádku změnit číslo u buttonu u prubeh ze čtyřky na libovolné číslo (zvýrazněno červeně):

HTML:

<button onclick="prubeh(4, document.getElementById('postup'))">Klikni pro spuštění animace na vrchu stránky</button>
<div id="postup" class="postup"></div>

CSS:

.postup {height: 10px; background: red; width: 0; position: fixed; top: 0; left: 0;}

JS:

    var prubeh = function(cas, postup) {
    var animovat = function() {
        postup.style.transition = "width " + cas + "s";
        postup.style.width = "100%";  
    };
    
    var vycistit = function() {
        postup.style.width = "0";
        postup.style.transition = "";
    };
    
    animovat();
    setTimeout(vycistit, cas * 1000);
};

Flip animace – otočení hoverem pro druhý „obsah“

HTML:

<div class="otoceni">
    <div class="predni">
        MůjSkript.cz
    </div>
    <div class="zadni">
        Veřejná sbírka
    </div>
</div>

CSS:

.otoceni {
    width: 500px;
    position: relative;
    
    -webkit-perspective: 500;
    -moz-transform-style: preserve-3d; 
    -moz-transprform: perspective(500px);
}
 
.otoceni > div {
    line-height: 100px;
    text-align: center;
    font-size: 80px;
    background: #0D6AB7;
    color: #fff;
    transition: all .5s;
    transform: rotateY(00deg);
}
 
.otoceni:hover > div {
    transform: rotateY(180deg);
}
 
.otoceni .predni {
    z-index: 1;
    position: relative;
}
 
.otoceni .zadni {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
    background: red;
}
 
.otoceni:hover .zadni {
    transform: rotateY(0deg);
    z-index: 2;
}

Živá ukázka

Zdrojový kód

Návštěvní kniha v PHP a MySQL

1.) Vytvoříme si tabulku kniha_navstev

2.) Do ní vložíme tyto sloupce s těmito parametry:

  • datum
    • DATETIME
  • jmeno
    • VARCHAR(30)
  • email
    • VARCHAR(200)
  • zapis
    • TEXT

Živá ukázka

Hotové řešení níže:

<html> <head> <title>Kniha návštěv</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1205"> </head> <body> <h2>Přidat příspěvek:</h2> <form name="kniha" action="" method="post"> <b>Jméno:</b><br /> <input name="jmeno" size="40"><br /> <br /> <b>Mail:</b><br /> <input name="email" size="40"><br /> <br /> <b>Zpráva:</b><br /> <textarea name="zprava" rows="5" cols="30"></textarea><br /> <br /> <input type="submit" value="Odeslat zprávu"> </form> <?php   $jmeno = $_POST['jmeno']; $email = $_POST['email']; $zprava = $_POST['zprava'];  $jmeno = htmlspecialchars($jmeno); $email = htmlspecialchars($email); $zprava = htmlspecialchars($zprava); // -- Připojení k databázi a správné nastavení èeštiny --   // Připojení k databázi. $db_spojeni = mysqli_connect   ('databazovy-server', 'uzivatel', 'heslo', 'nazev-databaze', port-vetsinou-3306);   // Otestování, zda se pøipojení podaøilo. if (!$db_spojeni) {   echo 'Připojení se nepodařilo, sorry';   echo '<br />';   echo 'Popis chyby: ', mysqli_connect_error();   exit(); }   // Správné nastavení èeštiny. $objekt_vysledku = mysqli_query($db_spojeni, "SET NAMES 'cp1250'"); if (!$objekt_vysledku) {   echo 'Poslání SQL pøíkazu se nepodaøilo, sorry';   echo '<br />';   echo 'Popis chyby: ', mysqli_error($db_spojeni);   exit(); }     // -- Vlož nový zápis, pokud byl odeslán formuláøem --   // Test, jestli pøišla data z formuláøe. if (isset($_POST['zprava'])) {   // Vytvoøení SQL pøíkazu typu INSERT.   $sql_prikaz =      "INSERT INTO kniha_navstev(datum,jmeno,email,zapis) "     ."VALUES(NOW(),'"     .mysqli_real_escape_string($db_spojeni,$jmeno)     ."','"     .mysqli_real_escape_string($db_spojeni,$email)     ."','"     .mysqli_real_escape_string($db_spojeni,$zprava)     ."')"     ;     // Zaslání SQL pøíkazu do databáze.   $objekt_vysledku = mysqli_query($db_spojeni, $sql_prikaz);     if (!$objekt_vysledku)   {     echo 'Poslání SQL pøíkazu se nepodaøilo, sorry';     echo '<br />';     echo 'Popis chyby: ', mysqli_error($db_spojeni);     exit();   }   echo 'Nový zápis do knihy návštìv pøidán.<br />'; }     // -- Vypiš všechny zápisy v knize návštìv --   // Zaslání SQL pøíkazu do databáze. $objekt_vysledku = mysqli_query($db_spojeni,   'SELECT * FROM kniha_navstev ORDER BY datum DESC'); if (!$objekt_vysledku) {   echo 'Poslání SQL pøíkazu se nepodaøilo, sorry';   echo '<br />';   echo 'Popis chyby: ', mysqli_error($db_spojeni);   exit(); }   echo '<h2>Odeslané pøíspěvky:</h2>'; // Zobrazení všech vrácených dat. while ($radek = mysqli_fetch_array($objekt_vysledku)) {   echo '<hr />';   echo 'Datum a èas: ',$radek['datum'],'<br />';   echo 'Napsal: ',$radek['jmeno'],' (',$radek['email'],')<br />';   echo 'Zápis: ',$radek['zapis'],'<br />';   echo '<br />'; } echo '<hr />';     // -- Odpojení od databáze --   // Zavøení objektu výsledku, protože už ho nebudeme používat. mysqli_free_result($objekt_vysledku);   // Odpojení od databáze. if ($db_spojeni)   mysqli_close($db_spojeni);   ?>   </body> </html>

 

Stín za objektem pomocí box-shadow

HTML: 

<div id="element">
<h2><center>Box-shadow</center></h2>
<ul>
    <li>První hodnota (10px) určuje <b>horizontální umístění zleva</b></li>
    <li>Druhá hodnota (13px) určuje <b>vertikální umístění shora</b></li>
    <li>Třetí hodnota (37px) určuje <b>sílu rozmazání efektu</b></li>
    <li>Čtvrtá hodnota (6px) určuje <b>velikost stínu všemi směry</b></li>
    <li>Pátá hodnota (#ff8000) určuje <b>barvu stínu</b></li>
</ul>
</div>

CSS:

#element {
  box-shadow: 10px 13px 37px 6px #ff8000;
}
 
#element {
    width: 450px;
    height: 100%;
}

Teď si rozebereme co se určuje v CSS v hodnotě box-shadow:

  • První hodnota (10px) určuje horizontální umístění zleva
  • Druhá hodnota (13px) určuje vertikální umístění shora
  • Třetí hodnota (37px) určuje sílu rozmazání efektu
  • Čtvrtá hodnota (6px) určuje velikost stínu všemi směry
  • Pátá hodnota (#ff8000) určuje barvu stínu

Živá ukázka

Zdrojový kód

Plynulý hover efekt

HTML:

<div class="menu">
    <a href="">První</a>
    <a href="">Druhý</a>
    <a href="">Třetí</a>
    <a href="">Čtvrtý</a>
    <a href="">Pátý</a>
    <a href="">Šestý</a>
    <span></span>
</div>

CSS:

.menu {
    position: relative;
    overflow: hidden;
    background: #0D6AB7;
}
.menu a {
    float: left;
    width: 100px;
    text-align: center;
    padding: .5em 0 .7em 0;
    text-decoration: none;
    color: #fff;
    z-index: 1;
    position: relative;
}
.menu span {
    position: absolute;
    height: 100%;
    background: red;
    border-bottom: 5px solid yellow;
    width: 100px;
    bottom: 0;
    left: -100px;
    transition: left .2s;
}
 
.menu a:nth-child(1):hover ~ span {left: 0}
.menu a:nth-child(2):hover ~ span {left: 100px}
.menu a:nth-child(3):hover ~ span {left: 200px}
.menu a:nth-child(4):hover ~ span {left: 300px}
.menu a:nth-child(5):hover ~ span {left: 400px}
.menu a:nth-child(6):hover ~ span {left: 500px}
 
body {
    font-family: Segoe UI, Arial;
}

Živá ukázka

Zdrojový kód

Mod_rewrite – hezké url adresy

Taky chcete mít na svém webu ty hezké URL adresy? Řeší se pomocí .htaccess a mod_rewrite. Váš hosting ale musí podporovat soubor .htaccess. Tady je kód, obarvil jsem ho a níže si ho vysvětlíme. Jsou dva typy – přesměrování a podstrčení.

Přesměrování

Redirect 301 uplne-dlouhy-nazev-souboru-kontakt.php kontakt

Nyní vysvětlení:

Redirect 301 je název „procesu“ – nechte tak, jak to tady je

uplne-dlouhy-nazev-souboru-kontakt.php je adresa souboru tak, jak ho vidíme v adresáři – změňte si

kontakt je „přejmenovaný soubor uplne-dlouhy-nazev-souboru-kontakt.php – jen se v adresním řádku objeví kontakt. Název může být libovolný – změňte si.

 

 

Podstrčení

RewriteEngine on
RewriteRule napsana-stranka podstrcenastranka.php

napsana-stranka je stránka, která je v adresním řádku – ta se nezmění

podstrcenastranka.php je název souboru, tak jak se jmenuje v adresáři a obsah této stránky se zobrazí po zadání napsané stránky.

Dotazy prosím směřujte do komentářů. Děkuji

 

 

Kurzor v inputu (poli) ihned po načtení stránky v JavaScriptu

Taky chcete mít hned po načtení stránky blikající kurzor v daném inputu? Třeba jako má Seznam.cz? Tento způsob se hodí zejména por vyhledávání. 

Důležité je pouze správně pojmenování NAME v inputu (v kódu vyznačeno červeně)!

HTML:

<input name="q" type="text" size="40" id="nejakepole">

JS: 

document.getElementById("nejakepole").focus();

Živá ukázka

Zdrojový kód

Po najetí na DIV1 se zobrazí DIV2

HTML:

<div class="prvni">První div<br>Najeďte na tento DIV a "Druhý div" se prolnutím (9. řádek v CSS) zabarví červeně.</div>
<div class="druhy">Druhý div</div>

CSS:

.prvni, .druhy {
    border: 1px solid black;
    padding: 20px;
    margin: 20px;
}
 
.druhy {
    display: none;
}
.prvni:hover + .druhy {
    background: red;
    transition: 0.8s;
    display: block;
}

Živá ukázka (zdroj)

Živá ukázka

Související článek: Po najetí na DIV1 se zabarví DIV2

 

Po najetí na DIV1 se zabarví DIV2

Chcete vytvořit, aby po najetí na DIV1 se DIV2 zabarvil?

HTML:

<div class="prvni">První div<br>Najeďte na tento DIV a "Druhý div" se prolnutím (9. řádek v CSS) zabarví červeně.<a href="#">Ahoj</a></div>
<div class="druhy">Druhý div</div>

CSS:

.prvni, .druhy {
    border: 1px solid black;
    padding: 20px;
    margin: 20px;
}
 
a:hover + .druhy {
    background: red;
    transition: 0.8s;
}

Živá ukázka (zdroj)

Živá ukázka

Související článek: Po najetí na DIV1 se zobrazí DIV2