nicht angemeldet
Div mit JS ausblenden/einblenden
Gunnar BittersmannHallo Forum,
ich möchte Folgendes:
Auf einer html-Seite befindet sich ein Link, der ein Javascript ausführt, welches ein DIV-Element einblendet.
Wird die Seite geladen, ist das DIV-Element unsichtbar.
Wenn ich die Seite ohne aktiviertem Javascript lade, soll der Inhalt des DIV-Elements auch sichtbar sein.
Ich habe dazu folgenden html-Seitencode, leider schaffe ich es nicht, bei aktiviertem Javascript, den DIV-Inhalt beim 1. Laden ausgeblendet anzuzeigen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
function einaus(id) {
var x = document.getElementById(id);
if(x.style.display == 'none')
x.style.display = 'block';
else
x.style.display = 'none';
}
</script>
</head>
<body>
<a href="javascript: einaus('anzeige1');" title="link">Divinhalt folgt hier</a>
<div id="anzeige1">inhalt div1</div>
<script type="text/javascript">
//<![CDATA[
document.write('<div id="anzeige1" style="display:none;">1111');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
document.write('</div>');
//]]> */
</script>
</body>
</html>
Für Eure Hilfe bin ich sehr dankbar!
km
-
@@klickmich:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
▲▲ ▲▲
Was denn nun, englisch oder deutsch?Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau) -
Mahlzeit klickmich,
Auf einer html-Seite befindet sich ein Link, der ein Javascript ausführt, welches ein DIV-Element einblendet.
D.h. vor diesem Zeitpunkt soll das <div> ausgeblendet sein?
Wird die Seite geladen, ist das DIV-Element unsichtbar.
Wenn ich die Seite ohne aktiviertem Javascript lade, soll der Inhalt des DIV-Elements auch sichtbar sein.
D.h. das <div> muss sichtbar/eingeblendet sein und nach dem Laden der Seite per Javascript ausgeblendet werden.
<div id="anzeige1">inhalt div1</div>
Hier hast Du ein <div> mit der ID "anzeige1".
<script type="text/javascript">
//<![CDATA[
document.write('<div id="anzeige1" style="display:none;">1111');Hier erzeugst Du per Javascript den Beginn eines weiteren <div> - auch mit der ID "anzeige1". Einerseits ist das blödsinnig und andererseits erzeugt das invaliden Code: IDs haben dokumentweit eindeutig zu sein.
Möchtest Du nicht vielmehr <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=nach dem Laden der Seite> <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=das <div> mit der ID "anzeige1"> http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=ausblenden?
Alle dafür notwendigen Objekte, Methoden, Eigenschaften und Funktionen scheinst Du zu kennen (schließlich sind sie in Deinem gezeigten Quelltext bereits vorhanden) ... wieso nutzt Du sie nicht?
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
@@EKKi:
Möchtest Du nicht vielmehr <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=nach dem Laden der Seite> <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=das <div> mit der ID "anzeige1"> http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=ausblenden?
Nein, schon vorher.
http://www.webkrauts.de/2008/12/14/sehr-sehr-schnelle-seiten-website-performance-best-practice-teil-2/
http://forum.de.selfhtml.org/archiv/2009/1/t182266/#m1206029 ff.Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-
@@klickmich:
Wird die Seite geladen, ist das DIV-Element unsichtbar.
Dazu gleich mehr. (*)
Wenn ich die Seite ohne aktiviertem Javascript lade, soll der Inhalt des DIV-Elements auch sichtbar sein.
Das bedeutet, du darfst das Element nicht mit CSS verstecken.
Gib dem 'body'-Element mit JavaScript die Klassenzugehörigkeit "javascript-enabled":
<body> <script type="text/javascript">[code lang=javascript]document.body.className += " javascript-enabled"; ~~~</script>[/code] Mit dem Nachfahrenselektor kannst du dann das Element ausblenden, wenn JavaScript aktiviert ist: `.javascript-enabled #anzeige1 {display: none}`{:.language-css} Das erfüllt (\*). (Würde das Element erst bei window.onload ausgeblendet werden, wäre es kurzzeitig sichtbar – unschöner Effekt.) Die Geschichten mit document.write() schmeißt du raus. Live long and prosper, Gunnar -- Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Vielen Dank für die Hilfe!!!
Habe meinen Code wie empfohlen wie folgt geändert. Leider bewirkt der Schalter erst beim 2. Klick das Einblenden des DIV-Elementes.
Woran könnte das liegen?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Language" content="de" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Test</title> <script type="text/javascript"> function einaus(id) { var x = document.getElementById(id); if(x.style.display == 'none') x.style.display = 'block'; else x.style.display = 'none'; } </script> <style type="text/css" media="screen"><!-- .javascript-enabled #anzeige1 {display: none} { } --></style> </head> <body><script type="text/javascript">document.body.className += " javascript-enabled";</script> <a href="javascript: einaus('anzeige1');" title="link">Divinhalt folgt hier</a> <div id="anzeige1">inhalt div1</div> </body> </html>-
@@klickmich:
Habe meinen Code wie empfohlen wie folgt geändert. Leider bewirkt der Schalter erst beim 2. Klick das Einblenden des DIV-Elementes.
Woran könnte das liegen?Daran:
if(x.style.display == 'none')
Das 'style'-Objekt kennt nur Werte, die per JavaScript gesetzt wurden (oder per 'style'-Attribut – aber das tut man ja nicht.[tm])
Einfach umdrehen:
function einaus(id) { var x = document.getElementById(id); if (x.style.display == 'block') x.style.display = 'none'; else x.style.display = 'block'; }Das lässt sich aber besser http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=kürzer schreiben:
function einaus(id) { var x = document.getElementById(id); x.style.display = (x.style.display == 'block' ? 'none' : 'block'); }Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-
-
Hallo klickmich!
Wird die Seite geladen, ist das DIV-Element unsichtbar.
Wenn ich die Seite ohne aktiviertem Javascript lade, soll der Inhalt des DIV-Elements auch sichtbar sein.Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
Diblom [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?-
Danke Patrick,funktioniert natürlich! Nur möchte ich den Inhalt des Divs nicht 2 Mal in die Seite schreiben.
km
-
Hallo klickmich!
funktioniert natürlich! Nur möchte ich den Inhalt des Divs nicht 2 Mal in die Seite schreiben.
Musst Du auch nicht. Hier auf dem standardkonformen Nachbau einer (ehemaligen) miserablen Agenturseite geschieht das mit einem Formular (Klick auf Login). NB: Formular ist nicht aktiv, also nichts eintragen :)
Patrick
--
_ - jenseits vom delirium - _
Diblom [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?-
Sieht wirklich super aus! Nur bleibt der loginlink nicht stehen und somit funktioniert das Script für meine Zwecke nicht :-( Ich schaffe es leider auch nicht, das Ganze umzuschreiben...Schade!
-
Hallo klickmich!
Sieht wirklich super aus! Nur bleibt der loginlink nicht stehen und somit funktioniert das Script für meine Zwecke nicht :-( Ich schaffe es leider auch nicht, das Ganze umzuschreiben...Schade!
Was verstehst Du an den wenigen Zeilen JavaScript nicht (ich habe doch alles kommentiert)... In diesem Nachbau-Beispiel verschwindet zwar das Login-Link, wo ist für Dich das Problem, es anders zu machen?
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
Diblom [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?-
Hi,
In diesem Nachbau-Beispiel verschwindet zwar das Login-Link, wo ist für Dich das Problem, es anders zu machen?
Vermutlich liegt das Problem darin, dass Copy&Paste nicht automatisch die gewuenschten Aenderungen vornimmt.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-
-
-
-
