Półprzezroczyste warstwy overlay i okienka div

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

W erze Ajaksa otwieranie nowych okien za pomocą window.open() jest passé. Całkiem słusznie - po co rozpraszać użytkownika (i kazać mu czekać aż przeglądarka przetrawi rozkaz otwarcia okna), skoro przy pomocy prostego układu divów można zasłonić to co widzi na stronie warstwą overlay i na niej umieścić kolejną warstwę - okienko?

Tak działa sławny Lightbox otwierający obrazki albo Thickbox otwierający prawie wszystko. Tylko jest jedna rzecz, która mi się w tym nowym trendzie projektowania nie podoba - nadmierne wykorzystanie JavaScriptu. Nadmierne ponieważ 95% interfejsu potrzebnego do naszego efektu da się zbudować przy pomocy CSS.

Wyzwania

Podczas projektowania trzeba zmierzyć się z problemami:

Czy wyświetlane okieno ma być wycentrowane? W pionie?
Co się dzieje gdy przewijamy stronę? Czy w ogóle pozwolić nad to?
Czy overlay zasłania całe okno, nawet jeśli treści jest malutko?
Co się stanie gdy okieno jest wyższe niż widoczna część strony?

We wpisie opiszę wykorzystanie umiejscowienia w stałym miejscu ekranu, ponieważ z nim najwięcej jest problemów.

Overlay

Warstwa overlay musi rozciągać się nad całą stroną. Jako że będzie lewitowała nad wszystkim, jedyne co trzeba zrobić to upewnić się, że zajmuje 100% szerokości i wysokości viewportu (widocznej części strony).

Dla celów testowych dodajmy ją na końcu dokumentu. Wiadomo - w realnej aplikacji ten proces następuje w JS (albo dodawanie do DOM albo chowanie / pokazywanie).

<div id="overlay">
<div id="window">
<div id="inner">Some content</div>
</div>
</div>

Do #overlay wrzuciłem od razu strukturę okienka, ale o tym za chwilę. Taka struktura wymaga użycia obrazka tła dla #overlay, ponieważ zaaplikowanie opacity zwiększy przezroczystość wszystkiego w środku.

CSS umieszczający #overlay tak jak chcemy:

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(overlay.png);
}

Takie reguły zadziałają nawet w przypadku gdy treści jest za mało, aby wypełnić całe okno (i body będzie niższe).

Overlay a Internet Explorer 6

Co z IE6? Pisałem już jak emulować position: fixed za pomocą expression(). Dodatkowo należy określić wymiary #overlay - skopiować wymiary viewportu, które w Standards Mode są przechowywane w document.documentElement.clientWidth i .clientHeight.

#overlay {
position: absolute;
width: expression(document.documentElement.clientWidth + 'px');
height: expression(document.documentElement.clientHeight + 'px');
top: expression(
offset = 0 + parseInt(document.body.currentStyle.paddingTop) + parseInt(document.body.currentStyle.marginTop),
document.documentElement.scrollTop + offset + 'px'
);
}

Pozostaje jeszcze kwestia tła, będącego półprzezroczystym plikiem PNG. Zgodnie z tym co pisałem kiedyś w temacie przezroczystości należałoby użyć filtru i rozciągnąć tło (sizingMethod="scale"). Ale nie jest to takie proste. Użycie filtru i implikacje hasLayout nie pozwalają określić typowo okienkowych stylów dla wewnętrznych divów. Przykładowo ustawienie szerokości albo wypozycjonowanie okienka na środku powoduje brak możliwości zaznaczania tekstu i klikania w linki.

Możliwe, że istnieje sposób na ominięcie tego zachowania, ale obawiam się że jedynie poprzez usunięcie poprzednich linijek CSS. Napisałem więc workaround - dodaję nową warstwę zaraz za #overlay, pozycjonuję ją w ten sam sposób, określam tło i dodaję filtr na przezroczystość.

#overlay, #ov {
position: absolute; top: 0; left: 0;
width: expression(document.documentElement.clientWidth + 'px');
height: expression(document.documentElement.clientHeight + 'px');
top: expression(
offset = 0 + parseInt(document.body.currentStyle.paddingTop) + parseInt(document.body.currentStyle.marginTop),
document.documentElement.scrollTop + offset + 'px'
);
}
#overlay {
background: none;
-ieh: expression(
this.parsed ? 0 : (
ov = document.createElement('div'),
ov.id = 'ov',
this.parentNode.insertBefore(ov, this),
this.parsed = 1
)
)
}
#ov {
background-color: #000;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

Overlay a Internet Explorer 7

Microsoft mówił nam, że poprawił działanie PNG w swojej najnowszej przeglądarce. Więc naiwnie wykasowałem linijki z filtrami i zostawiłem zgodną ze standardami deklarację tła w PNG. Misio natomiast poczęstował mnie dziesięciosekundowym renderowaniem strony i zwiechami podczas zmiany rozmiaru okna. Jest to kolejny dowód, że PNG nie zostało poprawione tylko brutalnie pohakowane. Ech.

Mimo wszystko CSS dla IE7 jest trochę lżejszy, ponieważ wspiera position: fixed. Nie ma żadnych problemów z określeniem width i height na 100%.

Demo działającego overlaya.

Okno

Okno postanowiłem wypozycjonować na środku ekranu. O centrowaniu też już pisałem, więc krótkie przypomnienie:

W poziomie centrujemy określając szerokość i dając lewy i prawy margines na auto.
W pionie centrujemy nadając wyświetlanie tabelkowe i korzystając z vertical-align.

#overlay {
display: table;
}
#overlay #window {
display: table-cell;
vertical-align: middle;
}
#overlay #inner {
width: 50%;
margin: 0 auto;
padding: 15px;
background-color: #fff;
}

