nicht angemeldet Patrick Andrieu
Patrick Andrieu
Patrick Andrieu
Patrick Andrieu
Patrick Andrieu
Hallo!
Ich wollte mal nachfragen, ob es normal ist, wenn sich ein Pulldown-Menü-Abschnitt (glaube zumindest, dass es eines ist ^^ - kenne nicht unbedingt den Unterschied zw. Pulldown und Dropdown) schließt nachdem man einen Link angeklickt hat?
Code:
Ich muss zugeben, größtenteils habe ich mir den Code aus dem Internet zusammengesucht und bin mir nicht sicher, ob im Code irgendwo angegeben ist, dass sich ein Menü-Abschnitt automatisch schließt.
Ich danke schonmals für eure Antworten. ^^
LG,
Constella
echo ($light == true) ? 'Guten Tag,' : 'Guten Abend,';
vielleicht solltest du mal einen Link zu der Seite angeben. Auf jedenfall fällt auf das die <li>-Tags keinen <ul>-Tag haben. Siehe
http://de.selfhtml.org/html/text/listen.htm#aufzaehlung. Im Browser wurde für dein HTML-Code nichts Sinnvolles bei mir angezeigt, deshalb fällt es mir schwer nachzuvollziehen was du meintest.
Grüße
Markus
Hallo Markus!
vielleicht solltest du mal einen Link zu der Seite angeben. Auf jedenfall fällt auf das die <li>-Tags keinen <ul>-Tag haben.
Wenn du meinst, einen Link zu der Seite wo ich dies online habe - ich habe weder diese Site schon online gestellt noch habe ich eine Ahnung, wo ich mir das alles zusammengeklaubt habe *grinst verlegen*
Ich habe hier und dort geschaut und immer wieder was hinzugefügt.
Ich schaue mir das Resultat des Codes im IE und im FF an.
<ul>-Tag bewirkt demnach nur, dass im IE alle Überschriften angezeigt werden und nicht erst, wenn man eine anklickt um die darunter liegende anzuzeigen.
Es ändert jedoch nichts daran, dass sich das Menü schließt, sobald ich auf einen Link klicke (z.B. Überschrift 1 -> freenet). Ist in beiden Browsern so der Fall.
Liegt es vll an der function roll() ?
LG,
Constella
Ich wollte mal nachfragen, ob es normal ist, wenn sich ein Pulldown-Menü-Abschnitt (glaube zumindest, dass es eines ist ^^ - kenne nicht unbedingt den Unterschied zw. Pulldown und Dropdown) schließt nachdem man einen Link angeklickt hat?
Ähm, bitte korrigiere Deinen Code, bevor Du Dich ans Feintuning machst:
.da li {
display:normal;
}
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
function roll(num) {
if(document.all[num].className=="weg")document.all[num].className="da";
else document.all[num].className="weg";
}
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
<span class="weg" id="m1" onClick="roll('m1');">
<b>Überschrift 1</b><br>
<li><a href="http://www.freenet.de" target="_blank">freenet</a></li>
<li><a href="http://www.gmx.de" target="_blank">GMX</a></li>
<li><a href="http://www.google.de" target="_blank">Google</a></li>
</span>
Du hast die UL-Tags um die LIs vergessen.
Siechfred
Hallo Siechfred!
<span class="weg" id="m1" onClick="roll('m1');">
<b>Überschrift 1</b><br>
<li><a href="http://www.freenet.de" target="_blank">freenet</a></li>
<li><a href="http://www.gmx.de" target="_blank">GMX</a></li>
<li><a href="http://www.google.de" target="_blank">Google</a></li>
</span>Du hast die UL-Tags um die LIs vergessen.
Und um die Frage zu beantworten:
Ich wollte mal nachfragen, ob es normal ist, wenn sich ein Pulldown-Menü-Abschnitt (glaube zumindest, dass es eines ist ^^ - kenne nicht unbedingt den Unterschied zw. Pulldown und Dropdown) schließt nachdem man einen Link angeklickt hat?
So wie das Menü aussieht ist es normal: der onclick-Handler wurde den span-Elementen zugewiesen. Das bedeutet, das ein Klick auf jeden der jeweils drei Links oder sonstwo in diesen span-Abschnitten die Funktion roll() aufruft. Und die setzt ja die Eigenschaft display wieder auf »none«, der Abschnitt »klappt« also wieder »zu«.
@Constella: ein ziemlich grausames Stück Code, das Du Dir da »zusammengesucht« hast.
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo Patrick,
Und um die Frage zu beantworten:
Ich wollte mal nachfragen, ob es normal ist, wenn sich ein Pulldown-Menü-Abschnitt (glaube zumindest, dass es eines ist ^^ - kenne nicht unbedingt den Unterschied zw. Pulldown und Dropdown) schließt nachdem man einen Link angeklickt hat?
So wie das Menü aussieht ist es normal: der onclick-Handler wurde den span-Elementen zugewiesen. Das bedeutet, das ein Klick auf jeden der jeweils drei Links oder sonstwo in diesen span-Abschnitten die Funktion roll() aufruft. Und die setzt ja die Eigenschaft display wieder auf »none«, der Abschnitt »klappt« also wieder »zu«.
Ok .. Vielen Dank, du hast mir damit doch ein wenig weiter geholfen. *lächelt*
@Constella: ein ziemlich grausames Stück Code, das Du Dir da »zusammengesucht« hast.
*grinst verschmitzt* Irgendwie muss man ja mal anfangen. ^^
Und so lerne ich das auch richtig zu machen, wenn anfangs Fehler drin sind. Das gibt den Anreiz daran weiter zu basteln und eine Lösung zu finden - oder beim Verzweifeln in einem Forum um Rat zu fragen. ^^
LG,
Constella
Hallo Siechfred,
.da li {
display:normal;
}
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#displayfunction roll(num) {
if(document.all[num].className=="weg")document.all[num].className="da";
else document.all[num].className="weg";
}
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
Was möchtest du mir mit diesen Links sagen?
Es ist mir nicht so ganz ersichtlich was ich daraus schließen / in meinem Code ändern sollte.
LG,
Constella
Hallo Constella!
Was möchtest du mir mit diesen Links sagen?
Bist Du den Links gefolgt?
.da li {
display:normal;
}
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
Warum verlinkt hier Siechfred den SELFHTML-Abschnitt über »display« direkt unter Dein Code-Stück mit »display:normal«, Deiner Meinung nach? Wird auf der verlinkten Seite irgendwo eine solche Angabe erwähnt?
function roll(num) {
if(document.all[num].className=="weg")document.all[num].className="da";
else document.all[num].className="weg";
}
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_idEs ist mir nicht so ganz ersichtlich was ich daraus schließen / in meinem Code ändern sollte.
Hier ist es zugegebenermaßen vielleicht nicht so klar... aber Siechfred schickt Dich zu der Beschreibung der Methode »getElementById«, weil Dein Code die ehemals IE-proprietäre »document.all« benutzt, die nicht verwendet werden sollte.
Viele Grüße aus Frankfurt/Main,
Patrick
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
Was möchtest du mir mit diesen Links sagen?
Du hast einen ungültigen Wert für display verwendet, welche zulässig sind, kannst Du unter Link 1 nachlesen.
Lass' die Finger von document.all, das ist IE-spezifisch. Zwar unterstützen andere Browser das Objekt, allerdings tut zumindest der Firefox so, als ob er es nicht kennt, weshalb die Abfrage:
if(document.all[num].className=="weg")
im Firefox nie wahr sein wird. Verwende statt dessen besser document.getElementById, wie man das einsetzt, kannst Du in Link 2 nachlesen.
Siechfred
<span class="weg" id="m1" onClick="roll('m1');">
<b>Überschrift 1</b><br>
<li><a href="http://www.freenet.de" target="_blank">freenet</a></li>
<li><a href="http://www.gmx.de" target="_blank">GMX</a></li>
<li><a href="http://www.google.de" target="_blank">Google</a></li>
</span>Du hast die UL-Tags um die LIs vergessen.
Ändert sich nicht wirklich viel ...
Außer das, wie schon mal erwähnt, dass alle Überschriften nun im IE angezeigt werden und nicht erst, wenn ich die erste angeklickt hab und die darunterliegende zum Vorschein kommt.
Weiteres ändern sich eigentlich die <li>-Tags um eine Kleinigkeit: sie rücken etwas nach rechts ... Mag sein, dass <ul>-Tag sinnvoller wäre drum herum - es ist eh alles noch in der Testphase
LG,
Constella
Hallo Siechfred,
.da li {
display:normal;
}
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
»»
Ok, hab jetzt anstelle von display:normal display:list-item genommen
Funktioniert auch so weit ^^
function roll(num) {
if(document.all[num].className=="weg")document.all[num].className="da";
else document.all[num].className="weg";
}
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
Hier weiß ich immer noch nciht, wie ich da genau vorgehen soll.
War mal so "primitiv" und hab anstelle von dem .all .getElemenById genutzt und sonst so gelassen wie alles da steht (ich denke mal fast, dass es nicht der richtige Lösungsansatz war ^^ - also des einfach da so reinschreiben )
Wie sollte ich das am besten dann mit getElementById realisieren?
Ich steig da leider nicht so ganz hinter.
LG,
Constella
Hallo Constella!
Ok, hab jetzt anstelle von display:normal display:list-item genommen
Funktioniert auch so weit ^^
Prima!
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
Hier weiß ich immer noch nciht, wie ich da genau vorgehen soll.
War mal so "primitiv" und hab anstelle von dem .all .getElemenById genutzt und sonst so gelassen wie alles da steht (ich denke mal fast, dass es nicht der richtige Lösungsansatz war ^^ - also des einfach da so reinschreiben )
Nein, einfaches Ersetzen kann nicht funktionieren.
Aber, wir wollen uns mal den gesamten Code anschauen und Schritt für Schritt vorgehen, ja?
Zunächst fehlt eine Doctype-Angabe zu Beginn des Dokuments. Zum Beispiel die:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Dann sollte man:
<script type="text/javascript">
verwenden anstelle von »language="JavaScript"«. Das ist nämlich veraltet und ohne die Type-Angabe ist das Dokument invalide.
Nach dem Einleitung des Skript-Blocks durch obige Zeile wird gleich eine Funktion deklariert, sie heißt roll(). Und sie erwartet einen Parameter, der zwischen den Klammern steht, hier also »num«.
Und was entspricht dieses »num«? In Deinem Code vom Ausgangsposting, siehst du, dass in den eröffnenden <span>-Tags im onclick-Attribut (BTW: onclick sollte man klein schreiben) die Funtkion roll() aufgerufen wird. Der Funktion wird ein Parameter übergeben, der die ID des jeweiligen span-Elements ist (beim allerersten also »m1«, beim zweiten »m2«, usw.).
Innerhalb der Funktion wird der Paramter gebraucht, um mittels document.all das Element mit der selben ID einzublenden (if-Zweig).
Nun wollen wir document.all nicht mehr verwenden und stattdessen getElementById(). Die ID des Elements, das es zu »getten« gibt, kommt zwischen den Klammern: getElementById("id_eines_elements") - und für eine direkte Verwendung zwischen Anführungszeichen. Da bei unserer Funktion aber eine Parameterübergabe stattfindet, dürfen hier keine Anführungszeichen verwendet werden. Sonst würde ein Element mit der ID »num« gesucht, und das gibt es ja nicht.
Hinter if und else sorgen geschweifte Klammer für einen besseren Überblick. Die neu geschriebene Funktion könnte also so aussehen:
function roll(num) {
if (document.getElementById(num).className=="weg") {
document.getElementById(num).className="da";
}
else {
document.getElementById(num).className="weg";
}
}
So, mit dem JavaScript-Bereich wären wir fertig, der wird durch </script> beendet. Jetzt widmen uns dem HTML-Teil.
Wenn Du Überschriften brauchst (sonst hättest Du sie nicht Überschrift1, usw. genannt), warum nicht gleich entsprechende Elemente benutzen? h1-h6 wurde dafür geschaffen!
Die span-Elemente werden überflüssig, der onclick-Händler weisen wir den Überschriften zu:
<h4 onclick="roll('m1')">Überschrift 1</h4><br>
<ul id="m1" class="weg">
<li><a href="http://www.freenet.de" target="_blank">freenet</a></li>
<li><a href="http://www.gmx.de" target="_blank">GMX</a></li>
<li><a href="http://www.google.de" target="_blank">Google</a></li>
</ul>
Es gibt sicher elegantere Umsetzungen, aber diese hier ist Deinem Ursprungscode nicht ganz unähnlich. Ferner kannst Du mittels CSS die Überschriften formatieren und auch die Trennlinien.
Ich steig da leider nicht so ganz hinter.
Nee _dahinter_ kann man nur steigen, wenn man _davor_ bei SELFHTML einsteigt (erst HTML/CSS, dann JavaScript), was Dir hiermit wärmstens empfohlen wird... ;)
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo Patrick,
vielen Dank für die ausführliche Erklärung. *lächelt*
Ich steig da leider nicht so ganz hinter.
Nee _dahinter_ kann man nur steigen, wenn man _davor_ bei SELFHTML einsteigt (erst HTML/CSS, dann JavaScript), was Dir hiermit wärmstens empfohlen wird... ;)
HTML ist mir schon laaaaange nicht mehr fremd.
Ich hab zwar noch nie eine Homepage online gestellt, aber ich bin da durchaus in der Lage recht Gutes hinzubekommen. (zugegeben, einige Dinge habe ich bei diesem Code übersehen [<ul>-Tag; Überschriften - liegt wohl daran, dass ich eher alles kopiert hab anstatt selbst zu schreiben [Programmiererkrankheit eben ;p])
Mit CSS beschäftige ich mich seit knapp nem halben Jahr.
Grunddinge weiß ich also auch dort. Manchmal ist mir noch ein wenig schleierhaft, wie was umzusetzen ist aber es klappt so langsam.
Die Trennlinien hab ich nun auch im CSS formatiert
hr {
height:1px;
color:#0033ff;
background-color:#0033ff;
border:none;
}
(Infos hier bei selfhtml eingeholt ^^ )
Nun denn ... ich werde mich weiter ans Werk machen und einiges umändern. ^^
Vielen Dank nochmals, Patrick.
LG,
Constella
Hallo, ich bins nochmal!
... Die neu geschriebene Funktion könnte also so aussehen:
function roll(num) {
if (document.getElementById(num).className=="weg") {
document.getElementById(num).className="da";
}
else {
document.getElementById(num).className="weg";
}
}
> ~~~html
> <h4 onclick="roll('m1')">Überschrift 1</h4><br>
> <ul id="m1" class="weg">
> <li><a href="http://www.freenet.de" target="_blank">freenet</a></li>
> <li><a href="http://www.gmx.de" target="_blank">GMX</a></li>
> <li><a href="http://www.google.de" target="_blank">Google</a></li>
> </ul>
>
Ich habe beides mal so übernommen und probiert. Nichts.
Wenn ich auf Überschrift klicke öffnet sich kein Menü. (Bei der ersten Überschrift hab ich es so gemacht wie hier, alle anderen sind noch mit dem span-Element versehen - keine einzige Überschrift lässt sich allerdings "öffnen")
Wie könnte ich die Funktion sonst noch ändern?
LG,
Constella
Hallo Constella!
Ich habe beides mal so übernommen und probiert. Nichts.
Da hast Du beim »Übernehmen« wohl einen falschen Fehler gemacht! Ich habe es online gestellt, es ist valide und funzt(TM) im IE, Opera, Firefox.
Ich habe Deine CSS-Regel für <hr> eingebaut und die Zeichenkodierung angegeben (sie gehört auf jedenfall ins Dokument, das hatte ich in meinem gestrigen Posting vergessen):
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Wie könnte ich die Funktion sonst noch ändern?
Da Du nicht den gesamten, korrigierten Code zeigst, kann ich Dir das nicht sagen ;) - Aber schau mal im Quelltext [1] und vergleiche, was Du falsch gemacht hast.
[1] view-source-Links gehen seit WinXP nicht mehr im IE, weil es des Wille Go^H^HMicrosofts ist ;)
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo Patrick,
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Ich wollte gerade sagen, dass es wohl an dieser Zeile lag.
Aber dem ist doch nicht so. (Habe zwei Seiten mit dem gleichen Code, nur die eine Datei hat dein geänertes - habe allerdings bei der falschen geschaut, obs funktioniert)
Ich habe den Code mit dem deinen kontrolliert.
Habe keine Rechtschreibfehler, nichts. Mein Code sieht aus wie deiner - aber trotzdem funktioniert er nicht *am Haare raufen ist*
(10:40 am)
(10:55 am)
Args, immer diese verdammte Groß- und Kleinschreibung >.>
Im Prinzip sind unsere Funktionen wirklich identisch - bei mir ist nur ein klitzekleiner Fehler
getElementByID ... Fiel mir eben auf, als ich Zeile für Zeile alles genau durchgegangen bin.
*aus "D" "d" macht und nachschaut*
Ah, endlich - es funktioniert.
Das war eine schwierige Geburt, dass alles hinzubekommen. Aber mit so freundlicher Hilfe klappt das. ;)
LG,
Constella
Hallo Constella!
*aus "D" "d" macht und nachschaut*
Ah, endlich - es funktioniert.
Statt abzutippen, hättest Du auch aus dem Posting kopieren und in Dein Code einfügen können ;)
Das war eine schwierige Geburt, dass alles hinzubekommen. Aber mit so freundlicher Hilfe klappt das. ;)
Ja, noch ein Vorschlag hätte ich. Füge Deinem Code im CSS-Block dies hinzu:
h4 {
cursor:pointer;
}
So wird der Mauszeiger zur Hand, wenn dieser über die Überschriften ist. So erkennen Besucher, dass man da klicken kann.
Ich hatte gestern noch <b ...> bei den Überschriften 2 und 3, habe das korrigiert, jetzt ist überall h4 - aber das wird Dir aufgefallen sein, oder ;)
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo Patrick,
Statt abzutippen, hättest Du auch aus dem Posting kopieren und in Dein Code einfügen können ;)
»»
Ja, das hätte ich machen können - aber in dem Moment konnte ich meine "Programmiererkrankheit" überwinden und hab selbst geschrieben ^^ (aus Fehlern lernt man ja auch ;) )
h4 {
cursor:pointer;
}
Das ist ideal. :)
Hab schon gesucht, wie man den Mauszeiger zur Hand bekommt. ^^
> Ich hatte gestern noch <b ...> bei den Überschriften 2 und 3, habe das korrigiert, jetzt ist überall h4 - aber das wird Dir aufgefallen sein, oder ;)
Ja, war mir aufgefallen. ^^
Zum übernehmen reichte aber auch eine aus ^^
Vielen, lieben Dank nochmals für deine Hilfe.
\*lächelt und reicht Patrick eine Schachtel Celebration\*
Ich hoffe, du magst Celebration. ^^
LG,
Constella
Hallo Constella!
Hab schon gesucht, wie man den Mauszeiger zur Hand bekommt. ^^
Auch das steht in SELFHTML!
*lächelt und reicht Patrick eine Schachtel Celebration*
Ich hoffe, du magst Celebration. ^^
Würde ich vielleicht, wenn ich wüßte, was für eine »Feier« das ist...
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo Patrick,
Ok, vll google ich ein wenig viel. ;p
Werd mir mal selfhtml zur Standardseite machen für HTML und CSS. ^^
Würde ich vielleicht, wenn ich wüßte, was für eine »Feier« das ist...
http://www.worldofsweets.de/shop/bahlsen-xmas/artikel/celebrations/?sid=154d8a7c35a1bec0caca91bf9f78266c=Celebration ist eine Kleinigkeit zu naschen. ^^
LG,
Constella
Hallo Constella!
Celebrations ist eine Kleinigkeit zu naschen. ^^
Nichts dagegen, aber sei nicht beleidigt, wenn ich nur eins nehme und sie meinem Patenkind weiterreiche, ich bin ja nicht so ein Süßer ;)
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo!
Nachdem ich nun einiges optimiert habe, habe ich den CSS-Teil und den Javascript-Teil in extra Dateien gepackt.
Natürlich habe ich auch beide imporiert, aber nun wird die function roll() nicht mehr ausgeführt.
== == ==
<script type="text/javascript" src="pulldown.js"></script>
== == ==
LG,
Constella
Hallo Constella!
Nachdem ich nun einiges optimiert habe, habe ich den CSS-Teil und den Javascript-Teil in extra Dateien gepackt.
Sehr gute Idee!
Natürlich habe ich auch beide imporiert, aber nun wird die function roll() nicht mehr ausgeführt.
Aber lass mich raten, hatten wir das nicht schon mal? Dir ist sicher irgendwo ein falscher Fehler passiert ;) Poste am besten den gesamten Inhalt von pulldown.js und Dein HTML-Code.
Besser wäre ein Link, wo man sich das online anschauen kann.
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo Patrick!
Mh, ich glaub das hat sich gerade erledigt.
Wollt nochmal schauen und hab die html Datei geöffnet, da lief sie.
Und sie funktioniert immer noch.
Entweder wollte mein Rechner mich gestern bissl veräppeln oder der Browser hat gestreikt. :D
LG,
Constella