Archiv rubriky: Webdesign

Častá chyba s ajax požadavky v jQuery

Často se s tím setkávám. Naštěstí už ne v mém případě. 🙂 Když nefunguje ajaxový požadavek a nehlásí žádnou chybu nic, ani Firebug, ani PHP skript – protože ten funguje správně, tak je chyba prostá. Funkce, zpracovávající požadavek očekává data standardně v JSON formátu. A když je nedostane, tak i kdyby dostala krásný HTML výstup, tak prostě konec. Jen v případě, že je ošetřený error handler, tak se o této chybě dá dozvědět.

Takže závěrem: Vždy specifikovat datatype. Možné hodnoty najdete v jQuery dokumentaci. A mám dojem, že se výchozí formát někdy dříve změnil, takže možná je to vhodné specifikovat i v případě JSON formátu.

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.

 

 

 

ImageMagick – převod RGB na CMYK

Následujícím příkazem lze spolehlivě převést CMYK obrázek na RGB barevnost. Zatím jsem nenarazil na žádný, který by se převedl špatně.

convert -colorspace -CMYK FILEIN - profile "d:\imagemagick\icc\RGB\AdobeRGB1998.icc" -colorspace RGB FILEOUT

Před samotným převodem je vhodné otestovat, zda je obrázek opravdu ve CMYKu.

$imageInfo = getimagesize($file);
if ($imageInfo['channels'] == 4) { //prevod CMYK na RGB }

 

 

 

 

 

 

 

 

 

 

 

 

JavaScript: nextSibling v Internet Exploreru 9

Ve starší verzi Internet Exploreru (8 a starší) funguje následující kód tak, že spočítá počet buněk (TD elementů) v řádku tabulky.

while(selector_bunek_tabulky.nextSibling)
 {
   celkovy_pocet++;
   selector_bunek_tabulky=selector_bunek_tabulky.nextSibling;
}

Naproti tomu v IE9 (jiné prohlížeče jsem netestoval) spočítá 2x tolik elementů, protože jsou započítány i konce řádků a obsah (některých – nemám plně ověřeno) buněk. Řešení je následující:

while(selector_bunek_tabulky.nextSibling)
 {
 // pokud se jedna o ELEMENT_NODE
 if (selector_bunek_tabulky.nodeType==1)
   celkovy_pocet++;
selector_bunek_tabulky=selector_bunek_tabulky.nextSibling;
}

Přehled typů uzlů lze zjistit na http://www.javascriptkit.com/domref/nodetype.shtml.

 

 

 

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.