Należy jeszcze ograniczyć wysokość takiego okienka, aby zbyt duża ilość zawartości nie zniknęła poza ekranem.

#overlay #inner {
max-height: 350px;
overflow: auto;
}

Okno a Internet Explorer

Centrowanie w pionie dla IE6 i 7:

#overlay #window {
position: absolute;
top: 50%;
}
#overlay #inner {
position: relative;
top: -50%;
}

Max-height dla IE6:

#overlay #inner {
height: expression(this.scrollHeight > 350 ? '350px' : 'auto' );
}

Podsumowanie

Gdyby istniała potrzeba dopasowania do wysokości viewportu to niestety procenty nie zadziałają - można zastosować JavaScript. Dodatkowo w celach estetycznych można też ukryć scrollbar strony (przydatne zwłaszcza dla IE):

html, body {
overflow: hidden;
overflow-x: auto;
overflow-y: hidden
}

Skończone demo.

Generalnie takie ekrany włączamy przez JavaScript - dlaczego więc nie dodać paru zdarzeń dla window.resize/scroll i zapomnieć o CSS? Z jednego ważnego powodu - CSS jest wydajniejszy i szybszy - sprawdźcie jak żabkuje obrazek utrzymywany w stałym miejscu ekranu w Thickboksie.

Dodam też, że opisany przykład nie jest tylko dywagowaniem teoretyka - takie okienka z powodzeniem można stosować na stronach, głównie dzięki działaniu na IE. Nowy frontend Joggera (jeszcze na warsztacie ;)) takie okienka wykorzystuje.

Tagi wpisu: css, expression, ie6, ie7, javascript, lightbox, overlay, thickbox

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 08 kwietnia 2007 o 15:33

Kategorie: CSS, Design, Internet Explorer

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

Avik 1 08 kwietnia 2007, 17:06

Niektorzy swietuja z rodzina, a Riddle kodzi :P
Albi 2 08 kwietnia 2007, 17:18

E tam, przypadkiem wcisnął „publikuj” ;) Kolejny efekt, nad którego rozwiązaniem się zastanawiałem, a Riddle podał je na tacy ;) Za bardzo ułatwiasz życie…
Piotr Pyclik 3 08 kwietnia 2007, 17:19

Mógłbyś trzasnąć taki niewinny preview tego frontenda, ludzie się niecierpliwią. ;)
Nazgul 4 08 kwietnia 2007, 19:01

Całkiem ciekawa notka. Właśnie w chwili gdy miałem coś takiego implementować... dzięki ;)
Ktos 5 08 kwietnia 2007, 19:54

Ja też będę to implementował za parę dni ;-)
Michał Moroz 6 08 kwietnia 2007, 21:17

W Ff 2.0.0.3 tekst zmniejsza wertykalne marginesy, aż wreszcie wyjdzie z dołu, a w Operze 9.10 Build 521 tekst nawet nie zmniejsza marginesu górnego i content jeszcze szybciej wychodzi poza okno użytkowe. Na dodatek, w Ff zasłonięty content się nie scrolluje, co z drugiej strony działa pięknie w Operze. Ech, przeglądarki… ;)
Riddle 7 08 kwietnia 2007, 21:49

Nie chcę brzmieć niemile, ale nie rozumiem ani słowa. Masz screeny?
Michał Moroz 8 08 kwietnia 2007, 22:20

Fakt, zupełnie nie sprecyzowałem, o co chodzi. Blame on me. ;)

Co do kwestii przewijania zaciemnionego contentu, mam nadzieję, że nie muszę w żaden sposób komentować, i jest ona całkowicie zrozumiała.

Na początku stwierdziłem, że CSS nie zmienia automatycznie wysokości pokazywanego pudełka w zależności od zmian wysokości viewportu. Ale to już napisałeś, choć z początku mi umknęło. ;)

Resztę tamtego komentarza można pominąć, bo niepełna i zapisana w taki sposób, że najprawdopodobniej jestem jedyną osobą, która to rozumie.

W celu popełnienia screenów, popełniłem nieco głębszą analizę funkcjonowania Opery (gdyż Firefox zachowuje się zgodnie z przewidywaniami) i stwierdzam, co następuje:

1. Oto wyjściowa pozycja – przeglądarka zmaksymalizowana, dodałem nieco tekstu do środka.

Screen 1

2. Klikając ponownie na `maksymalizuj’ wracam do ostatniego rozmiaru okna. Jak widać, na razie wszystko ok.

Screen 2

3. Idąc dalej, ręcznie zmniejszam nieco rozmiar okna. Nadal jest ładnie.

Screen 3

4. Dodaję trochę tekstu do tła i znów maksymalizuję okno przeglądarki.

Screen 4

5. Wracam do poprzedniego rozmiaru okna, klikając na `maksymalizuj’.

Screen 5

6. Rozszerzam okno. Pojawia się białe pole.

Screen 6

7. Tym razem maksymalizuję, co spowodowało znów ustawienie się jednolitego tła, następnie przywracam okno do poprzednich rozmiarów i zmniejszam – górny margines wcale się nie zmienia.

Screen 7

I tak to mniej więcej wygląda. :)
Riddle 9 08 kwietnia 2007, 22:24

Lol. Opera :D

A co do przewijania – w ostatnim demie specjalnie wyłączyłem tą mozliwość. Odkliknij w Firebugu reguły overflow/x/y i zobaczysz, że przewijanie contentu za overlayem działa. W IE troche kiepsko, ale też. Tylko, że przy takim trybie wyświetlania okna nie ma sensu pozwalać na przewijanie strony. Opera pozwala, bo inaczej działa. ;-)

~~BTW, zedytuj swój komenarz i wstaw klikalne linki za pomocą Textile plz bo kopiować jest ciężko. ;)~~ Dzięki :)
Krzychu Danek 10 08 kwietnia 2007, 22:26

