nicht angemeldet dedlfix
Der Martin
Matthias Apsel
Matthias Apsel
MudGuard
Der Martin
MudGuard
schönen guten morgen leuts
hab mal wieder ein kleines problem das ich nicht verstehe.
<script type="text/javascript">
var test = window.location.pathname;
var filename = test.substring(test.lastIndexOf('/')+1);
if ( filename == "index.php")
{ document.getElementById('navi1').style.color = 'red'; }
if ( filename == "praxis.php")
{ document.getElementById('navi2').style.color = 'red'; }
</script>
wie ihr sicher sehen könnt will ich je nach aufgerufener seite die schriftfarbe verändern.
jetzt bekomme ich aber einen fehler in der konsole :
TypeError: document.getElementById(...) is null
ich versteh nicht wieso. hab sonst auch immer in anderen scripten mit getElementbyId styles in der css verändert. da hatte ich nie das problem.
pls hlp.
gruss tropenberta
Tach!
TypeError: document.getElementById(...) is null
ich versteh nicht wieso.
Ich kann nur raten, weil in deinem gezeigten Code keines der angesprochenen Elemente vorkommt. Vermutlich kennt der Browser zu der Zeit, in der er den Javascript-Code ausführt, die Elemente noch nicht, weil das sie enthaltende HTML erst später kommt. Ein typischer Fall dafür wäre, wenn das Script im head steht. Dann wird es ausgeführt, noch bevor der Rest der Seite bekannt ist. Der Code kann zwar dort oben stehen bleiben, er darf aber erst ausgeführt werden, wenn das DOM ready ist. Für den Hausgebrauch reicht aber auch, das load-Event von body anzuzapfen.
dedlfix.
hi dedlfix
vielen dank für deine schnelle antwort.
deine vermutung ist richtig. hab das script im head stehen und die betroffenen divs kommen erst später. hab das js jetzt mal nach den divs eingefügt und jetzt bekomme ich auch keinen fehler mehr.
die style color ändert sich aber nicht.
auschnitt aus meiner navi :
<div id="navi">
<div id="navi1" class="navi_pos" style="color:#7F7F7F;"><a href="index.php">Start</a></div>
<div id="navi2" class="navi_pos" style="color:#7F7F7F;"><a href="praxis.php">Praxis</a></div>
</div>
nochmal mein js :
<script type="text/javascript">
var test = window.location.pathname;
var filename = test.substring(test.lastIndexOf('/')+1);
if ( filename == "index.php")
{ document.getElementById('navi1').style.color = '#E0077A'; }
if ( filename == "praxis.php")
{ document.getElementById('navi2').style.color = '#E0077A'; }
</script>
müsste doch eigentlich funzen. pls hlp
gruss tropenberta
Hallo,
<div id="navi1" class="navi_pos" style="color:#7F7F7F;"><a href="index.php">Start</a></div>
<div id="navi2" class="navi_pos" style="color:#7F7F7F;"><a href="praxis.php">Praxis</a></div>
>
> ~~~javascript
<script type="text/javascript">
> var test = window.location.pathname;
> var filename = test.substring(test.lastIndexOf('/')+1);
> if ( filename == "index.php")
> { document.getElementById('navi1').style.color = '#E0077A'; }
>
> if ( filename == "praxis.php")
> { document.getElementById('navi2').style.color = '#E0077A'; }
> </script>
dein Script setzt die Schriftfarbe für einen der div-Container, aber du vergisst wahrscheinlich, dass der Link darin seine eigene Schriftfarbe definiert. Und nicht nur eine, sondern sogar für jede der Pseudoklassen :link, :hover usw. eine eigene.
Ciao,
Martin
Hi Martin
au mann - ich trottel - klar.
jetzt komm ich der sache schon näher.
vielen lieben dank.
gruss micha
Om nah hoo pez nyeetz, tropenberta!
gruss micha
???
Man sollte vermeiden, inlinestyles mit Javascript zu setzen. Darstellungsinformationen gehören ins CSS. Ändere die Klassenzugehörigkeit entsprechender Elemente.
Benutze ein Entwicklertool meist über [F12] erreichbar. Dort kannst du sehen, welche Eigenschaften und Werte bei dem entsprechenden Element zur ANwendung kommen, und auch die Eigenschaften zurückverfolgen.
Matthias
hi Matthias
vielen dank für deine tips. werde in zukunft mehr mit dem entwicklertool arbeiten.
auch der weg mit klassen find ich gut und werde mich heute mittag mal drüber machen und mein script umschreiben.
gruss tropenberta
hi leuts
versuch gerade die class von einem div container mit js zu verändern.
...
<div class="navi_pos" id="navi1"><center><a href="index.html">Startseite</a></center></div>
...
function change_color()
{
var x = window.location.pathname;
var dateiname = x.substring(x.lastIndexOf('/')+1);
if (dateiname == "index.html")
{ document.getElementById("navi1").className = "navi_pos2"; }
}
wenn ich das so mache ändert sich aber die class nicht.
es funktioniert eigentlich alles bis auf die zeile mit className.
gruss tropenberta
Om nah hoo pez nyeetz, tropenberta!
...
<div class="navi_pos" id="navi1"><center><a href="index.html">Startseite</a></center></div>
...
>
> ~~~javascript
> function change_color()
> {
> var x = window.location.pathname;
> var dateiname = x.substring(x.lastIndexOf('/')+1);
>
> if (dateiname == "index.html")
> { document.getElementById("navi1").className = "navi_pos2"; }
> }
>
wenn ich das so mache ändert sich aber die class nicht.
es funktioniert eigentlich alles bis auf die zeile mit className.
Prüfe,ob die Bedingung wahr ist, etwa durch alert()
Matthias
hi Matthias
wenn ich das so mache :
function change_color()
{
var x = window.location.pathname;
var dateiname = x.substring(x.lastIndexOf('/')+1);
if (dateiname == "index.html")
{ document.getElementById("navi1").className = "navi_pos2";
alert(document.getElementById("navi1").className); }
dann bekomm im alert fenster navi_pos2 ausgegeben, also korrekt.
wenn ich dann den seitenquellcode bei mozilla aufrufe, ist die class immer noch
navi_pos.
gruss tropenberta
Hi,
dann bekomm im alert fenster navi_pos2 ausgegeben, also korrekt.
wenn ich dann den seitenquellcode bei mozilla aufrufe, ist die class immer noch
navi_pos.
Bei der Seitenquellcode-Anzeige wird das angezeigt, was der Browser vom Server bekommen hat.
Um die Änderungen zu sehen: selektiere den entsprechenden Teil der Seite und wähle aus dem Context-Menu "view selection source" (weiß nicht, wie das auf deutsch heißt, evtl. sowas wie "Quelltext der Auswahl")
Oder guck mit Firebug in den DOM-Baum ...
cu,
Andreas
hi Andreas
yo - element untersuchen heist das bei mir in mozilla.
hier wird die class korrekt angezeigt.
hab gerade gemerkt das ich nen anderen weg gehen muss.
in meiner css hab ich folgendes stehen :
.navi_pos a:link { color:#9F9F9F; text-decoration:none; }
ich möchte jetzt die color ansteuern und verändern.
hab aber kp wie ich dort hinkomm.
habs mal so probiert - klappt aber nicht :
document.getElementById("navi1").link.style.color = "red";
hier noch mal das html :
<div class="navi_pos" id="navi1"><center><a href="index.html">Milvi-Reiki</a></center></div>
Hallo,
yo - element untersuchen heist das bei mir in mozilla.
hier wird die class korrekt angezeigt.hab gerade gemerkt das ich nen anderen weg gehen muss.
warum das? Soweit ich das bisher verstanden habe, warst du bis eben genau auf dem richtigen Weg.
in meiner css hab ich folgendes stehen :
.navi_pos a:link { color:#9F9F9F; text-decoration:none; }
Genau, das ist die Regel, die auf den ursprünglichen Klassennamen passt.
ich möchte jetzt die color ansteuern und verändern.
Ja, hab ich verstanden. Und wie MudGuard und Matthias schon ausgeführt haben, ist es schlechter Stil, direkt die CSS-Werte zu ändern; stattdessen gilt es als "best practice", eine Klasse zu ändern (oder hinzuzufügen, oder wegzunehmen), und mit CSS auf diese Veränderung zu reagieren.
hab aber kp wie ich dort hinkomm.
Indem du eine zweite CSS-Regel notierst, die auf den geänderten Klassennamen passt. Darin kannst du dann nach Belieben Werte ändern. Das hat auch den Vorteil, dass du bei einer eventuellen späteren Änderung des Designs nicht im Javascript-Code suchen musst, wo überall styles gesetzt werden. Stattdessen brauchst du nur im Stylesheet zu "fummeln".
Ciao,
Martin
warum ich drauf gekommen bin das ich anders machen muss :
ich habe in meiner css folgendes angelegt:
.navi_pos2 a:link { color:red; text-decoration:none; }
nach meiner logik ist es ja so wenn ich die class auf navi_pos2 verändere
spricht er ja nicht mehr diese zeile an :
.navi_pos a:link { color:#9F9F9F; text-decoration:none; }
sondern diese
.navi_pos2 a:link { color:red; text-decoration:none; }
sprich wenn meine if abfrage true ergibt soll er die klasse ändern.
macht er ja auch wie ich bei element untersuchen gesehen habe.
komischerweise ändert er aber die farbe nicht und nimmt immer noch die color von .navi_pos.
mein gedanke war das wenn ich im seitenquelltext es nicht korrekt sehe und bei element untersuchen schon, das sich hier was beist. selbst wenn das, was bei element untersuchen steht stimmt, funktioniert es aber leider nicht.
bin gerade auf arbeit und switche ständig zwischen scripten hin und her, kann sein das ich noch irgendwas übersehen habe. werde heute nachmittag nochmal mit voller konzentration ran gehen und euch auf dem laufenden halten.
gruss tropenberta
Om nah hoo pez nyeetz, tropenberta!
werde heute nachmittag nochmal mit voller konzentration ran gehen und euch auf dem laufenden halten.
und uns dann auch einen Link auf die Seite geben, dann lässt sich dir wesentlich effizienter helfen.
Matthias
@andreas
shit - muss leider sagen ich hab deine antwort vom 27. jetzt gerade gelesen. sry. muss ich irgendwie übersehen haben.
der grund warum ich mit js arbeite ist, das ich echt wenig ahnung von php habe, noch viel weniger als wie mit js und wenn ein problem da ist überleg ich mir lösungen mit js.
musst dir vorstellen hab noch nie gescriptet, erst seit ca. 2 monaten. bin jetzt im ersten lehrjahr und mein chef hat schon angekündigt das ich im 2.lehrjahr auf nen php lehrgang gehen soll.
also momentan hab ich nur nen kleinen satz an befehlen die ich kenne, werden fast täglich mehr, aber ich weiß noch nicht einmal was du mit "Nachfahrenselector" meinst.
werd ich jetzt erstmal googeln um zu checken was du da am 27. geschrieben hast.
habs nochmal durch gelesen, ich versteh wirklich nicht was du meinst sry.
was ich verstehe ist ich soll :
<body class="milvi-reikiindex"> und das irgendwie in php setzen.
@matthias
http://webedition.p166753.webspaceconfig.de/milvi-reiki/
um mein problem nochmal genauer zu beschreiben.
hab ne seite gebastelt und soll die jetzt auf webedition umsetzen. da ich für alle seiten eine navigation template habe, funktioniert es wie ich es vorher in html gemacht habe nicht mehr.
in html hab ich einfach je nach seite nen style="color:red" ins jeweilige <a href> gesetzt.
also hab ich mir das mit dem js überlegt.
schauts euch an.
gruss tropenberta
mahlzeit leuts
yo funktioniert jetzt alles wie ich möchte.
hatte nur
.navi_pos2 a:link { color:#E0077A; text-decoration:none; }
in der css definiert und hab deswegen keine andere farbe gesehen, weil ich ja
die seite bereits besucht hatte.
hab jetzt die restlichen farben definiert und es funzt.
vielen dank an euch alle - habt mich wiedermal weiter gebracht.
gruss tropenberta
Hi,
mein gedanke war das wenn ich im seitenquelltext es nicht korrekt sehe und bei element untersuchen schon, das sich hier was beist.
Warum das so ist, habe ich doch bereits geschrieben. Liest Du gar nicht, was wir Dir schreiben?
Und wie ich schon am 27. um 20:07 schrieb: ich halte es nicht für sinnvoll, hier überhaupt mit Javascript rumzufummeln.
cu,
Andreas
Hi,
[code lang=javascript]
<script type="text/javascript">
var test = window.location.pathname;
var filename = test.substring(test.lastIndexOf('/')+1);
if ( filename == "index.php")
{ document.getElementById('navi1').style.color = 'red'; }
Statt per Javascript eine einzelne Eigenschaft zu setzen, setze im PHP im body-Element eine Klasse (z.B. den Filenamen, ggf. incl. Pfad - ohne das php und ohne die '/').
Und dann nutze im CSS den Nachfahrenselector:
.index a:link { color:red; }
.praxis a:link { color:fuchsia; }
usw.
cu,
Andreas