Archiv pro měsíc: Březen 2013

Sledování odezvy na newsletteru pomocí Google Analytics

U newsletterů rozesílaných e-mailem je dobré sledovat odezvu. Dá se to řešit speciálními redirectovacími URL, ale v tomto případě se nedá analyzovat provoz komplexněji. Například pomocí Google Analytics.

Řešením je využít parametry pro evidenci kampaní v Google Analytics. Detailní nápověda je na http://support.google.com/analytics/bin/answer.py?hl=cs&answer=1033867. Zde jen uvedu, že stačí do URL poslat navíc tento kód:

utm_source=newsletter-2013-03-26&utm_medium=email&utm_campaign=newsletter

Samozřejmě je nutné na té dané stránce mít sledovací Google Analytics kód.

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/.

Adobe Acrobat X nelze spustit

Tak to mně opravdu dostalo. Acrobat (ano, ten ne zrovna levný program) se z čista jasna odmítl jednoho dne spustit. Kdyby aspoň zobrazil nějaké chybové hlášení – klidně jen, že se stala chyba. Prostě nic. Konec. Nespustí se.

A příčina? Nevím, ale asi si software myslí, že není aktivovaný.

Řešením je spustit malou utilitku z http://helpx.adobe.com/creative-suite/kb/acrobat-failed-launch-30-days.html. Otázkou je, zda se za 30 bude chtít ještě spustit.

Č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.