Czy planujesz wypuszczenie własnego skryptu (być może opartego o jakieś gotowe biblioteki), który zastąpiłby Thickboxa albo Lightoboxa? Wygląda to zachęcająco, ale najistotniejszy jest przeważnie czas ładowania (rozmiar, ilość dołączanych plików) i bajerancka animacja przy przechodzeniu między kolejnymi oknami (niestety :( ). Weź to pod uwagę i masz kolejny hicior na miarę kalkulatora EM.
Riddle 11 08 kwietnia 2007, 22:27

Krzychu: Generalnie jeszcze próbuję sił z przeglądarkami dla trybu position: absolute a nie fixed, bo położenie w 1 miejscu ekranu ma swoje minusy jak widać. ;-)

Ale taki plugin do jQuery… kurczę, pomyślę. Thickbox ma tak paskudny kod, że argh. ;]
Bellois 12 08 kwietnia 2007, 22:33

Fajny kod :) Ja tylko mam wątpliwości, czy unieaktywnienia strony i wyświetlanie nad nią tylko jednego DIV-a jest przyjazne i użyteczne.
rysiu 13 08 kwietnia 2007, 22:50

Wszystko pięknie.
Uruchomienie powyższego dema, pod FF, pod linuksem, dystrybucja PLD ac powoduje zużycie procesora komputera na poziomie 50%, a co za tym idzie przywieszianie się FF. Podobne zachowanie zauważyłem gdy próbowałem otworzyć jeden szablon wordpressa (czerwony naglowek, czarne tlo). Nie wiem czy to wina mojego systemu, czy kodu strony. Choć słyszałem, że innym osobom, tamten szablon także powodował zużycie procesora.
Zastanawia mnie co jest powodem takiego obciążenia.
Riddle 14 08 kwietnia 2007, 22:51

Obrazek PNG 5×5 pikseli, powielany setki razy na ekranie. Nie wiem, to Linux… może inaczej go skompiluj.
nbw 15 09 kwietnia 2007, 00:33

W PLD Firefoxa się raczej nie kompiluje (~50 minut wyrwane z życiorysu) ;)

To typowy problem pod Linuksem/z FF (Opera umiera jeszcze szybciej). Podobnie procka zabija przyciemniane tło przy loaderze w WEGO CMS (też alfa png).

Pomysł z pluginem popieram, aczkolwiek Lightbox czy Thickbox są jeszcze poza zasięgiem.
yarak 16 09 kwietnia 2007, 09:42

Dzięki za rozwiązanie problemu! ;-) Szukałem czegoś takiego. A może w przyszłości by tak małe compo zrobić, ty rzucasz problem, a my podsyłamy rozwiązania? :D
ml 17 09 kwietnia 2007, 17:13

Mało jest rzeczy, które mnie drażnią na stronach WWW jak obrazki osadzone w ten sposób. Oprócz faktu, że problem ze zżeraniem CPU pod FF na linuxie jest dla mnie dość bolesny, jestem przez tego typu bajery ograniczony funkcjonalnością do tego, co sobie wymyślił autor strony. Nie mogę np. otworzyć 2 obrazków, ponieważ autor założył, że jedynym słusznym rozwiązaniem jest oglądanie jednego: koniecznie na środku i koniecznie bez możliwości dostępu do oryginalnej strony (przez overlay). Absurd i jeden wielki przerost formy nad treścią.
zero 18 09 kwietnia 2007, 17:27

Wydaje mi się, że zastosowanie zamiast takiego o formacie 5×5, dużego obrazka (np 500×200) znacznie poprawi problem użycia CPU na wolnych maszynach.

ml: ale kto ci broni otworzyć dwa obrazki? Masz chyba myszkę trójprzyciskową albo klawisz [CTRL] ;-)
rysiu 19 09 kwietnia 2007, 18:46

[zero]: „Wydaje mi się, że zastosowanie zamiast takiego o formacie 5×5, dużego obrazka (np 500×200) znacznie poprawi problem użycia CPU na wolnych maszynach.”

Hmm nie wydaje mi się, że to problem wolnych maszyn. Ja mam core duo 1,8GHz z 1GB RAMu i problem z zużyciem procesora pod linuxem jest.
Dziudek 20 09 kwietnia 2007, 23:54

Co do zużycia CPU – rzeczywiście małe obrazki tła strasznie zamulają komputer – ostatnio testowałem pewien projekt na IE i byłem w szoku gdy widziałem jak pojawia się linijkami obrazek tła (GIF) w divie. Miał wymiary 2×2 – po zmianie na 64×64 już tego nie widziałem. Fakt, że na FF i Operze tego problemu nie zauważyłem…

@ml – bardzo ciekawa uwaga… Osobiście mam w planach wydanie czegoś a’la plugin do mootools tworzącego okienka z obrazkami (choć nie tak bardzo opartego na CSS jak to prezentuje Riddle) i dzięki Tobie mam kolejną opcję do dodania w skrypcie ;] Nie ma to jak opinie potencjalnych użytkowników ;)

@Riddle – zastanawia mnie jedno – po co męczyć się z PNG skoro można wykorzystać przezroczyste GIFy i dithering o którym sam zresztą wspominałeś przy okazji omawiania różnych hacków na IE ? Mniej kodu a efekt praktycznie taki sam. No chyba, że GIFy mają jakąś wadę o której nie wiem (w tym konkretnym wypadku oczywiście) ? Bo to rozwiązanie z PNG wydaje mi się takim na siłę wrzuconym i później jest całe dostosowywanie pod IE. Albo po prostu dla normalnych przeglądarek wrzucić PNG, a dla jak to piszesz Misia (to sformułowanie mnie powala ;) ) serwować GIFa z ditheringiem ;)

