Archiv štítku: javascript

Google Analytics: Měření události na stránce

Potřeboval jsem měřit v GA kliknutí na určité tlačítko, které provede jen javascriptovou akci. To je možné přidáním kódu _gaq.push([‚_trackPageview‘, ‚/udalost‘]); do události tlačítka. Na tento fiktivní odkaz lze nastavit i cíle.

Ajaxový požadavek na JSON

Javascript:

$.ajax({
   url: url,
   success: function(data) {
     var options = '';
     data = $.parseJSON(data);
     $.each(data, function(key, val) {
       options += '<option value="' + key + '">' + val + '</option>';
     });
     $("select[name=poradi_new]").html(options);
   }
 });

PHP:

<?php

header('Content-Type: application/j-son');

$data = array();
$polozky = dibi::query('SELECT * FROM [table]');
foreach ($polozky as $polozka) {
 $data[$polozka->Id] = $polozka->Nazev;
}
echo json_encode($data);

jQuery ekvivalent this

Pokud je třeba získat ekvivalent this v jQuery, lze toho docílit pomocí event.target. Například následujícím způsobem.

Nefunkční ukázka:

$("td").live('mouseup', function(){
  sel=this;
 });

Funkční ukázka:

$("td").live('mouseup', function(event){
   sel=event.target;
 });

Nefunkční vkládání zboží do košíku ve VirtueMart

Řešil jsem problém nemožnosti vložit zboží do košíku v eshopu VirtueMart v Joomle. Na verzi celkem (asi) nezáleží. Potíž byla v tom, že zboží bylo možné vložit do košíku se standardní šablonou, ale s upravenou už ne.

FireBug říkal následující: (new Element(„div“)).setProperty is not a function

Tak jsem chvíli laboroval s připojenými JS soubory a zjistil, že VirtueMart není kompatibilní s jQuery (a Mootools, tuto knihovnu ale nepoužívám). Řešením je přidat tento řádek: jQuery.noConflict();. Jen je pak nutné jQuery používat takto (jQuery(‚#coin-slider‘)) a ne takto ($(‚#coin-slider‘)).

Po této úpravě je vkládání do košíku funkční.

Vlastní scrollbar pomocí CSS a JavaScriptu

Poměrně dlouho jsem hledal nějaké elegantní řešení pro vlastní vzhled scrollbaru. Prostě něco takového:

Tušil jsem, že by mohl existovat již hotový plugin pro knihovnu jQuery. Nejprve jsem zkoušel plugin jquery-scroll od thomd. Ten sice umí vše potřebné a scrollbar se dá opravdu dobře přizpůsobit, ale CSS mi přišlo poněkud překombinované. Prostě jsem necítil, že je to úplně „to ono“.

Velice zběžně jsem si prohlédl Control.ScrollBar, ten ale vyžaduje zapsání dalších HTML elementů, což je velice nepohodlné. Takže toto řešení jsem zavrhl.

A do třetice 🙂 nejlepší řešení, možnosti nastavení vzhledu jsou, řekl bych, menší než u prvního pluginu, ale CSS je stručný a i skripty jsou poměrně malé. Jedná se o plugin jScrollPane. Plugin je zprovozněný v podstatě ihned (návod zde) a díky velice přehlednému CSS je úprava jeho vzhledu otázkou chvilky.

Cufón – uživatelská písma a české znaky

Cufón umožňuje použití nestandardních fontů na webu i v případě, že je klient nemá nainstalovené. Funguje to tak, že se nejprve vygeneruje javascript soubor s tímto písmem a poté se určí, které texty budou takto přepsány.

Existují různé databanky těchto fontů s již předchystanými javascript soubory s fonty, stačí si jen naklikat parametry. Například http://www.cufonfonts.com. Problém je ale s českými znaky s diakritikou, ty se potom špatně vykreslují ve stránce. Z toho důvodu je lepší použít oficiální generáto na adrese http://cufon.shoqolate.com/generate/.

Ještě odkaz na pěkný český návod a pro jistotu české znaky, které je nutné přidat do vygenerovaného souboru:  ěščřžýáíéťďňůúóĚŠČŘŽÝÁÍÉŮÚŤĎŇÓ.

Pro německé znaky (přehlasovaná písmena) je třeba přidat ještě Latin-1 Supplement.

jQuery UI Dialog a metoda isOpen

Podle dokumentace by metoda isOpen měla vracet true v případě, že dialog je otevřený a false v případě, že není.

$( "#gallery" ).dialog( "isOpen" )

Ve skutečnosti jsem se setkal s tím, že vrátí [object Object] v případě, že je otevřený a false v případě, že není. Což je zvláštní, každopádně účel této metody je zachován. Asi na to má vliv verze knihoven, ale nevím. Použil jsem jQuery 1.5.2 (verze 1.6 také nefungovala) a Jquery UI 1.8.12.

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.

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