FLASH a absolutne pozycjonowanie

 

FLASH - pozycjonowanie absolutne CSS z-index

Prócz Firefoxa przeglądarki domyślnie przesuwają obiekt FLASH na szczyt stosu. Nie pomoże nawet absolutne pozycjonowanie (position: absolute) i właściwość z-index użyte na elemencie, którym chcesz przesłonić obiekt SWF. Obiekt FLASH będzie nadal widoczny.

Rozwiązanie

Po pierwsze do elementu, opisującego FLASH-a, dodaj parametr wmode. Po drugie, do elementu embed, dodaj atrybut wmode o wartości opaque. Zobacz na przykład poniżej:


<object width="300" height="200">
   <param name="movie" value="banner.swf">
   <param name="wmode" value="opaque">
   <embed src="banner.swf" wmode="opaque" width="300" height="200">
   </embed>
</object>

Voila! Teraz możesz już przesłaniać obiekt FLASH za pomocą CSS i absolutnego pozycjonowania. Rozwiązanie działa na wszystkich przeglądarkach.

Znasz inne, lepsze rozwiązanie? Użyłeś powyższego? Podziel się w komentarzu!

 
 

Na skróty w JavaScript

 

Skrócony zapis definicje tablic, obiektów w JavaScriptWydeptane ścieżki na trawniku, świadczą o złym rozplanowaniu sieci chodników. Ludzie używają drogi na skróty, by szybciej dotrzeć do celu. Nie musisz niszczyć trawnika, by szybciej stworzyć aplikację w JavaScript. Użyj skrótów do tworzenia tablic i obiektów.

Obiekty w JavaScript

Droga naokoło:


var obj = new Object();
obj.name = 'web design template';
obj.id = 1234;
(...)

Droga na skróty:


var obj = {
    name: 'web design template',
    id: 1234,
    (...)
};

Tablice w JavaScript

Oldschool:


var tab = new Array();
tab[0] = 'uno';
tab[1] = 'duo';
(...)

Skrócony zapis:


var tab = ['uno', 'duo', (...)];

Analogia z formatem JSON

Jeżeli jeszcze nie przekonałem Cię do stosowania skrótów, warto się ich nauczyć z jeszcze jednego powodu. Jedno słowo – JSON. JSON to format opisu danych, taki jak XML. Ciężko nie dostrzec analogii w zapisie formatu do skróconej składni w JavaScripcie. Przykład?


{
    name: 'KISS design',
    attributes: [{
        category: 'web design',
        length: 12
    }],
    shorthand: 'Kd',
    display: {
        width: 700,
        height: 300
    }
}

Jeżeli chodzi o zastosowanie, JSON wyśmienicie sprawdza się do komunikacji aplikacji klienckiej i serwera. Dla programistów PHP, szczególnie przydatne mogą okazać się funkcje json_encode i json_decode. JSON znają doskonale Ci, którym nie jest obce tworzenie aplikacji AJAX-owych. Więcej o sposobach użycia formatu JSON, wkrótce.

Znasz inne shorthand’y w JavaScript lub innych językach? Które uważasz za szczególnie przydatne? Wolisz korzystać z XML-a czy JSON-a? Napisz w komentarzu.

 
 

Akcje JavaScript w delegacji

 

Delegowanie akcji w JavaScriptDelegowanie akcji to wbudowana cecha języka JavaScript. Pozwala na błyskawiczne przypisanie akcji do całej grupy elementów. Jak to możliwe? Wykorzystujemy przodka, który oddelegowuje zadanie do elementów, znajdujących się niżej w hierarchii DOM.

Pora na przykład


<ul id="kiss-design-list>
	<li><a href="http://google.pl">Google</a></li>
	<li><a href="http://wikipedia.pl">Wiki</a></li>
	<li><a href="http://smashingmagazine.com">SM</a></li>
	<li><a href="http://kissdesign.pl">KISS design</a></li>
</ul>

Stara szkoła uczyła w ten sposób:


window.onload = function () {
    var list  = document.getElementById("kiss-design-list");
    var links = list.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
		alert("Heey-ya!");
		return false;
        }
    }
};