BTW dołączam się do prośby Piotra Pyclika o jakieś screeny z nowego frontendu – jestem nowym userem Joggera, a już stary doprowadził mnie parę razy do mdłości :P Ale mam nadzieję, że przechodząc z WP na Joggera nie zrobiłem błędu ;]
ml 21 10 kwietnia 2007, 09:39

[zero]: „ale kto ci broni otworzyć dwa obrazki? Masz chyba myszkę trójprzyciskową albo klawisz [CTRL] ;-)”

Jak mam obrazek w popupie, to otwieram 2 popupy i jest po sprawie. To budzi zamieszanie, teraz nigdy nie wiem na WWW czy mi się obrazek otworzy w popupie, czy może w tym samym oknie uniemożliwiając dalsze przeglądanie strony. Do niedawna można było mieć 99% pewności, że powiększenie obrazka będzie w popupie, teraz klikam, wku@@#!$ się, że otworzył mi się w ten sposób, SZUKAM przycisku-zamykacza (on nie zawsze jest w tak standardowym miejscu jak dla popupa przycisk zamykający okno) i wtedy dopiero mogę sobie używać ctrl albo 3ppm.

Problem z wydajnością istnieje. Mam 1,5GHz. Tym samym argument riddle’a z początku artykułu o tym, że „po co czekać aż przeglądarka przetrawi popupa” można wrzucić do kosza. Uwielbiam, jak moja przeglądarka „trawi” popupa całe paręnaście ms ;) w stosunku do trawienia tego PNG z overlay’a.

Poza tym to jest nieużyteczne, łamie się pewne zasady pracy z przeglądarką typu: okienko (czyli jakiś otwarty obiekt, stronę, może to być np. właśnie obrazek ) zamyka się przyciskiem w rogu okna. Żeby to było użyteczne, powinna być możliwość (choć to utopia) wyłączenia obrazka przyciskiem Wstecz przeglądarki – bo optyczna zmiana która następuje jest na tyle duża, że sporo userów może jakby „chcieć wrócić do poprzedniej strony”. Zastanawiam się też, jak się ma do wszelkiej maści technologii wspierających, choć z głowy nie napiszę. etc. etc.
mynthon 22 10 kwietnia 2007, 10:29

mynth extends @ml{
dodatkowo, jako częsty użytkownik maili lubię wysyłać link do ciekawego tekstu/obrazka do ludzi, z którymi koresponduję. Pisanie „wejdź na tą stronę, znajdź tekst o dupie maryni i kliknij na ‘aby zobaczyć dupę maryni’ to ci się otworzy fajny wykres” trochę za bardzo przypomina mi flasha.

Poza tym wikipedia jakoś nie otwiera obrazków w nowym oknie – daje wybór użytkownikom – i nikomu to nie przeszkadza, chodzi szybko, a kod zajmuje kilka bajtów (a href=”„><img /></a>).
}

ps. w kapciu numerek 1791 – ładna data ;)
Riddle 23 10 kwietnia 2007, 11:02

O to chodzi, że takie skrypty rozszerzają funkcjonalność linka do obrazka – możesz go skopiować i wysłać komuś luzem, możesz sobie otworzyć w nowym oknie / tabie.

A nowe okna w Firefoksie otwierają się nawet po parę sekund.
mynthon 24 10 kwietnia 2007, 12:10

ojoj, jaką funkcjonalność? Nie mają, żadnego celu poza „rozszerzeniem” eststycznym, które końcowych userów (odbiorców strony, nie prezesów) nic nie obchodzi. Przykład lightboxa ze strony: http://www.huddletogether.com/projects/lightbox2/

1. otwieram obrazek i kopiuję adres. Wklejam do maila wysyłam. Co się otwiera? http://www.huddletogether.com/projects/lightbox2/
Super.

2. „Ale przecież w fx możesz skopiować adres odnośnika!” – tak, ale w ie nie mogę. Dodatkowo zwykły user nie ma pewnie pojęcia o takiej opcji.

3. „Otworzenie nowego taba w fx zajmuje nawet kilka sekund.”
Tutaj nie wiem co powiedzieć z dwóch powodów. a) Kurcze, ale przede wszystkim TO JA decyduję czy chcę taba, okno, warstwę czy cokolwiek. Akurat do Ciebie mam o to pretensję, bo Twój blog jest mocno opiniotwórczy. Wiem, że w życiu robi się różne window.openy i writelny ale nie powinno się tym chwalić. b) takie skrypty (patrz: historia lightbox) mają tendencję do rozrastania się w jakieś animowane potworki i w końcu wychodzi na to, że szybciej otworzysz nowego taba niż zobaczysz obrazek. Na przykład zobacz ten obrazek (adres skopiowany z paska adresowego ;) ) http://www.huddletogether.com/projects/lightbox2/

4. Z technicznego punktu widzenia, jest to bardzo ciekawe. Można prześledzić jak zachowują się przeglądarki i zawsze czegoś nowego nauczyć ale trzeba też mocno zaznaczyć, że z punktu widzenia użytkowego jest to lipa. Przerost formy nad treścią. powiedz mi w czym to jest lepsze od: http://pornel.net/pups/ ?
Riddle 25 10 kwietnia 2007, 12:27

Otworzenie nowego OKNA zajmuje w Fx parę sekund. OKNA. Obramowane coś z x po prawej na górze.
ml 26 10 kwietnia 2007, 15:09

