Przejdź


Okrągły layout

05 Lut 2008 @ 16:41:05 groszek 16 komentarzy

Kiedyś wpadłem na pomysł by stworzyć stronę która nie jest zamknięta w prostokątnych pudełkach, które mają najwyżej zaokrąglone rogi. Wczoraj jakoś mi się zebrało i stworzyłem pseudo-layout, który nie tylko jest okrągły, ale też jego menu obraca sie dookoła strony. Demo znajduje się tutaj

Całość się opiera na JavaScript. Zresztą jest to mój pierwszy skrypt który służy czemuś więcej niż obsłudze Sajaxa. Obsługa jest banalnie prosta. Poniższy kod do sekcji head:

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

Następnie potrzebny będzie div o określonym id, np. wheel oraz jeszcze jedna wstawka js:


<script type="text/javascript">
                    var tleft = Math.round(screen.width/2)-210;
                    var ttop = Math.round(screen.height/2)-210;
                    document.getElementById("wheel").style.left = tleft+"px";
                    document.getElementById("wheel").style.top = ttop+"px";
                    javascript:wheel.Start("wheel", 260, 210, 210);
</script>

Wewnątrz wheel koniecznie trzeba mieć kilka elementów div – to one będą latały dookoła. Trzeba jeszcze pamiętać o dwóch sprawach: gora i lewo (powyżej) muszą być połową szerokości/wysokości naszego containera (wheel na przykładzie). W stylu css konieczne jest ustawienie position: absolute dla div#wheel oraz div#wheel div.


Nie jest to co prawda użyteczne w takiej formie do prowadzenia prawdziwej strony www (opera – 46% cpu, firefox to samo), potraktowałem to raczej jako ciekawostkę. Może kiedyś, jeśli ktoś by to dopracował, nadawałoby się to do użytku. Na razie opiera się na position:absolute i wielkiej CPU-żerności.


Skrypt można sobie ściągnąć o tutaj – może komuś się przydać. Testowałem tylko na Operze i FF, ale podobno działa też na IE.

/edytowano: grrr, problemy z &lt; &gt;


Komentarze:

05 Lut 2008 @ 16:45:52 kubz

Prawie jak Flash :P

Czemu pola kodami zniknęły?

05 Lut 2008 @ 16:53:29 puppy

Poprawiłem - jogger raz zmienia < na &lt; a raz nie, zależy czy dodajemy wpis czy edytujemy o_O

05 Lut 2008 @ 17:17:58 skkf

Zespołu Nieświadomego Rozwalania Monitora można dostać jak te wszystkie kropeczki lataję ;)

05 Lut 2008 @ 18:06:25 puppy

Dodam jeszcze że można w ogóle wyłączyć przesuwanie się elementów, wtedy otrzymamy po prostu menu równo rozłożone dookoła treści (która będzie w boksie wyglądającym na okrągły). Bez tego trzeba wszystko ręcznie rozmieszczać; w wypadku dodania nowego linka wszystkie inne przesuwać odpowiednio.

05 Lut 2008 @ 18:39:25 anoriell

Możnaby się bawić w zatrzymywanie kropeczek, żeby być w stanie cokolwiek przeczytać bez dostania oczopląsu. Ale efekt ciekawy :))

05 Lut 2008 @ 18:56:39 Luken

Ciekawa koncepcja, trzeba by zrobić bloga w kształcie koła. :P

05 Lut 2008 @ 18:57:31 skkf

Wohoo, żeby tekst był pisany po spirali, a scrollowanie by ją obkręcało ;D Tylko w takim czymś już flash only niestety.

05 Lut 2008 @ 19:03:39 Livio

JS nie powinien być wymogiem, a dodatkiem.
Dlatego twórcy i użytkownicy takich rozwiązań powinni dostać ekskomunikę jakoś czy coś... Toż to istna herezja :D .

05 Lut 2008 @ 19:10:24 puppy

Haha
Mówiłem że to zabawka ledwie i zupełnie się nie nadaje do użytku na prawdziwej stronie, szczególnie w tak niedopracowanej formie.
Chciałem sprawdzić czy taka strona wyjdzie "fajna" jak sobie wyobrażałem. Nie wyszła za bardzo ;-)

05 Lut 2008 @ 19:58:53 Piotr Konieczny

Juz pod koniec lat 90-tych modne byly strony w ksztalcie plyty CD... :-)

05 Lut 2008 @ 22:31:38 coldpeer

Okropne te demo ;)

06 Lut 2008 @ 09:47:39 Khorne

Tylko po co... ;-)

06 Lut 2008 @ 19:45:37 wikiyu

Myślałem kiedyś o czymś podobnym, ale to było w czasach mojej fascynacji flashem, potem wyzdrowiałem z tego i myślałem o JS, a potem przekonałem się jak to jest nie mieć flasha i javascriptu i nauczyłem się żyć bez nich. Co prawda nie jestem żadnym guru kodu, ale i tak odszedłem od takich herezji :P

Choć muszę przyznać że fajnie ci to wyszło :D

08 Lut 2008 @ 10:47:03 Moarc

Zwiesza mi przeglądarkę...

11 Lut 2008 @ 03:28:27 lavinka

U mnie już działa. Trzeba by jeszcze wyprodukować koliste monitory :)

29 Lut 2008 @ 00:01:42 Rafał Piekarski

@Livio: A to czemu? Przecież JS jest u prawie 9% użytkowników a ci co go sobie wyłączają to tylko przecież świadomi użytkownicy. Po drugie JSowe rozwiązania które w większości popularnych przeglądarek działają podobnie IMHO są ok. I trzeba korzystać z takich właśnie technologii. A tym bardziej jeśli jest prostsze rozwiązanie od budowania strony w JS od trudnego do późniejszego zarządzania i zmiany Flashowego konceptu.

Takie jest moje zdanie. Proszę bez flame'ów.

Pierdol licencje, kopiuj na zdrowie!