Hmm.. rozwijane coś na stronie w html...

w dziale Strony WWW w Operze
IGI2 napisał(a):

Witam!

Jako, że Opera obłsuguje najnowsze światowe standarty, i potrafi się nimi bardzo dobrze posługiwać, to pewnie jej znawcy także bardzo dobrze orientują się w różnych technologiach smile

Bo mam taką sprawę, to co chcę zrobić nie jest może najnowszą technologią, ale mi chodzi o takie coś, że jak mam np. (strona html-):

link1
link2
link3

to chciałbym żeby po kliknięciu na np. link1 rozwinęły mi się pod tym dodatkowe dane, które nie będa wymagały przeładowania całej strony czyli:

link1
treść linka 1, treść linka 1,treść linka 1, treść linka 1,treść linka 1, treść linka 1,treść linka 1, treść linka 1,treść linka 1, treść linka 1,
link2
link3


Wiem że da się coś takiego zrobić tylko całkiem nie wiem jak się za to zabrać, z góry dzięki bigsmile

IGI2 napisał(a):

Ooo dobre by było coś takiego jak Zajec wymyślił w skrypcie na Onet.pl że takie kółeczko się kręci i się pojawia treść komentarza...

Zajec napisał(a):

Zakładam, że stronę masz napisaną semantycznie, a więc każde linkx jest w osobnym <li></li>.

Wstaw do <li /> dodatkowego diva, któremu przypiszesz display: none;

Po kliknięciu na linkx, wywołujesz funkcję która stopniowo zwiększa height diva. Jej przykład:

function anim(element)
{
	var tmp = element.clientHeight+10;
	element.style.height=tmp;
	if (tmp<element.scrollHeight)
	setTimeout(function() { anim(element) }, 1);
	else
	element.style.height='auto';
}

IGI2 napisał(a):

Noo... wiedziałem, że ktoś mi pomoże ;P a swoją drogą to też coś znalazłem ale trochę bardziej rozbudowanego:


<style>

</style>
<script language="JavaScript1.2">

</script>

<body bgcolor="white" text="black" link="#8080FF" vlink="gray" alink="#FE8B5A">
<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.abcnews.com">ABC News</a></li>
<li><a href="http://www.vancouversun.com">Vancouver Sun</a></li>
</ul>

<li id="foldheader">Games</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.gamespot.com">GameSpot</a></li>
<li><a href="http://www.happypuppy.com">Happy Puppy</a></li>
<li><a href="http://www.gamecenter.com">Game Center</a></li>
</ul>

<li id="foldheader">Software</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.download.com">outer 1</a></li>
<li><a href="http://www.hotfiles.com">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.windows95.com">nested 1</a></li>
<li><a href="http://www.shareware.com">nested 2</a></li>
</ul>
<li><a href="http://www.windows95.com">outer 3</a></li>
<li><a href="http://www.shareware.com">outer 4</a></li>
</ul>
</ul>

<script language="JavaScript1.2">

</script>

IGI2 napisał(a):

Zajec... ale czy mógłbyś podać przykład jakiejś strony html z zaimplementowanym twoim skryptem ... ?

IGI2 napisał(a):

Dzięki Zajec za zaangażawanie! Już sobie poradziłem i teraz mam kolejne pytanie... czym się rózni znacznik <BR> od </BR> czy <BR/> ??

Zajec napisał(a):

O tym skrypcie, który znalazłeś najlepiej zapomnij. Używa nieistniejącego cursor: hand i obleśnego document.all.

Jeśli tworzy się strony w XHTMLu to trzeba zachować składnię XML'ową. Czyli każdy znacznik musi być zamknięty. Na zamknięcie br są dwie metody. Powięcej informacji patrz tutaj: http://kurs.browsehappy.pl/HTML/Skladnia

danadam napisał(a):

Originally posted by IGI2:

Dzięki Zajec za zaangażawanie! Już sobie poradziłem i teraz mam kolejne pytanie... czym się rózni znacznik
od czy
??


<BR> stosuje się w HTMLu
<BR /> stosuje się w XHTMLu (zamknięty znacznik)
</BR> to niepoprawny zapis, co widać w twoim poście. Zostało to wyświetlone jako zwykły tekst, a pozostałe dwa zapisy zostały zinterpretowane jako nowa linia.

Zajec napisał(a):

IMO użycie </BR> jest prawidłowe. Z tym, że jako zamknięcie <BR> i bez umieszczania treści wewnątrz tego elementu.

danadam napisał(a):

Ano tak, nie wziąłem tego pod uwagę.

IGI2 napisał(a):