Riddle: no nie wiem, jak Ty to robisz, że w FF nowe okno to parę sekund… U mnie raz dwa. Jak widać FF pod linuxa woli popupy od przezroczystości. To by było wytłumaczalne. Zarządzanie pamięcią pod linuxem jest rewelacyjne więc otworzenie nowej instancji przeglądarki (co w praktyce oznacza ruszenie całego Gecko) działa raz-dwa natomiast gorzej się ma cały czas grafika na niektórych kartach graficznych (ja mam np. tylko driver do Xów w wersji z SVN, mocno testowej) co przekłada się na prędkość renderingu. Ale ponieważ nie o OS mówimy – podejrzewam, że otworzenie takiego overlaya zabije dowolnego kompa który ma <= 1GHz (a takich wciąż sporo jest) to…

mynthon: dzięki! Wypisałeś to, o czym ja zapomniałem. Bardzo słuszna uwaga – najpierw się uczy pewnych zachowań użytkownika, jak np. to, że adres wskazuje na daną treść a potem mu się to odbiera. Ten sam problem jest ze stronami przeładowanymi AJAXem. Można go rozwiązać co prawda (cośtam czytałem o takim konstruowaniu URL w taki sposób by zapamiętywać stan AJAXa) ale czy to wszystko uzasadnia odrzucenie zwykłego <img src=”...” />? NIE.
Dziudek's jogger 27 10 kwietnia 2007, 16:55

Estetyka i swoboda jednocześnie...

Na blogu Riddle'a przy okazji wpisu na temat okienek a'la Lightbox, pojawiła się ciekawa dyskusja w której niektórzy stwierdzili, że tego typu okienka ograniczają swobodę użytkownika. Mam pewien pomysł, który pogodziłby zwaśnione strony [...]
n.rafal 28 10 kwietnia 2007, 19:17

Wydaje mi się, że ta technika nie jest do końca nieużyteczna – sprawdziłaby się np na allegro – klikasz kup teraz i przekierować cię na stronę logowania zrobiłoby się coś takiego. Miodzio :)
Dzięki za kolejny dobry artykuł.
lethal2 29 10 kwietnia 2007, 19:17

Jeszcze się nie spotkałem z problemem zżerania CPU przez takie tła w FF, a pracuję tylko na Linuksie. Nie wiem, czemu tak się dzieje
Komar 30 10 kwietnia 2007, 20:16

n.rafal: No właśnie, takie okienka nie są tylko przydatne przy obrazkach i innych pierdółkach, ale także przy wszelakich logowaniach.
Nie rozumiem zupełnie sprzeciwu przeciw używaniu takiego czegoś – nie chcesz, klikaj na dany obrazek środkowym klawiszem myszy, czy przytrzymując CTRL.
Dziudek 31 10 kwietnia 2007, 20:28

nie chcesz, klikaj na dany obrazek środkowym klawiszem myszy, czy przytrzymując CTRL.

Znając życie 90% użytkowników komputerów nie ma o tej możliwości pojęcia ;) Czasami trzeba przyjąć, że odwiedzający stronę to kompletny laik i trzeba mu wszystko podać na tacy i to tak żeby miał wybór i myślał, że robi wszystko według własnej woli ;) Jak to w Matriksie ładnie ujęto:

Choice is an illusion created between those with power and those without.

;)
Komar 32 10 kwietnia 2007, 20:56

[Dziudek]: „Znając życie 90% użytkowników komputerów nie ma o tej możliwości pojęcia ;)”

Oj nie wiesz jak się mylisz…
Dziudek 33 10 kwietnia 2007, 21:04

@Komar – nawet jeśli się mylę to nawet 25-50% to dużo ;) BTW lepiej zakładać, że ktoś z grupy osób o czymś nie wie niż ślepo wierzyć, że wszyscy wiedzą ;) Zresztą tak czy siak ludzie zwykle nie lubią jak muszą robić coś ponad klikanie myszką na stronie ;) Gdyby lubili pisać na klawiaturze to blogi byłyby wręcz zasypywane komentarzami, a jakoś nie są ;) Leń jest w każdym z nas ;)
ml 34 10 kwietnia 2007, 21:44

Komar: ej, tą metodą to dojdziemy do sytuacji gdzie połowę rzeczy się pokazuje javascriptem na jakiś dziwnych warstwach. Będzie to ciężkie i będzie powodować mnóstwo problemów opisanych wcześniej. Ludzie, czy moda i robienie rzeczy które są dżezi wam na tyle uderzyła do głów, że musicie przerabiać coś co i tak działa ok?
Dziudek 35 10 kwietnia 2007, 21:51

@ml – dlatego najlepiej tworzyć dwie możliwości dla użytkownika – tradycyjną i opartą na JavaScript – użytkownik wtedy sam zdecyduje czego chce użyć ;)
Komar 36 10 kwietnia 2007, 22:08

[ml]: „ej, tą metodą to dojdziemy do sytuacji gdzie połowę rzeczy się pokazuje javascriptem na jakiś dziwnych warstwach.”

Ta od razu połowę. Ja np. dużo bardziej wolę obrazki wyświetlane w Lightbox’ie czy innych podobnych skryptach niż w zwykłych popupach. Co do zamulania kompa – poprzednio miałem 800 mhz, z 512 ramu – taki Lightbox kompletnie mi się nie przywieszał, chodził bardzo płynnie.
Ale co tam, każdy może mieć własne zdanie na ten temat ;-)
btw. Riddle świetny blog.
Dziudek 37 10 kwietnia 2007, 22:19

@Komar – mam 533MHz i 256 RAMu – Lightbox chodzi elegancko i to na trochę mulącym FF (na Operze różne ciekawe efekty dopiero śmigają :D ) ;) W sumie jest niewiele stron wykorzystujących JS, które potrafią naprawdę zamulić mi komputer – qooxodoo – IMHO zamulacz #1 ;) Gmail i Google Reader też czasami potrafią zamulić no i Google Analytics jak się weźmie „site overlay” z pokazywaniem ilości kliknięć na stronie… Takto nie napotkałem jakichś większych problemów…

Także nie ma się co martwić o szybkość stron – jak skrypty są w miarę sensownie pisane to wszystko powinno chodzić ok ;)

