Archiv štítku: css

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.

Nejlepší stylovatelný scrollbar pomocí JavaScriptu

Momentálně nejlepší (pro mně) a velice dobře použitelný a přizpůsobitelný plugin pro vlastní vzhled scrollbarů je jScrollPane. Dá se přizpůsobit opravdu jakkoli a dá se docílit dobrého vzhledu.

Více informace je na http://jscrollpane.kelvinluck.com/.

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.

 

 

 

Cufón – hover efekt odkazů

Již dříve jsem zde publikoval zápis týkající se knihovny Cufón, která umožňuje použití prakticky libovolného fontu na webu. Ne že by to byla zrovna skvělá možnost, ale pro většinu neobvyklých fontů nic lepšího neexistuje, pokud vím.

Aby správně fungoval hover efekt a barva odkazu se změnila na barvu při hover efektu a následně při odjetí myší zpět, je třeba upravit kód takto:

Cufon.replace('a', { color: black});
Cufon.replace('a:hover', { hover: true, color: red});

$('a').hover(function() {
   Cufon.replace('a:hover', { hover: true, color: red});
 },
 function() {
   Cufon.replace('a', { hover: true, color: black});
 }
);

 

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.

Překrytí Flashe klikatelným odkazem

Následující kód by měl zdánlivě fungovat tak, že na div #banner je embedováno pomocí SWFObjectu Flash video.

<a onclick="funkce();" href="javascript:;"><div id="banner"></div></a>

Přes něj je ale ještě odkaz, takže při kliknutí nad tento Flash doje k zavolání funkce funkce(). Toto funguje ve všech prohlížečích (které jsem zkoušel – Opera, Firefox), ale nefunguje v Internet Exploreru (ani verze 9).

Je nutné nastavit odkazu pozadí, nestačí ovšem background:transparent; jak by bylo očekávatelné, ale je nutné nastavit background: url(obrazek.gif);. Na pozadí tedy musí být obrázek, co je ještě podivnější, tento obrázek nemusí vůbec existovat`takže není nutné vytvářet průhledných GIF. Dále je nutné odkaz napozicovat absolutně a HTML kód zapsat takto:

<a onclick="funkce();" href="javascript:;"></a><div id="banner"></div>

Potom je možné zavolat kliknutím na video Javascriptovou funkci ve všech prohlížečích, včetně Internet Exploreru.