Archiv štítku: html

Náhled obrázku při najetí

Ukázkové použití skriptu:

<script>
/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){ 
 /* CONFIG */

 xOffset = 110;
 yOffset = 30;

 // these 2 variable determine popup's distance from the cursor
 // you might want to adjust to get the right result

 /* END CONFIG */
 jQuery("a.preview").hover(function(e){
 this.t = this.title; 
 this.title = ""; 
 var c = (this.t != "") ? "<br/>" + this.t : "";
 jQuery(".presspreviewappend").append("<p id='presspreview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>"); 
 jQuery("#presspreview")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px")
 .fadeIn("fast"); 
 },
 function(){
 this.title = this.t; 
 jQuery("#presspreview").remove();
 }); 
 jQuery("a.preview").mousemove(function(e){
 jQuery("#presspreview")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px");
 }); 
};
jQuery(document).ready(function(){
 imagePreview();
});
</script>
<style>
 .presspreviewappend {
 position:relative;
 }
 #presspreview{
 position:fixed;
 border:1px solid #333;
 background:#bbbbbb;
 display:none;
 color:#fff;
 }
</style>
<div class="presspreviewappend"></div>
<a href="big-image.jpg" class="link-image preview"><img src="small-image.jpg" alt="" title=""></a>

jQuery Image Gallery Slider

Mnohokrát jsem již použil následující skript. Proto jsem se rozhodl jej trochu zobecnit a zpřístupnit. Jedná se o jednoduchý Javascript, který se postará o vytvoření takovéto fotogalerie.

náhled fotogalerie

 

Skript jsem zpřístupnil na https://github.com/TomasSkoumal/ImageGallery. Není to sice žádný sofistikovaný plugin, který by měl spoustu nastavení, ale je jednoduše upravitelný a umí opravdu jen to, co je třeba bez nějakých zbytečností. Vyžaduje pouze jQuery knihovnu.

Stylování select boxu výhradně pomocí CSS

Určitě se vám stalo, že jste dostali za úkol vytvořit select box, který by vypadal nestandardně. Nebo jste prostě chtěli mít hezky vypadají select box, který by zapadl do celkového layoutu webu.

Problém je v tom, že select box nelze moc stylovat. V podstatě jen tak barvu textu, pozadí a tím to všechno končí. Hlavní problém je v tom, že pro vykreslení je použita standardní komponenta operačního systému, která nemá některé potřebné vlastnosti pro definování vlastního vzhledu. Existují různá řešení, která toto obchází pomocí JavaScriptu. Mají několik nevýhod. Nelíbí se mi to, že by se kvůli definování vzhledu, měl přidávat JavaScript. To by se ještě sneslo, ale větší problém je v tom, že jde mnohdy o nestandardní řešení, kdy je obsah select boxu plněn JavaScriptem, což je nepohledné a spíš komplikující.

Tak jsem hledal až jsem našel řešení: http://bavotasan.com/2011/style-select-box-using-only-css/. Problém byl v tom, že to nefungovalo úplně správně v některých prohlížečích, těžko říct proč, tak jsem to trochu upravil a výsledek se dostavil. Určitě se tímto nedají vytvořit ještě složitější úpravy vzhledu select boxu, ale pro základní změnu to postačí – tedy nahrazení rozbalovací šipky a toho, co je zasazeno v layoutu – ne rozbalený seznam.

HTML kód:

<div><select><option>Here is the first option</option><option>The second option</option></select></div>

CSS kód:

.filtr .styled-select {
 width: 278px;
 height: 34px;
 overflow: hidden;
 background: url(../../img/select-arrow.png) no-repeat right #fff;
 margin-top: 10px;
 -moz-box-shadow: inset 0 0 10px #999;
 -webkit-box-shadow: inset 0 0 10px #999;
 box-shadow: inset 0 0 10px #999;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
}
.filtr .styled-select select {
 background: transparent;
 width:306px; /* Fix for Opera, FF, IE; */
 padding: 8px;
 line-height: 1;
 border: 0;
 border-radius: 0;
 height: 34px;
 -webkit-appearance: none;
 color: #9a9a9a;
 background-color: rgba(0,0,0,0); /* Opera fix */
 outline:none;
 -moz-appearance:none;
 appearance:none;
}

Možná by se dal výsledný kód ještě o něco zkrátit, záleží asi na konkrétních potřebách úpravy. Pro podrobnější popis řešení se podívejte na původní návod.

 

 

 

Příprava HTML pro newsletter

Pokud potřebujete zkombinovat HTML + CSS soubor pro použití v newsletteru, pomůže knihovna Emogrifier. Možná existuje i jiná knihovna, ale tato vypadá, že funguje snad 100% dobře.

Této třídě se předá HTML + CSS kód a výsledkem bude HTML kód, který bude mít CSS styly vložené jako inline styly k jednotlivým elementům. Docela šikovné a může se to hodit.

Jen jsem narazil na problém, že pokud je u některého HTML elementu dvakrát atribut style (ano, hloupý překlep 🙂 ), tak převod zhavaruje.

JWPlayer – přehrávání videa pomocí Flashe na webu

Pro jednoduché přehrávání videa pomocí Flashe je možné použít výbornou knihovnu JWPlayer. Pro přehrání videa stačí například těchto pár řádků kódu:

  jwplayer("intro").setup({
    flashplayer: "js/jwplayer/player.swf",
    file: "files/video.flv",
    height: 450,
    width: 800,
    autostart: true,
    skin: "js/jwplayer/dangdang.swf",
  });

Také je možné navázat funkce po skončení přehrávání a podobně.

Emulátor iPhone pro testování webů

Potřeboval jsem otestovat, jak vypadá jeden web v iPhonu. Obecně by zobrazení mělo odpovídat prohlížeči Safari (doufám, že to není blud :)), ale pro lepší otestování se dá použít aplikace IBBDemo2 – ke stažení na http://www.puresimstudios.com/ibbdemo/. Emuluje iPhone i iPad a ke svému běhu využívá Adobe AIR.