Ja wiem, że niektórzy to najchętniej by siedzieli w czasach tekstowych przeglądarek, albo layoutów bez jakiejkolwiek grafiki, ale tak się nie da – ja tam uwielbiam pełne JS strony – o wiele milej mi się pracuje przy jakimś fajnym interfejsie, a nie zwyczajne liście linków do klikania ;) Ale oczywiście warto pamiętać o ludziach bez JS i tych, którzy bajerów nie lubią. Aczkolwiek są projekty w których bez JS się nie obejdziesz – wtedy spada dostępność, ale z reguły robi się ciekawie zresztą looknijcie mooglets ;) Nie mówicie, że to nie jest fajne :D
Grzesiek 38 11 kwietnia 2007, 16:21

Tak troche abstrachujac od tematu –

Riddle – kiedy na Twym slawnym blogu zobaczymy jakies reklamy? :P

Pozdrawiam
Riddle 39 11 kwietnia 2007, 16:23

Odpowiedź krótka i zwięzła: nigdy. Ani w RSS, ani na stronie. Jedyne co jestem w stanie sobie wyobrazić to wpis sponsorowany, ale tylko wtedy kiedy mógłbym pisać o jakimś serwisie (w kontekście tego czym się zajmuję) bez skrępowania; czyli jak ssie – to napiszę to. ;-)

A za offtopic to się powinno oczy wydłubywać. :D
qvist 40 12 kwietnia 2007, 04:11

idealne jest to rozwiazanie, ktore prezentuje na swoim blogu Dziudek.

na hover na miniaturce pojawia sie gdzies w rogu ikonka i teraz mamy dwie opcje: kliknac w ikonke, aby otworzyc zdjecie w popupie albo w pozostaly obszar, aby uruchomic lightboxa – lub odwrotnie.

moim zdaniem, jest to genialny pomysl, przy klarownej ikonce moze to sie udac. jest wybor i jest on uzasadniony. ktos chce porownac dwa zdjecia – otwiera je w popupach, ktos chce przejrzec galerie w lightboxie w jednym miejscu, z ladna animacja bez wyskakujacych okienek – uruchamia lightboxa.

super, dzieki Dziudek! za pomysl :)
życzliwy 41 13 kwietnia 2007, 12:37

offtop: Przeglądając konkretny wpis nie działają domtabsy w stopce, brakuje linka do domtab.js w META.
życzliwy 42 13 kwietnia 2007, 12:38

znaczy sie w HEAD pardon
Godryk 43 13 kwietnia 2007, 19:28

Riddle: wybacz offtopic, ale czy planujesz w przewidywalnym czasie dorobić arkusz stylów do drukowania? FF 2.0 pod Windows XP usiłuje wydrukować całość na jednej baaaardzo długiej stronie – czyli obcina tekst po pierwszych paru akapitach.

Owszem, można zaznaczyć fragment do druku i wtedy drukuje się całość, tyle że kolumna tekstu zajmuje ok. 30-45% szerokości strony, zależnie od ustawienia papieru i marginesów – co powoduje obcinanie preformatowanego kodu w przykładach, a tekst bieżącego wpisu zajmuje 23 strony…

W końcu się dziś poddałem, wpisałem w pasek adresu kawałeczek Javascriptu, rozciągający #content do 800px – i mam swój upragniony wydruk. Ale to nie jest eleganckie rozwiązanie… :-(
ml 44 13 kwietnia 2007, 23:55

[Komar]: „Ta od razu połowę. Ja np. dużo bardziej wolę obrazki wyświetlane w Lightbox’ie czy innych podobnych skryptach niż w zwykłych popupach. Co do zamulania kompa – poprzednio miałem 800 mhz, z 512 ramu – taki Lightbox kompletnie mi się nie przywieszał, chodził bardzo płynnie.
Ale co tam, każdy może mieć własne zdanie na ten temat ;-)
btw. Riddle świetny blog.”

Od znienawidzenia przerostu formy nad treścią do zamiłowania jest pewna droga, której Ty ewidentnie nie zauważasz, ale ja tak.

No offence ;) ale czytaj uważniej co piszę. I faktycznie rozwiązanie Dziudka jest przyzwoite, godzi 2 strony. Choć ja go na strony nie wsadzę ;]
Mateusz Papiernik 45 15 kwietnia 2007, 00:54

Dzięki Riddle, kolejna fajna rzecz, którą warto dodać do warsztatu :) Choć jestem ogólnie przeciwnikiem efekciarstwa, do którego takie okienka w pewnym sensie zaliczam (Choć oczywiście są zastosowania, gdy są one niezastąpione) – to rozwiązanie oparte głównie o CSS zamiast nadmiaru JS jest bardzo sympatyczne :)

M.
Riddle 46 16 kwietnia 2007, 19:31

Jakby ktoś czytał nam w głowach: Lightwindow wydaje się być dobrze zrobiony. :-)
Dziudek 47 16 kwietnia 2007, 21:34

(Komentarz zmodyfikowany 16.04.2007 o 21:36)
@Riddle – owszem ale ja bym wywalił „Light” z nazwy :D 144KB ;)
Riddle 48 16 kwietnia 2007, 21:35

Przeczytaj na podlinkowanej stronie pierwszy ogromny prostokąt na górze.
Dziudek 49 16 kwietnia 2007, 21:40

@Riddle – chyba jednak muszę kupić mocniejsze okulary jak już tego nie zauważyłem xD Ale to w takim razie wygląda obiecująco ;) Jakby jeszcze była funkcjonalność z możliwością wyboru typu wyświetlania to byłoby miodnie ;]
goodseo 50 18 kwietnia 2007, 22:05

Wygląda obiecująco.
andrzejk 51 20 kwietnia 2007, 11:36