Działa? Działa. Z tym, że rozwiązanie wymaga napisania sporo kodu. Przelatujemy pętlą po wszystkich odnośnikach na liście i dla każdego z nich przypisujemy akcję.

Zrób to lepiej, czyli delegacja eventów


window.onload = function () {
    var list = document.getElementById("kiss-design-list");
    list.onclick = function (e) {
        var event = e || window.event;
        var target = event.target || event.srcElement;
        if(target.nodeName.toLowerCase() === 'a') {
		alert("Heey-ya!");
		return false;
	}
    }
};

Volia! Wpierw przypisujesz akcję jednemu z przodków, elementów, których akcje chcesz obsłużyć. W tym przykładzie dodajemy akcję elementowi ul#kiss-design-list. Następnie sprawdzasz kto był rzeczywistym celem eventu. Jeżeli celem jest odnośnik (użycie pola nodeName), to obsługujesz akcję.

Można jeszcze krócej?

Zapis mógłby być jeszcze krótszy, ale przeglądarki w różny sposób dostarczają obiekty Event i informacje na temat celu. Stąd linie 4 i 5. Aby otrzymać rozwiązanie w pełni cross-browser, przeczytaj poprzedni wpis o akcjach w JavaScript. Oczywiście korzystając z gotowych frameworków w stylu jQuery, nie musisz się zupełnie o to martwić.

Return false. Or maybe true.

Pamiętaj, aby po obsłudze akcji zwracać false, jeżeli nie chcesz by przeglądarka wykonała domyślną akcję (w tym przypadku przekierowanie do odpowiedniej strony). Dzięki temu po kliknięciu na link, użytkownik zobaczy jedynie okno alertu.

Czy delegacja akcji faktycznie jest uproszczeniem? Może wolisz korzystać z frameworków, nawet jeżeli masz do napisania jedną funkcję w JS? Podziel się wrażeniami w komentarzu.

 
 

Hack na @font-face – dowolna czcionka na stronie

 

100% @font-face -  dowolna czcionka na stronieMagia @font-face opisana  przeze mnie wymaga małego sprostowania. Wszystko wynika z faktu, iż różne przeglądarki akceptują różne formaty czcionek, linkowanych za pomocą @font-face.

Firefox i Chrome doskonale radzą sobie z formatem .ttf, natomiast Internet Explorer teoretycznie wspiera .eot. Jak w takim razie zapewnić spójną typografię na naszej stronie? Komentarze warunkowe mogą rozwiązać problem. Z tym, że to nieeleganckie rozwiązanie i należy je stosować w ostateczności.

Chcecie gotowca? Oto i on w całej okazałości:


@font-face {
  font-family: 'KISS design';
  src: url('Kissdesign.eot');
  src: local('KISS design Regular'), local('KISS design'),
         url('Kissdesign.otf') format('opentype');
}

Odrobina komentarza. Po pierwsze potrzebujemy w takim razie czcionki w dwóch formatach - .eot i .otf/.ttf. Z pewnością przyda Ci się doskonały i darmowy konwerter formatów czcionek opisany przeze mnie.

Po drugie, jeżeli przeglądarka znajdzie czcionkę o nazwie „KISS design Regular” na dysku lokalnym, zostanie ona użyta. Niesie to niewielkie ryzyko, że użytkownik będzie miał na swoim komputerze zupełnie inną czcionkę, zapisaną pod użytą przez nas nazwą. Warto mieć to na uwadze. Jeżeli jednak użytkownik nie posiada lokalnie żądanej czcionki, przeglądarka pobierze ją z serwera – „Kissdesign.otf”.

Po co w takim razie linkowanie „Kissdesign.eot”? Dla ukochanego IE. Internet Explorer zignoruje drugie wystąpienie „src: (…)”, ponieważ nie rozumie znaczenia klauzul local i format.

Jeżeli chcesz zgłębić ten temat, polecam wpis Bulletproof @font-face na blogu Paula Irisha.

 
 
następne wpisy »