Zaślepka dla nie załadowanych obrazków w jQuery

Witam,
pokażę jeden ze sposobów na wstawienie zaślepki obrazków, które nie zostały wczytane:

$(window).load(function() { var w, h, w1, h1; $('img').each(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { w = 100; h = 100; w1 = parseInt($(this).attr('width'), 10); h1 = parseInt($(this).attr('height'), 10); if (w1 && h1) { w = w1; h = h1; } this.src = 'http://placehold.it/'+w+'/'+h; } }); });

Ten sposób działa w normalnych przeglądarkach.

Miniaturki automatycznie zapisane na serwerze

Masz zdjęcia normalnych rozmiarów, jednak nie chcesz przerabiać wszystkich na miniatury.
Można za pomocą CSS lub atrybutów width i height zmniejszyć ich wymiary na ekranie, ale ich rozmiar będzie nadal tak duży, jak dużego zdjęcia, co powoduję że się dłużej ładują.

Pokażę trick wykorzystujący JavaScript/JQuery, .htaccess/mod_rewrite i oczywiście PHP, który będzie tworzył miniatury w locie i zapisywał je na serwerze, gdy tylko zdjęcie zostanie wyświetlone za pierwszym razem.

Rotator zdjęć w jQuery z jedną zmienną globalną

Cześć,
często piszemy skrypty JavaScript stosując wiele zmiennych globalnych. Nieraz może to spowodować, że w dwóch miejscach na raz będziemy mieć zmienną o takiej samej nazwie.
Pokażę na przykładzie rotatora zdjęć z wykorzystaniem funkcji setTimeout, jak wykorzystać tylko jedną zmienną globalną.

Przenoszenie elementów między listami: drag&drop, zaznacz-kliknij-przenieś

Przenoszenie elementów między dwoma listami dwoma sposobami na raz:

-        za pomocą drag&drop,

-        poprzez zaznaczenie elementu i przeniesienie przyciskiem.

Zrobimy to przy pomocy jQuery UI:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>

Jak ukryć reklamy na stronie bez Adblock Plus?

Mam kilka strona na yoyo.pl.

Pokażę jak ukryć znajdujące się tam reklamy.

Jest kilka sposobów: można użyć AdBlockPlus lub np. za pomocją JavaScript/jQuery.

AdBlock wystarczy ściągnąć i zainstalować w przeglądarce, proste.

Zajmijmy się jQuery.

Po pierwsze ściągamy bibliotekę jQuery.

Wstawiamy do naszego pliku:

<script type="text/javascript" src="jquery.min.js"></script>

Następnie wstawiamy fragment kodu:

<script> $(document).ready(function(){      $("div[id][style]").each(function(){           if($(this).css('z-index')>=99999){                 $(this).hide();           }      }); }); </script>

Wyjaśnienie:

Funkcja $(document).ready() wykonuje się, gdy załaduje się drzewo DOM.

$("div[id][style]") zwraca listę znaczników DIV, które mają atrybuty id i style.

Warunek if($(this).css('z-index')>=99999)sprawdza w aktualnym elemencie, czy wartość stylu z-index spełnia warunek.

Jeśli tak, to polecenie $(this).hide() ukrywa znacznik DIV.

UWAGA:

Ten sposób będzie działać na domenach yoyo.pl oraz gdy nasza strona nie będzie miała elementów typu <DIV id="..." style="...">, gdzie z-index>=99999.

Jeśli chodzi o inne domeny, to można sprawdzić jakie elementy należy ukryć oraz podać odpowiednie warunki.