(Komentarz zmodyfikowany 20.04.2007 o 13:02)
Zabrałem się dzisiaj za praktyczne wykorzystane opisanej przez Ciebie metody.

Niestety powstał pewien bug (?), z którym nie mogę sobie coś poradzić. Mianowicie pomimo ustawienia display:none dla overlay, nadal pozostaje widoczne tło.

Problem występuje pod IE, zresztą w ogóle jakoś dziwnie to działa pod IE. W przypadku dema umieszczonego na Twojej stronie, sypie się content zawierający tekst w overlay'u.

Screen: click

Pod Operą - pięknie.
Firefox - miodzio

IE. eh.

Spoglądałeś na to może? :)
Riddle 52 20 kwietnia 2007, 13:03

Andrzeju, klikasz na pierwszy link dema. Kliknij na drugi, na końcu arta.
andrzejk 53 20 kwietnia 2007, 13:15

Faktycznie.

Zupełnie nie wiem jak tego dokonałem. Czytałem całość kilkukrotnie :) Ale dzięki! :)
xarafaxz 54 28 kwietnia 2007, 09:52

Nie jestem autorytetem w dziedzinie użyteczności, ale jak dla mnie półprzeźroczyste warstwy (a już szczególnie animowane) to syf. Może małolaty się tym podniecają, w praktyce to tylko spowalnia przekaz i utrudnia dostęp do informacji.
naeril 55 20 maja 2007, 16:17

Całkowicie zgadzam się z artykułem. Próbowałem samemu używać różnych -box‘ów, ale w końcu stwierdziłem, że lepiej zastosować własny css’owy sposób na rozwiązanie problemu „pokazywania obrazków w galerii”.
porneL 56 20 maja 2007, 19:14
Nienawidzę tych layerowych pseudookien.
To jest cofanie się do użytecznościowego średniowiecza!
- Zamiast wygodnie użyć skrótu klawiszowego albo gestury, to męczę się z tym jak moja mama celująć w jakiś malutki fikuśny ‘X’, który jeszcze do tego jest nie z tej strony, co w moim systemie.
- Są modalne jak Windows 3.1
- Może być jedno i tylko jedno na raz
- Nie da się tego schować ani przesunąć.
smialy 57 24 maja 2007, 23:18

Szkoda tylko że pod ie.6 szwankuje :/
Michal 58 28 maja 2007, 02:29