To tak panowie... wszystko rozumiem, ale czemu mam nie używać tego wielkego skryptu który zamieściłem w drugim poście ?? Sprawdziłem , DZIAŁA w OPERZE, IE, FF. to czemu go nie używać ?

IGI2 napisał(a):

No tak jak w końcu, czy nie da się zrobić takiego rozwijalnego menu ?? Bo zajec trochę mało dokładnie mi opisałeś swój sposób - ja aż tak zaawansowanych rzeczy nie tworze p.

danadam napisał(a):

Originally posted by IGI2:

Sprawdziłem , DZIAŁA w OPERZE, IE, FF. to czemu go nie używać ?


Originally posted by Zajec:

O tym skrypcie, który znalazłeś najlepiej zapomnij. Używa nieistniejącego cursor: hand i obleśnego document.all


Zgodnie ze specyfikacją parametr cursor nie może przyjąć wartości hand. Najprawdopodobniej nie zadziała pod Firefoksem 1.5.
document.all jest równie niestandardowe

IGI2 napisał(a):

O przygotowałem taką testową stronkę : http://igi2.webd.pl/opera/test.php

IGI2 napisał(a):

A tak na marginesie nie mam Firefoxa ale zakładam że będzie w nim działać bo działa i w Internet Explorer, którego jednak najwięcej ludzi używa p i działa także w Operze, która jest bardzo wybredna co do budowy strony bigsmile

danadam napisał(a):

Originally posted by IGI2:

nie mam Firefoxa ale zakładam że będzie w nim działać


Działać, działa, tylko że po najechaniu wskaźnikiem nad link zmienia się on na wskaźnik taki jak masz w polu tekstowym, a nie w łapkę, jak nad zwykłymi linkami (mowa o Firefoksie 1.5).

BTW. Link "edit" pod postem nie jest tylko po to, żeby ładnie wyglądał smile

IGI2 napisał(a):

A czy to ważne jaki jest kursor ?? ważne że działa jak natura chciała p


Ale tak na serio to innego sposobu nie znam i nie znalazłem (a ten wziąłem z webdiary.pl)

EDIT: p
To skoro mam tu takich super speców pod ręką (za co bardzo wam dziękuje) to się zapytam czy takie coś -

<a name="Multimedia" title="Multimedia">Multimedia</a>
jest prawidłowe

EDIT2:
Ej może prześlecie mi swoje numer gg na PW, bo tak chyba było by nam się łatwiej porozumieć bigsmile A nie takie nabijanie postów p

Zajec napisał(a):

Originally posted by IGI2:

To tak panowie... wszystko rozumiem, ale czemu mam nie używać tego wielkego skryptu który zamieściłem w drugim poście ?? Sprawdziłem , DZIAŁA w OPERZE, IE, FF. to czemu go nie używać ?


A co z Konquerorem, Safari, Epiphany, Flockiem i innymi? Też sprawdzałeś? A co z tym skryptem za rok? Gdy przeglądarki porzrucą wsparcie dla nieistniejącego hand, albo document.all?

Pisząc ze standardami masz pewność, że wszystkie porządne przeglądarki obsłużą Twój skrypt i zachowasz do tego zgodność wstecz. Przez ludzi o Twoim podejściu Opera ma teraz kłopoty z obsługą starcyh stron o badziewiastym kodzie.


Originally posted by IGI2:

A czy to ważne jaki jest kursor ??

Tak, ponieważ intuicyjnie na jego podstawie określamy działanie obiektu pod myszką.


Originally posted by IGI2:

EDIT: p
To skoro mam tu takich super speców pod ręką (za co bardzo wam dziękuje) to się zapytam czy takie coś -

Multimedia
jest prawidłowe

Tak, w atrybutach name i title można umieszczać dowolny tekst. Sam atrybut href jest opcjonalnym, więc taka konstrukcja jest prawidłowa.

IGI2 napisał(a):

Originally posted by Zajec:

A co z Konquerorem, Safari, Epiphany, Flockiem i innymi? Też sprawdzałeś? A co z tym skryptem za rok? Gdy przeglądarki porzrucą wsparcie dla nieistniejącego hand, albo document.all?



Hehe dobrze będzie jak tej przeglądarki na świecie użya więcej niż 0,001% p


Według artykułu na dobreprogramy.pl Opery na świecie używa około 2,5 % ludzi czy to aż tak dużo a ty mówisz o innych... a poza tym, strona którą tworze jest kierowana do określonej grupy ludzi. Z których większość używa Firefoxa, czyli przeglądarki gecko czyli inne duperele na gecko też pójdą :>

Originally posted by Zajec:

Pisząc ze standardami masz pewność, że wszystkie porządne przeglądarki obsłużą Twój skrypt i zachowasz do tego zgodność wstecz. Przez ludzi o Twoim podejściu Opera ma teraz kłopoty z obsługą starcyh stron o badziewiastym kodzie.