porneL: mnie sie wydaje, ze niektore z twoich pozycji moga byc traktowane jako zalety - szczegolnie to, ze moze byc tylko jeden oraz ze sie nie da go schowac... Widze to szczegolnie dla duzych formularzy (np sekcje z obowiazkowym wypelnianiem), quizow, helpow kontekstowych czy artykulow szkoleniowych. Rowniez swietnie nadawaloby sie to np. do aplikacji helpdeskowych z interfejsem www (nie wiem, czy znasz np. Altirisa, ale uzywanie go z ovr'em znacznie podniosloby jego czytelnosc). Zdarzalo mi sie, ze we wspomnianym Altirisie dla 3 zgloszen otwieraly mi sie po 3 okna i sam sie gubilem, ktore okno bylo do ktorego zgloszenia... I to dopiero denerwowalo.... Modalnosc w przypadku np. pelnego ekranu nie ma wielkiego znaczenia, chociaz pamietam, ze ty nie lubisz przegladarki w pelnym ekranie... Jasne, ze ovry nie sa super uniwersalnym sposobem na ulatwianie zycia, ale jak w zyciu - nie ma uniwersalnego narzedzia, ktore posluzy mechanikowi, chirurgowi i sprzataczce...riddle – gratuluje zapalu – kolejny fajny artykul
REGi 59 26 czerwca 2007, 10:09

jeśli chodzi o te okienka DIV to ja robię to na takiej zasadzie, że dany dany DIV, który ma się ówcześnie wyświetlić ma parametr display: none; a następnie gdy chcę aby okienko się pojawiło nadaję ID parametr display: block;
piszę obecnie CRM na zamówienie, który będzie działał wewnątrz firmy klienta (obrazki z początkowej wersji poniżej)

http://regi.gamedev.pl/_other/screen1.jpg
http://regi.gamedev.pl/_other/screen2.jpg
http://regi.gamedev.pl/_other/screen3.jpg
http://regi.gamedev.pl/_other/screen4.jpg

najfajniejsze jest jednak importowanie PHP przez JavaScript… w sumie można to tak nazwać bo jak na razie przydały mi się dwie metody document.getElementById().innerHTML=... i document.getElementById().value=... w taki sposób można szybko wstrzyknąć interesujący nas kod w ustawione wcześniej miejsce w kodzie.

pozdr REGi
Off 60 04 sierpnia 2007, 21:52

Dobra, teraz mi powiedzcie jak wyłączyć to dodatkowe okno, bez js :>
Arek Robiński 61 09 sierpnia 2007, 11:36

Może moje pytanie głupio zabrzmi – ale jak to okno pokazywać i ukrywać, tak żeby działało we wszystkich przeglądarkach? Gdy stosuję taki kod do pokazywania:

function Show()
{ document.getElementById(‘ov’).style.display=‘block’; document.getElementById(‘window’).style.display=‘block’;
}

to działa on tylko w IE, a znowu jak zmienię, to działa w FF, a w IE nie chce.

Proszę o w miarę możliwości szybką odpowiedź.
Arek Robiński 62 09 sierpnia 2007, 11:37

Może moje pytanie głupio zabrzmi – ale jak to okno pokazywać i ukrywać, tak żeby działało we wszystkich przeglądarkach? Gdy stosuję taki kod do pokazywania:

function Show()
{ document.getElementById(‘ov’).style.display=‘block’; document.getElementById(‘window’).style.display=‘block’;
}

to działa on tylko w IE, a znowu jak zmienię, to działa w FF, a w IE nie chce.

Proszę o w miarę możliwości szybką odpowiedź.
Mess 63 31 sierpnia 2007, 00:16

Zauważyłem, że overlay nie zakrywa ‘select‘ów w IE (przynajmniej 5.5)
Riddle 64 02 września 2007, 22:18

Yup. Select na IE to specyficzna konstrukcja będąca tak naprawdę oknem, stąd można ją przykryć tylko przez iframe
sint 65 14 września 2007, 14:03

Sorry za offtopa, ale mógłbys napisac kod javascript pozwalający na chowanie i pokazywanie tego okna(moze byc z jQuery)? Bo sam eksperymentuje, ale IE grymasi :(
giku 66 29 września 2007, 10:45

apropos usability:

pokazuj boxy z kodem standardowo otwarte, pamietaj ze to one sa sednem sprawy ! nie text je otaczajacy
wojciech.westwanski@onet.eu 67 17 października 2007, 15:48

CZESC PIOTREK, WITAM WSZYSTKICH ROWNIEZ
CHCIALEM CI POWIEDZIEC, ZE PODZIWIAM TWOJA PRACE. JESTEM DEVELOPEREM Z KATOWIC. MAM PROBLEM I BYC MOZE BEDZIESZ MOGL MI POMOC. NA POCZATKU DOKUMENTU MAM TAKI ZAPIS ABY MOGLY SIE PRZESUWAC PO EKRENIE ELEMENTU KODU W <SPAN> <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN”> CHCE DODAC ZACIEMNIANIE STRONY O KTORYM PISZESZ NA BLOGU I ROBI SIE PROBLEM W IE. WE WSZYSTKICH INNYCH PRZEGLADARKACH DZIALA. JAK ZMIENIE DOCTYPE NA <!DOCTYPE HTML PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> TO DZIALA MI ZACIEMNIANIE ALE PRZESTAJA DZIALAC ELEMENTU RUCHOME NA STRONIE I W FIREFOX-IE OBIEKT ZMIENIA SWOJE POLOZENIE. BYC MOZE JEST JAKIES ROZWIAZANIE TEGO PROBLEMU ABY WSZYSTKO DZIALALO POPRAWNIE. CZY MOZESZ MI JAKOS POMOC ? CZY JEST MOZLIWOSC ABY PARSER BYL INFORMOWANY ZE STRONA ZAWIARE DWOJAKIEGO TYPU ELEMENTY ? CZY JEST TAKI DOCTYPE ? POZDRAWIAM WOJTEK
prosze o ewentualna pomoc na maila: wojciech.westwanski@onet.eu

z gory dziekuje
rebs 68 20 listopada 2007, 18:53

No wszystko ładnie pięknie to dopiero będzie jak powiesz jak tego overlaya wywołać. Skoro korzystasz z tego przy nowym Joggerze to chyba wiesz. No proszę Cię, podziel się z nami :]
Tomek 69 22 listopada 2007, 14:14

Trochę nie rozumiem kwestii wywołania… w czym jest problem mianowicie…

function Show()
{
document.getElementById(‘overlay’).style.display=’‘;
}

function Hide()
{
document.getElementById(‘overlay’).style.display=‘none’;
}
marcin 70 27 listopada 2007, 09:53

function Show()
{
document.getElementById(‘overlay’).style.display=’‘;
}
powinno byc raczej: .... display=’block‘;

a teraz pytanie z innej beczki, mam na poczatku dokumentu: linijke:
<?xml version="1.0" encoding="UTF-8"?>

a nastepnie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

i jesli jest 1 linijka to pod ie6 nie mam overflowa, nie dziala :/ wie ktos jak to rozwiazac ?
Riddle 71 27 listopada 2007, 11:09

Poszukaj wyrażenia „content negotiation”, bo musisz tą linijkę wyrzucić. Wyłączasz nią tryb zgodny ze standardami w IE6 – w nim bezwględnie pierwszą linijką musi być DOCTYPE.
barthek 72 26 grudnia 2007, 12:04

i jak riddle? obiecales sie zastanowic nad napisaniem ‘wlasnego thickboxa’..
ostatnio sam sie tym probowalem zajmowac (bez js at all), ale niestety takie rozwiazanie wymaga inline content oraz padlem przy probie animacji okienka pure css’em. eh..
kleju 73 27 stycznia 2008, 07:29

nbw

u mnie pod firefoxem i opera nie zawiesza przegladarki a mam dystrybucje fedora.

pozdrawiam
krzys 74 15 czerwca 2008, 08:53

Jeżeli IE jest najgorszą przegladarką to jedynie strony dobrze zrobione pod IE świadczą o profesjonaliźmie programisty. Zawsze najważniejsze jest najsłabsze ogniwo w naszej pracy i radze serdecznie o tym pamiętać do końca życia.
Marcin 75 01 września 2008, 17:26

Super artykuł, porada, a szczególnie przydatne jest to microsoft’owe expression() ;).

Pozdrawiam
Blog-it.pl 76 06 września 2008, 20:22

Dzięki Riddle bardzo przydał mi się ten artykuł ;)
Elqno 77 24 listopada 2008, 00:56

czy mozna prosic o css’y? bo linki juz nie pracuja :/ te co maja te kody dzialajace :/
krzemo 78 02 grudnia 2008, 22:18

Witam,
jestem zielony i do konca nie wiem jak zaimplementowac te wszystkie informacje do kodu tak, aby od a do z wszystko mi dzialalo.

Nie wiem gdzie co pisac i wogole,

moze mogl by mi jakis fachowiec podeslac skrypt tak zebym w prosty sposob mogl umiescic polprzezroczysta warstwe na stronie

raf_si@orange.pl