No to tak jak wspomniałem ta strona będzie istnieć koło 3 miesięcy wątpie że wszystkie przeglądarki porzucą obłsugę ww. sposobów smile

Ale nadal nie podałeś sposobu jak zastąpić ten skrypt.

krzychoocpp napisał(a):

Originally posted by IGI2:

Hehe dobrze będzie jak tej przeglądarki na świecie użya więcej niż 0,001%



Może taka mała uwaga. Kiedyś, dość dawno widziałem reklamę kaset VHS pewnej firmy. W dalekiej przyszłości, archeolodzy odkopali kilka kaset, żadnej nie dało się odczytać, udało się za to odtworzyć kasetę reklamującej się firmy - dlatego że była najlepsza.

I jaki z tego wniosek ?

Jeśli dziś Twój skrypt działa, to nie znaczy że zadziała jutro. Zauważ ile starych, porzuconych stron internetowych staje się nieczytelnymi. Sam trafiam na wiele takich. Ale jeśli autor postarał się i na stronie widnieje znaczek W3C, to nie ważne jak stary dokument, mogę go oglądać w dowolnej przeglądarce. Standardy nie są po to żeby utrudnić Ci życie, tylko po to żeby tworzyć porządne strony, a nie "coś co się wyświetli i zadziała". Bo za rok, czy dwa, rynek może podbić inna super przeglądarka, na zupełnie nowym silniku, działająca na zupełnie innym urządzeniu, co kiedy jej użytkownik trafi na Twoją stronę ?

3 miesiące to wystarczająco długo...

Pozdrawiam, Krzysztof.

danadam napisał(a):

Originally posted by IGI2:

Ale nadal nie podałeś sposobu jak zastąpić ten skrypt.


Ja tam webmasterem nie jestem. O cursor: hand i document.all do dzisiaj nie miałem pojęcia. Jak Zajec o tym wspomniał, to wrzuciłem na googla i się dowiedziałem smile. Myślę, że coś takiego jest w miarę zgodne ze standardem, ale to musi już ktoś inny ocenić smile

Zajec napisał(a):

O, to jest napisane porządnie :-)

IGI2 napisał(a):

Skrypcik wporzo , itp. ale głupie jest to że nie wyświetla się w takim samym stylu jak link... czyli ze teraz jest navy, a jak się najedzie go to będzie czerwony z podkreśleniem...

I co.. mówicie ze to jest dobre na wieki p

A oto link do nowego testu (z nowy javascriptem) - http://igi2.webd.pl/opera/test.php

EDIT:
A czy ten W3C walidator nie jest aby zbyt .. sam nie wiem, bo na onecie jest prawie 250 błędów, a strona chodzi ładnie :>

EDIT2:
A jak dobrze pamiętam na gmail.com znalazło 60 coś błędów i same takie że npp. zamiast color:00000 było napisane color:#00000

Zajec napisał(a):

Głupio jest jak ktoś nie znający się na rzeczy krytykuje coś bezpodstawnie.

Jak chcesz pisać strony - naucz się *PODSTAW* XHTML i CSS. Przecież za najechanie na element jest odpowiedzialna pseudo-klasa :hover.

A jeśli chodzi o Onet to jest i było z nim bardzo wiele problemów. Poza tym marnują łącze i transfer mając tak nieuporządkowany kod.

IGI2 napisał(a):

Hmmm... no to co w końcu radzicie, bo WSZYSTKIE te skrypty nie działają w jakiejś przeglądarce (w Operze działają wszystkie bigsmile)

A ja takiego czegoś naprawdę potrzebuje.. przez to strona z wykorzystaniem tego byłaby bardziej czytelna... a może znacie coś innego nie javascript ??

IGI2 napisał(a):

Originally posted by Zajec:

Tak, w atrybutach name i title można umieszczać dowolny tekst. Sam atrybut href jest opcjonalnym, więc taka konstrukcja jest prawidłowa.



Zajec mówiłeś ze taka konstrukcja jest prawidłowa :

Originally posted by Zajec:

Multimedia



Ale w IE jest źle interpretowana smile A moim głównym celem jest to aby tam działało.. ale może czegoś nie rozumiem więc się pytam... jak się teraz odnieść to takiego "link" ?? Czy ten sposób jest dobry : <a href=http://adres-strony.pl/nazwa-pliku.php#Multimedia">Spis treści - 1</a> Czy to jest dobre ??

Zajec napisał(a):

Tak, a dla ułatwienia wystarczy samo href="#Multimedia". Konstrukcja jest na pewno prawidłowa. A co wymyśla sobie durne IE to nie wiem.