nicht angemeldet
Der Martin
Gunnar Bittersmann
Der Martin
Gunnar Bittersmann
MudGuard
Gunnar Bittersmann
Hallo
Ich habe mit javascript nicht viel am Hut und entsprechend wenig Ahnung. Ich möchte auch nicht groß einsteigen, nur ein paar Kleinigkeiten umsetzen. Heute brauche ich dazu mal Hilfe, die ich nur mit Recherche nicht gefunden habe. Ich möchte beim Überfahren von Elementen (li) mit der Maus etwas anderes einblenden bzw. was vorhandenes ändern (also nicht das li selbst). Mit Bildern habe ich das in der Vergangenheit schon gemacht aber offenbar sind Bilder ein leichter umzusetzender Sonderfall.
Zusätzliche Anforderung, das was je li eingeblendet wird soll bei allen an der gleichen Stelle auf der Seite liegen.
1. Etwas grundsätzliches:
onmouseover="name_anderes_bild.src='bilder/...';" funktioniert, wenn das andere Bild das Attribut name="name_anderes_bild" hat.
onmouseover="name_anderes_div.innerHTML='...';" funktioniert nicht, wenn das andere div nur das Attribut name="name_anderes_div" hat. Es funktioniert, wenn das andere div das Attribut id="name_anderes_div" hat.
onmouseover="anderes_element.style='...';" funktioniert weder mit name noch mit id.
("funktioniert nicht" heißt, es passiert nichts, zumindest nichts erkennbares)
Warum ist das so, was unterscheidet src, innerHTML und style?
2. Wenn ich mit der zweiten Variante (innerHTML=) einem div einen Inhalt verpasse, dann wird ein äußeres div (mit Hintergrundbild und -farbe) nicht mit vergrößert und der Text ragt ggf. darüber hinaus. Außerdem können häßliche Zuckungen auftreten, wenn der eingeblendete Text nicht mehr auf die Seite paßt und der onmouseover-Bereich dadurch unter dem Mauszeiger wegrutscht.
Kann man das verhindern, wenn ja wie?
3. Wenn nein, würde ich es so lösen, daß der Inhalt schon da ist, also seinen Platz beansprucht, aber unsichtbar ist. Das hätte ich nun mit style versucht aber wie oben beschrieben geht es nicht. Ich habe im Internet Lösungen gefunden, die mir sehr umständlich und zu umfangreich vorkommen (da werden extra Funktionen aufgerufen).
Wie kann ich ohne viel Drumherum mit onmouseover die Werte für style eines anderen Elements ändern?
Hi,
onmouseover="name_anderes_bild.src='bilder/...';" funktioniert, wenn das andere Bild das Attribut name="name_anderes_bild" hat.
ja, sollte.
onmouseover="name_anderes_div.innerHTML='...';" funktioniert nicht, wenn das andere div nur das Attribut name="name_anderes_div" hat. Es funktioniert, wenn das andere div das Attribut id="name_anderes_div" hat.
Aber nur im IE, schätze ich.
Grund ist, dass das name-Attribut für div nicht erlaubt ist, und der IE das ausnahmsweise sehr ernst nimmt - er ignoriert ein gesetztes name-Attribut in einem div-Element.
Dafür macht er aber seit Urzeiten einen Fehler, der hier zum Tragen kommt: Er schmeißt name- und id-Attributwerte alle in einen Topf. Das führt dazu, dass Elemente mit id auch gefunden werden, wenn man eigentlich nach einem name sucht (und umgekehrt).
onmouseover="anderes_element.style='...';" funktioniert weder mit name noch mit id.
("funktioniert nicht" heißt, es passiert nichts, zumindest nichts erkennbares)
Den Kontext solltest du genauer beschreiben. Je nachdem, was für ein Element damit angesprochen werden soll, gilt nämlich theoretisch auch hier einer der beiden obigen Fälle.
Warum ist das so, was unterscheidet src, innerHTML und style?
Nichts. Es geht nicht darum, welche Eigenschaft des Elementobjekts du ansprechen willst - es geht darum, wie du das Elementobjekt an sich ansprechen kannst.
- Wenn ich mit der zweiten Variante (innerHTML=) einem div einen Inhalt verpasse, dann wird ein äußeres div (mit Hintergrundbild und -farbe) nicht mit vergrößert und der Text ragt ggf. darüber hinaus. Außerdem können häßliche Zuckungen auftreten, wenn der eingeblendete Text nicht mehr auf die Seite paßt und der onmouseover-Bereich dadurch unter dem Mauszeiger wegrutscht.
Irgendwelche lustigen Kombinationen von position und overflow?
Wie kann ich ohne viel Drumherum mit onmouseover die Werte für style eines anderen Elements ändern?
Am besten zeigst du das Problem mal in einem minimalisierten Zusammenhang - aber auf jeden Fall mit dem relevanten CSS dazu. Dann kann man leichter weiterdiskutieren.
So long,
Martin
Hi,
onmouseover="name_anderes_div.innerHTML='...';" funktioniert nicht, wenn das andere div nur das Attribut name="name_anderes_div" hat. Es funktioniert, wenn das andere div das Attribut id="name_anderes_div" hat.
Aber nur im IE, schätze ich.
Grund ist, dass das name-Attribut für div nicht erlaubt ist, und der IE das ausnahmsweise sehr ernst nimmt - er ignoriert ein gesetztes name-Attribut in einem div-Element.
Dafür macht er aber seit Urzeiten einen Fehler, der hier zum Tragen kommt: Er schmeißt name- und id-Attributwerte alle in einen Topf. Das führt dazu, dass Elemente mit id auch gefunden werden, wenn man eigentlich nach einem name sucht (und umgekehrt).
Erschwerend kommt hier noch hinzu, dass mit dem gezeigten Code nach überhaupts nichts „gesucht“ wurde - sondern er sich darauf verlässt, dass Elemente mit IDs automatisch die Erzeugung von entsprechend benannten JavaScript-Objekten im globalen Scope nach sich ziehen, was auch eine IE-Unart ist.
MfG ChrisB
Hallo,
onmouseover="name_anderes_div.innerHTML='...';" funktioniert nicht, wenn das andere div nur das Attribut name="name_anderes_div" hat. Es funktioniert, wenn das andere div das Attribut id="name_anderes_div" hat.
Aber nur im IE, schätze ich.
[...]
Erschwerend kommt hier noch hinzu, dass mit dem gezeigten Code nach überhaupts nichts „gesucht“ wurde - sondern er sich darauf verlässt, dass Elemente mit IDs automatisch die Erzeugung von entsprechend benannten JavaScript-Objekten im globalen Scope nach sich ziehen, was auch eine IE-Unart ist.
ACK, guter Hinweis. Daran habe ich hier gar nicht gedacht.
Ciao,
Martin
onmouseover="name_anderes_div.innerHTML='...';" funktioniert nicht, wenn das andere div nur das Attribut name="name_anderes_div" hat. Es funktioniert, wenn das andere div das Attribut id="name_anderes_div" hat.
Aber nur im IE, schätze ich.
Nein, in allen getesteten Browsern, FF3.6, FF4, IE6, Opera11.10, Seamonkey2.0.13. (nur mit name und mit name und id)
onmouseover="anderes_element.style='...';" funktioniert weder mit name noch mit id.
("funktioniert nicht" heißt, es passiert nichts, zumindest nichts erkennbares)Den Kontext solltest du genauer beschreiben. Je nachdem, was für ein Element damit angesprochen werden soll, gilt nämlich theoretisch auch hier einer der beiden obigen Fälle.
Ich hatte ein div genommen.
- Wenn ich mit der zweiten Variante (innerHTML=) einem div einen Inhalt verpasse, dann wird ein äußeres div (mit Hintergrundbild und -farbe) nicht mit vergrößert und der Text ragt ggf. darüber hinaus. Außerdem können häßliche Zuckungen auftreten, wenn der eingeblendete Text nicht mehr auf die Seite paßt und der onmouseover-Bereich dadurch unter dem Mauszeiger wegrutscht.
Irgendwelche lustigen Kombinationen von position und overflow?
Ich weiß nicht was Du meinst, ich beschreibe mein gewünschtes Ziel und was ich gemacht habe unten noch mal.
Wie kann ich ohne viel Drumherum mit onmouseover die Werte für style eines anderen Elements ändern?
Am besten zeigst du das Problem mal in einem minimalisierten Zusammenhang - aber auf jeden Fall mit dem relevanten CSS dazu. Dann kann man leichter weiterdiskutieren.
Hängt das auch noch davon ab, welche Werte ich ändern will? Welche das sind, habe ich mir noch nicht genau überlegt.
Bisher habe ich in eimem container (div) eine Überschrift und darunter eine Liste. Die Liste ist mit links mit Außenabstand versehen (em), damit sie zur Überschrift etwah rechtsbündig abschließt. Dadurch ist links von der Liste ein freier Bereich. Den Platz will ich nutzen um zu jedem Listeneintrag eine Infobox einzublenden.
Momentan habe ich dazu ein links flotendes div mit fester Breite (em) in dem ich mittels innerHTML Text einblende. Mancher Text ist länger als die Liste, wodurch er über den container ragt.
Ich stelle gleich was online, nach dem Mittagessen.
Bisher habe ich in eimem container (div) eine Überschrift und darunter eine Liste. Die Liste ist mit links mit Außenabstand versehen (em), damit sie zur Überschrift etwah rechtsbündig abschließt. Dadurch ist links von der Liste ein freier Bereich. Den Platz will ich nutzen um zu jedem Listeneintrag eine Infobox einzublenden.
Momentan habe ich dazu ein links flotendes div mit fester Breite (em) in dem ich mittels innerHTML Text einblende. Mancher Text ist länger als die Liste, wodurch er über den container ragt.
Ich stelle gleich was online, nach dem Mittagessen.
Ich habe es reduziert und einiges farblich hervorgehoben. Das Worum es geht, ist der Bereich mit blauem Hintergrund (im Quelltext das letzte div mit der Klasse "maincell"), den Listenelementen und der Infobox darin habe ich einen roten Rahmen gegeben.
http://www.zwobotsgeist.de/test/test.html
http://www.zwobotsgeist.de/test/css.css
Meine Idee war ja nun, die Infobox immer ihren Inhalt einnehmen zu lassen, sie aber nur bei Bedarf sichtbar zu machen. Da es aber mehrere Infoboxen an der selben Stelle sind, frage ich mich, ob das überhaupt geht.
Zur Erklärung noch mal. Die Seite soll nicht länger werden, wenn eine Infobox eingeblendet wird (die Box soll aber nicht abgschnitten werden o.ä.). Ich weiß nicht wie viel Platz ich für die Box benötige, je nach Zoom-Stufe, Schriftart, Inhalt und Beite, können auch verschiedene Boxen die längste Box sein.
PS.:
- Wenn ich mit der zweiten Variante (innerHTML=) einem div einen Inhalt verpasse, dann wird ein äußeres div (mit Hintergrundbild und -farbe) nicht mit vergrößert und der Text ragt ggf. darüber hinaus.
Das mit dem Darüberhinausragen, hat nichts mit dem hier diskutierten zu tun, das liegt wohl am float.
Hi,
Zur Erklärung noch mal. Die Seite soll nicht länger werden, wenn eine Infobox eingeblendet wird (die Box soll aber nicht abgschnitten werden o.ä.).
Du kannst einen Zwei-Meter-Mann nicht in einem Kindersarg beerdigen - entweder musst du einen größeren Sarg nehmen, oder den Mann abschneiden.
MfG ChrisB
Mahlzeit ChrisB,
Du kannst einen Zwei-Meter-Mann nicht in einem Kindersarg beerdigen - entweder musst du einen größeren Sarg nehmen, oder den Mann abschneiden.
Die Zitatsammlung ist immer noch defekt ... :-(
(Neuvorschlag läuft auf Fehler)
MfG,
EKKi
Zur Erklärung noch mal. Die Seite soll nicht länger werden, wenn eine Infobox eingeblendet wird (die Box soll aber nicht abgschnitten werden o.ä.).
Du kannst einen Zwei-Meter-Mann nicht in einem Kindersarg beerdigen - entweder musst du einen größeren Sarg nehmen, oder den Mann abschneiden.
Und Du meinst, daß mußte mir gesagt werden?
Erstens ist mein Sarg kein Blatt Papier, sondern eine Webseite der man kein Höhe vorgeben muß, egal in welcher Einheit, und zweitens, will ich einen Platzhalter einsetzen, der dem entspricht, was später rein soll, damit sich die Größe eben nicht verändern muß, wenn das was rein soll tatsächlich rein kommt. (Bzw. lasse ich den Platzhalter zu dem werden was rein soll, indem ich ihn sichtbar mache.) In den Sarg soll dann auch das Kind passen. Da ich aber nicht weiß, ob das Kind größer ist als der Zwei-Meter-Mann, muß auch der Platzhalter für das Kind schon im Sarg liegen. Da wir uns im Flächenland befinden, stellt sich nur die Frage, wie man die Platzhalter aufeinander legen kann, ohne daß sie iher Funktion als Platzhalter verlieren.
Hi,
Zur Erklärung noch mal. Die Seite soll nicht länger werden, wenn eine Infobox eingeblendet wird (die Box soll aber nicht abgschnitten werden o.ä.).
Erstens ist mein Sarg kein Blatt Papier, sondern eine Webseite der man kein Höhe vorgeben muß
Deine Forderung, die „Seite“ solle nicht länger werden, schien mir dazu aber im Widerspruch zu stehen.
MfG ChrisB
Deine Forderung, die „Seite“ solle nicht länger werden, schien mir dazu aber im Widerspruch zu stehen.
Sie soll die notwendige Länge von vorn herein haben, damit sie nicht länger wird. Damit die Länge stimmt, soll genau der Inhalt, der bei onmouseover sichtbar werden soll, immer seinen Paltz einnehmen.
Woran ich anfangs nicht gedacht haben, und wofür ich keine Lösung habe*, ist das Problem, daß dazu die verschiedenen Inhalte unsichtbar an der gleichen Stelle Platz einnehmen müssen. Im Ergebnis brauche ich den Schatten eines Stapels unterschiedlich größer Stücken Papier als Platzhalter (wobei nur die Position Unterkannte variiert).
*Und ich habe den Verdacht es ist unlösbar.
@@Texter mit x:
nuqneH
*Und ich habe den Verdacht es ist unlösbar.
Und ich habe den Verdacht, du kennst die http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility@title=visibility-Eigenschaft noch nicht.
Qapla'
*Und ich habe den Verdacht es ist unlösbar.
Und ich habe den Verdacht, du kennst die http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility@title=visibility-Eigenschaft noch nicht.
Springt bei mir der Funke nicht, oder ist Dir entgangen, daß nicht das unsichtbar und sichtbar machen der Punkt ist, sondern das paltzieren mehrere Elemente an gleicher Stelle mit Platzhalteeigenschaft? Es soll immer nur eine Infobox sichtbar sein aber unsichtbar müssen sie am gleichen Ort liegen.
@@Texter mit x:
nuqneH
Springt bei mir der Funke nicht, oder ist Dir entgangen, daß nicht das unsichtbar und sichtbar machen der Punkt ist,
Nein, ist mir nicht entgangen. Mein Gedanke war, die Elemente per 'visibility: hidden' unsichtbar zu machen und sie übereinander (in z-Richtung) zu legen. Dann hätte das höchste Element die Höhe des Containers bestimmt.
Übereinanderlegen heißt aber wohl 'position: absolute', was die Elemente aus dem Fluss nimmt und damit nicht mehr die Höhe des Containers beeinflusst.
Dann muss man also – wie ChrisB schon sagte – die Höhen der Elemente per JavaScript auslesen und dem Container die größte Höhe zuweisen. Dann geht das Unsichtbarmachen aber auch per 'display: none'.
Mir ist noch nichts eingefallen, wie man Übereinanderlegen und Höhe-des-Containers-Beeinflussen mit CSS allein unter einen Hut kriegt – jedenfalls nicht ohne zuätzliches Markup.
Qapla'
Hi,
Dann muss man also – wie ChrisB schon sagte – die Höhen der Elemente per JavaScript auslesen und dem Container die größte Höhe zuweisen.
Nein, muss man doch nicht - die zündende Idee hat nur etwas auf sich warten lassen.
Mir ist noch nichts eingefallen, wie man Übereinanderlegen und Höhe-des-Containers-Beeinflussen mit CSS allein unter einen Hut kriegt – jedenfalls nicht ohne zuätzliches Markup.
Elemente nicht „übereinander“ legen - sondern *neben*einander.
Das Containerelement bekommt eine feste Breite, und overflow:hidden.
Die einzelnen „Items“ bekommen die gleiche feste Breite - und visibility:hidden und ein negatives margin-left entsprechend der Breite, um sie „auszublenden“.
Zum Einblenden eines Items wird es dann auf visible gesetzt, und das margin auf 0.
Mal ein Beispiel, zugegeben nicht allzu “sophisticated”, aber es geht ja ums Prinzip. Das Einblenden wird hier immer noch über JavaScript gemacht - das stattdessen mit :hover und irgendeinem Selektor zu regeln, wird dem interessierten Mitleser überlassen. Wieder Ausblenden ist der Einfachheit halber auch nicht enthalten, aber man sieht ja am Initial-Zustand, dass die UL (roter Hintergrund) bereits die gewünschte Höhe hat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
ul, li { margin:0; padding:0; }
ul { width:10em; background:red; overflow:hidden; }
li { display:inline-block; width:10em; vertical-align:top; margin-left:-10em; visibility:hidden; color:#fff; }
#item1 { background:green; }
#item2 { background:black; }
#item3 { background:blue; }
li.visible { visibility:visible; margin:0; }
span { background:#ccc; cursor:pointer; }
</style>
<script type="text/javascript">
/* <![CDATA[ */
function showItem(itemnumber) {
for(var i=1; i<4; ++i) {
document.getElementById("item"+i).className = itemnumber == i ? "visible" : "";
}
}
/* ]]> */
</script>
</head>
<body>
<p>
<span onmouseover="showItem(1)">show item #1</span>
<span onmouseover="showItem(2)">show item #2</span>
<span onmouseover="showItem(3)">show item #3</span>
</p>
<ul>
<li id="item1">I'm short.</li><li id="item2">I'm a little longer, but not but that much.</li><li id="item3">I'm the tallest basterd of em all. Fear my height, for it shall crush you all. Blah laber, lorem ipsum, noch mehr Quark.</li>
</ul>
</body>
</html>
Getestet in aktuellen Browsern - IE < 8 versaut es natürlich, but we're not surprised, are we. (Versaut es in so fern, dass er die Elemente nach wie vor „untereinander“ darstellt, was in einer entsprechend größeren Höhe des UL-Elements resultiert. Ggf. noch durch irgendwelche Hacks für inline-block o.ä. behebbar.)
Halt, Moment noch - wenn die Darstellung der LI als inline-block durch float:left ersetzt wird, dann spielt sogar der IE bis runter zum 5.5 mit, zumindest laut Test im IETester.
MfG ChrisB
@@ChrisB:
nuqneH
Elemente nicht „übereinander“ legen - sondern *neben*einander.
Hm, in die Richtung hatte ich auch gedacht. Nur nicht bis zuende.
Das Containerelement bekommt eine feste Breite, und overflow:hidden.
Die einzelnen „Items“ bekommen die gleiche feste Breite - und visibility:hidden und ein negatives margin-left entsprechend der Breite, um sie „auszublenden“.
Hm, da war ich auch fast.
Das Einblenden wird hier immer noch über JavaScript gemacht - das stattdessen mit :hover und irgendeinem Selektor zu regeln, wird dem interessierten Mitleser überlassen.
Angesichts der Tatsache, dass der Text bei mouseout stehenbleiben soll, wird _das_ nun mit CSS wirklich kaum gehen. Oder?
Anders sähe es bei click aus, dann würden sich Anker und :target anbieten.
Ich hab auch mal Beispiele hochgeladen. Im Beispiel 0 wird die display-Eigenschaft per JavaScript gesetzt. Sollte man nicht machen, das kann böse ins Auge gehen.
In Beispiel 1 werden per JavaScript lediglich Klassen gesetzt, die jeweilige Sichtbarkeit steht im Stylesheet.
Beispiel 2 ist die Umsetzung von ChrisBs Idee und kommt ohne Höhenberechnung per JavaScript aus.
Bei allen Beispielen wird ohne JavaScript der vollständige Text angezeigt und die dann überflüssigen Buttons ausgeblendet.
Qapla'
Bei allen Beispielen wird ohne JavaScript der vollständige Text angezeigt
Klingt gut, bisher habe ich mich damit abgefunden, wenn man dann nix sieht.
Nachdem ich am Donnerstag einen unauffälligen Bug eingebaut hatte, habe ich es heute hinbekommen. D.h. ich habe das Prinzip von Beispiel 2 auf mein Beispiel übertragen (unvollständig) und ein paar Macken des IE6 & 7 unwirksam gemacht*. Testen und Feinschliff folgt.
Den mir unverständlichen JS-Teil habe ich ersetzt. Vermutlich hätte ich die jquery.min.js studieren müssen, das habe ich mir aber gespart.
Vielen Dank schon mal an ChrisB und Gunnar Bittersmann, aber auch an die anderen, was die Javascript-Grundlagen angeht.
* @ Gunnar Bittersmann, ich meine Macken in meinem Beispiel, deine Beispiele habe ich bisher zwar nur im IE7 getestet, die waren aber ohne Auffälligkeiten. Nur ist Beispiel 2, browserunabhängig, breiter.
Nachfrage 1:
<script>document.documentElement.className += ' js';</script>
Bedeutet das, überall, wo eine Klasse vorhanden ist (oder auch da wo keine vorhanden ist?), wird die klasse 'js' hinzugefügt, auch wenn das Dokument noch gar nicht vollständig geladen ist (das Script steht ja im <head>)? Steht die Klasse 'js' dadurch, sobald geladen, "von Anfang an" im Dokument ohne, daß die Seite erst mal kurz ohne die Klasse dargestellt wird?
Nachfrage 2:
<!--[if lt IE 9]><script src="/style/ie-html5elements.js"></script><![endif]-->
Welchen Zweck hat das? Was muß beim IE9 besonders berücksichtigt werden?
Hi,
<script>document.documentElement.className += ' js';</script>
Bedeutet das, überall, wo eine Klasse vorhanden ist (oder auch da wo keine vorhanden ist?), wird die klasse 'js' hinzugefügt, auch wenn das Dokument noch gar nicht vollständig geladen ist (das Script steht ja im <head>)?
Nein.
Dem einen Element, auf das document.documentElement referenziert, wird die Klasse "js" hinzugefügt - hinzugefügt dadurch, dass der aktuelle Inhalt seines className-Attributes um " js" erweitert wird, so dass eine Klasse, die es ggf. bereits vorher verpasst bekommen hat (per Attribut, oder evtl. auch durch ein vorher eingesetztes Script mit vergleichbaren Absichten), erhalten bleibt.
Du kennst dieses documentElement vermutlich unter dem Elementnamen HTML ;-)
Und da das Script im HEAD steht, der ein Nachfahre von HTML ist, darf davon ausgegangen werden, dass das HTML- bzw. documentElement zu diesem Zeitpunkt bereits existiert.
Steht die Klasse 'js' dadurch, sobald geladen, "von Anfang an" im Dokument ohne, daß die Seite erst mal kurz ohne die Klasse dargestellt wird?
Der Inhalt des Script-Elementes wird vom Browser beim Parsen ausgeführt, sobald er darauf stößt - und der restliche Parse-Vorgang wird für diesen winzigen Moment angehalten.
Da die darzustellenden Inhalte idR. erst nach dem HEAD im BODY kommen, ist wenn diese gerendert werden also schon alles vorbereitet, um ihre Darstellung gleich auf den Regeln im CSS basieren zu lassen, die sie als Nachfahren des HTML-Elements (bzw. „eines Elements“, je nach exaktem Selektor) mit der Klasse .js ansprechen.
Nachfrage 2:
<!--[if lt IE 9]><script src="/style/ie-html5elements.js"></script><![endif]-->
Welchen Zweck hat das? Was muß beim IE9 besonders berücksichtigt werden?
Nicht IE 9, sondern alle IE kleiner 9 - lt ist kurz für Englisch “less then”. (Siehe http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative)
Berücksichtigt werden muss, dass diese keine HTML5-Elemente kennen, und diese ohne JavaScript-Nachhilfe nicht korrekt ins DOM einbauen können/wollen.
Stichwort: html5 shiv
MfG ChrisB
Hallo,
<!--[if lt IE 9]><script src="/style/ie-html5elements.js"></script><![endif]-->
lt ist kurz für Englisch “less then”.
"than", nicht "then".
Sorry, die eine Erbse hatte ich gerade noch übrig. :-)
Ciao,
Martin
Ah - verstanden, noch mal Danke euch beiden.
PS.:
Berücksichtigt werden muss, dass diese keine HTML5-Elemente kennen, und diese ohne JavaScript-Nachhilfe nicht korrekt ins DOM einbauen können/wollen.
Was vermutlich die Ursache für die (unformatierte?!) Darstellung der drei Beispiele im IE7 bei augeschalteten Scripten ist. (Testergebnisse in einem echten IE6 liefere ich, falls sich dabei was negatives ergibt, die Tage noch nach.)
@@Texter mit x:
nuqneH
Den mir unverständlichen JS-Teil habe ich ersetzt. Vermutlich hätte ich die jquery.min.js studieren müssen, das habe ich mir aber gespart.
Ich hat der Einfachheit halber jQuery verwendet und mir die Übersetzung in „richtiges“ JavaScript gespart.
Nachfrage 1:
<script>document.documentElement.className += ' js';</script>
Bedeutet das, überall, wo eine Klasse vorhanden ist (oder auch da wo keine vorhanden ist?), wird die klasse 'js' hinzugefügt, auch wenn das Dokument noch gar nicht vollständig geladen ist (das Script steht ja im <head>)? Steht die Klasse 'js' dadurch, sobald geladen, "von Anfang an" im Dokument ohne, daß die Seite erst mal kurz ohne die Klasse dargestellt wird?
Ja. Ja. Javascript mehrstufig zünden [PERFORMANCE-BP2]
BTW, im selben Türchen des Adventskalenders ist auch Event-Delegation erwähnt, was ich in meinen Beispielen auch verwendet hatte. S.a. [molily]
Nachfrage 2:
<!--[if lt IE 9]><script src="/style/ie-html5elements.js"></script><![endif]-->
Welchen Zweck hat das?
http://forum.de.selfhtml.org/archiv/2010/7/t199423/#m1341861
Was muß beim IE9 besonders berücksichtigt werden?
IE 9 hat das Bekanntmachen der HTML5-Elementtypen per JavaScript nicht mehr nötig. Das Script wird nur in älteren IE < 9 geladen und ausgeführt.
Qapla'
@@Gunnar Bittersmann:
nuqneH
<script>document.documentElement.className += ' js';</script>
Bedeutet das, überall […] wird die klasse 'js' hinzugefügt […]?
Ja.
Ähm, nein, nicht überall. Ich hatte deine Frage nicht genau genug gelesen.
Wie ChrisB schon sagte, referenziert document.documentElement das Wurzelelement, bei (X)HTML also das 'html'-Element.
Qapla'
OK, ich überblicke das noch nicht, vor allem, was die Höhe des ul und die Darstellung der li für eine Rolle spielen soll, aber ich versuche es mal.
Elemente nicht „übereinander“ legen - sondern *neben*einander.
Das Containerelement bekommt eine feste Breite, und overflow:hidden.
Die einzelnen „Items“ bekommen die gleiche feste Breite - und visibility:hidden und ein negatives margin-left entsprechend der Breite, um sie „auszublenden“.
Ich glaub Du hast es. An nebeneinander hatte ich auch schon gedacht, ich war nur nicht darauf gekommen, wie ich es die Höhe behalten lassen kann ohne es die Breite einnehmen zu lassen. Ich hatte einfach nicht daran gedacht, daß overflow:hidden auch nur in der Breite abschneidet, wenn man nur die Breite vorgibt.
/* <![CDATA[ /
function showItem(itemnumber) {
for(var i=1; i<4; ++i) {
document.getElementById("item"+i).className = itemnumber == i ? "visible" : "";
}
}
/ ]]> */
Welchen Zweck hat die Auskommentierung in der ersten und der letzten Zeile des Ausschnitts? (Wofür <![CDATA[>Inhalt]]> gut ist, habe ich nachgeschaut.)
Hi,
/* <![CDATA[ /
function showItem(itemnumber) {
for(var i=1; i<4; ++i) {
document.getElementById("item"+i).className = itemnumber == i ? "visible" : "";
}
}
/ ]]> */
> Welchen Zweck hat die Auskommentierung in der ersten und der letzten Zeile des Ausschnitts?
Browser, die das ganze nicht als XML parsen, sondern durch den HTML-Tag-Soup-Parser jagen, davon abzuhalten, die CDATA-Tags als fehlerhaften JavaScript-Code zu interpretieren.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
Übereinanderlegen heißt aber wohl 'position: absolute', was die Elemente aus dem Fluss nimmt und damit nicht mehr die Höhe des Containers beeinflusst.
Eben. Vielleicht hätte ich sagen sollen, daß ich die Überlegung schon angestellt hatte.
Hi,
*Und ich habe den Verdacht es ist unlösbar.
Nein, im Themenbereich JavaScript ist es recht simpel lösbar - Höhe der versteckten Elemente auslesen, Maximum ermitteln - und dann dafür sorgen, dass die „Seite“ eben um einen entsprechenden Wert verlängert wird.
MfG ChrisB
Nein, im Themenbereich JavaScript ist es recht simpel lösbar - Höhe der versteckten Elemente auslesen, Maximum ermitteln -
Wenn das zuverlässig möglich ist, wäre das eine Möglichkeit. Ich versucher es aber erst mal mit deinem anderen Einfall.
Mahlzeit Texter mit x,
- Etwas grundsätzliches:
onmouseover="name_anderes_bild.src='bilder/...';" funktioniert, wenn das andere Bild das Attribut name="name_anderes_bild" hat.
onmouseover="name_anderes_div.innerHTML='...';" funktioniert nicht, wenn das andere div nur das Attribut name="name_anderes_div" hat. Es funktioniert, wenn das andere div das Attribut id="name_anderes_div" hat.
onmouseover="anderes_element.style='...';" funktioniert weder mit name noch mit id.
Von mir auch etwas Grundsätzliches (in Ergänzung zu Der Martins Ausführungen):
Du solltest Dich nicht darauf verlassen, dass IrgendEin Browser automagisch irgendwelche globalen Variablen anlegt und dahinter Elemente versteckt, sondern auf die Elemente so zugreifen, wie es vernünftig und sinnvoll ist:
Nutze z.B. http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=document.getElementById(), http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name@title=document.getElementsByName() (aber natürlich nur bei <http://de.selfhtml.org/html/referenz/attribute.htm@title=Elementen, die auch ein "name"-Attribut haben dürfen>!) oder http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=document.getElementsByTagName() ...
MfG,
EKKi
Du solltest Dich nicht darauf verlassen, dass IrgendEin Browser automagisch irgendwelche globalen Variablen anlegt und dahinter Elemente versteckt, sondern auf die Elemente so zugreifen, wie es vernünftig und sinnvoll ist:
Ich wußte nichts von irgendwelchen Variablen auf die ich mich hätte verlassen können oder nicht. Ich bin von der Variante mit den Bildern ausgegangen, die ich mir damals auch nicht selber habe einfallen lassen und die immer funktioniert hat, und habe mit der gleichen Systematik andere Attribute ansprechen wollen. So wie ich nicht davon ausgehe, daß ich in php die if-Bedingung anders schreiben muß, wenn ich in deren Abhängigkeit einen String statt einem Integer zuweisen will, so bin ich nicht davon ausgegangen, daß ich verschiedene Attribute verschieden ansprechen muß. Gut, daß name im div nicht zugelassen ist, habe ich nicht beachtet, aber daß ist ja offenbar nicht das eigentliche Problem.
Mahlzeit Texter mit x,
Ich bin von der Variante mit den Bildern ausgegangen, die ich mir damals auch nicht selber habe einfallen lassen und die immer funktioniert hat,
Gerade wenn man Code "einfach übernimmt", sollte man sich eigentlich immer klar machen, *warum* bzw. *wie* dieser Code funktioniert. Dann wäre Dir nämlich bereits vorher das Problem des "richtigen" Zugriffs auf DOM-Elemente bewusst geworden.
und habe mit der gleichen Systematik andere Attribute ansprechen wollen.
Das Problem sind nicht die Attribute - und sie waren es auch nie. Das Problem war, ist und bleibt der Zugriff auf die Elemente ... jedenfalls solange, wie Du das nicht korrigierst.
So wie ich nicht davon ausgehe, daß ich in php die if-Bedingung anders schreiben muß, wenn ich in deren Abhängigkeit einen String statt einem Integer zuweisen will,
Musst Du auch nicht - Thema "Äpfel und Birnen" ...
so bin ich nicht davon ausgegangen, daß ich verschiedene Attribute verschieden ansprechen muß.
Musst Du auch nicht - s.o.
Gut, daß name im div nicht zugelassen ist, habe ich nicht beachtet, aber daß ist ja offenbar nicht das eigentliche Problem.
Das ist *AUCH* ein Problem. Das *EIGENTLICHE* Problem liegt aber immer noch woanders.
MfG,
EKKi
Sorry, ich hatte das schon verstanden. Es war nur eine Erklärung wie ich in die Situatuion gekommen bin, aus der heraus ich diesen Thread gestartet habe.
und habe mit der gleichen Systematik andere Attribute ansprechen wollen.
Das Problem sind nicht die Attribute - und sie waren es auch nie. Das Problem war, ist und bleibt der Zugriff auf die Elemente
Es hätte in meiner Situation auch keinen Unterschied gemacht, wenn ich auf andere Elemente zugegriffen hätte (habe ich ohnehin).
Hallo
Wie kann ich ohne viel Drumherum mit onmouseover die Werte für style eines anderen Elements ändern?
<script type="text/javascript">
function changeStyle(idDesHtmlElements, cssValue) {
document.getElementById(idDesHtmlElements).style.color = "" + cssValue + "";
}
</script>
<div id="spezial" onmouseover="changeStyle(this.id,'#990000')" onmouseout="changeStyle(this.id,'#000000')">
Text
</div>
Das kannst du nun ganz deinen Bedürfnissen anpassen. Aber so solltest du jedes Element ansprechen können.
Natürlich kannst du dann auch innerHTML nutzen:
<script type="text/javascript">
function changeContent(idDesHtmlElements, inhalt) {
document.getElementById(idDesHtmlElements).innerHTML = "" + inhalt + "";
}
</script>
Stichwort DOM
@@Georg:
nuqneH
function changeStyle(idDesHtmlElements, cssValue) {
document.getElementById(idDesHtmlElements).style.color = "" + cssValue + "";
}
Das ist grober Unfug.
Zum einen möchte man nicht bei jedem Funktionsaufruf das betreffende Element per getElementById() Aus dem DOM erneut raussuchen. Schon gar nicht, wenn man bereits eine Referenz auf das Elementobjekt hat.
Also nicht die ID eines Elements als Parameter übergeben, sondern schon die Referenz auf dieses Elementobjekt.
Und was soll die unsinnige Stringkonkatenation mit Leerstrings "" + cssValue + ""?
Last but not least möchte man keine CSS-Eigenschaften mit JavaScript ändern, sondern irgendwas, was die Zustandsänderung beschreibt. Klassenzugehörigkeiten bieten sich oft an. Die Werte der CSS-Eigenschaften stehen nicht im JavaScript, sondern dort, wo sie hingehören: im Stylesheet.
Qapla'
@@Georg:
nuqneH
function changeStyle(idDesHtmlElements, cssValue) {
document.getElementById(idDesHtmlElements).style.color = "" + cssValue + "";
}Das ist grober Unfug.
Zum einen möchte man nicht bei jedem Funktionsaufruf das betreffende Element per
getElementById()Aus dem DOM erneut raussuchen. Schon gar nicht, wenn man bereits eine Referenz auf das Elementobjekt hat.
Nun da nicht klar ist was und wie angesprochen werden soll warum nicht als Parameter übergeben? Und man will auch nicht für jedes dazukommende Element am javascript Hand anlegen.
Also nicht die ID eines Elements als Parameter übergeben, sondern schon die Referenz auf dieses Elementobjekt.
Wenn klar ist das es ein bestimmtes Element ist und sich das auch nicht ändert würde ich zustimmen.
Und was soll die unsinnige Stringkonkatenation mit Leerstrings
"" + cssValue + ""?
Hätte man auch weglassen können.
Last but not least möchte man keine CSS-Eigenschaften mit JavaScript ändern, sondern irgendwas, was die Zustandsänderung beschreibt. Klassenzugehörigkeiten bieten sich oft an. Die Werte der CSS-Eigenschaften stehen nicht im JavaScript, sondern dort, wo sie hingehören: im Stylesheet.
Ok hier gebe ich dir recht. War aber zu faul jetzt Klassen anzulegen und diese dem Element zuzuweisen. Im günstigsten Fall ist an dieser Stelle auch kein Javascript notwendig, je nach Änderungen.
Hallo,
function changeStyle(idDesHtmlElements, cssValue) {
document.getElementById(idDesHtmlElements).style.color = "" + cssValue + "";
}
Das ist grober Unfug.
Zum einen möchte man nicht bei jedem Funktionsaufruf das betreffende Element pergetElementById()Aus dem DOM erneut raussuchen. Schon gar nicht, wenn man bereits eine Referenz auf das Elementobjekt hat.
Nun da nicht klar ist was und wie angesprochen werden soll warum nicht als Parameter übergeben?
als Parameter übergeben ist gut und richtig - aber warum über eine ID, die nicht mal jedes Element zwangsläufig haben muss? Warum nicht direkt eine Referenz auf das Element?
DAS war Gunnars Knackpunkt.
Die Referenz auf das Element hat man im Eventhandler automatisch als 'this', so dass man nicht das DOM nach einer bestimmten ID durchsuchen muss.
Ciao,
Martin
Hallo,
als Parameter übergeben ist gut und richtig - aber warum über eine ID, die nicht mal jedes Element zwangsläufig haben muss? Warum nicht direkt eine Referenz auf das Element?
DAS war Gunnars Knackpunkt.Die Referenz auf das Element hat man im Eventhandler automatisch als 'this', so dass man nicht das DOM nach einer bestimmten ID durchsuchen muss.
Ok jetzt hab ich auch verstanden was er sagen wollte. Also vielmehr so:
<script type="text/javascript">
function changeStyle(HtmlElement, cssValue) {
HtmlElement.style.color="red";
}
</script>
<div onmouseover="changeStyle(this,'#990000')" onmouseout="changeStyle(this,'#000000')">
Text
</div>
Und bevor es gesagt wird, erneut. Ja eigentlich gehört das ins Css und eine Klasse sollte höchstens zugewiesen werden. Geht aber um was anderes jetzt.
Und ja hierfür wäre js nicht notwendig.
@@Georg:
nuqneH
<script type="text/javascript">
function changeStyle(HtmlElement, cssValue) {
HtmlElement.style.color="red";
}
Du stehst auf Rot? Einmal rot für immer und ewig? ;-)
Du meintest HtmlElement.style.color = cssValue;
Eine Funktion, die die Farbe ändert, sollte nicht changeStyle heißen, sondern eher changeColor.
Von changeStyle würde ich erwarten, dass ich die zu ändernde CSS-Eigenschaft auch als Parameter angeben kann:
function changeStyle(element, property, value)
{
element.style[property] = value;
}
Aber zum einen braucht man dafür keine Extra-Funktion; statt changeStyle(myElement, myProperty, myValue) könnte man gleich myElement.style[myProperty] = myValue schreiben.
Und zum anderen will man – wie gesagt – in JavaScript keine Stile ändern.
Qapla'
[latex]Mae govannen![/latex]
function changeStyle(HtmlElement, cssValue) {
HtmlElement.style.color="red";
}Du stehst auf Rot? Einmal rot für immer und ewig? ;-)
function berechneAntwort (wert1, wert2, wert3) {
return 42;
}
;)
Und zum anderen will man – wie gesagt – in JavaScript keine Stile ändern.
Manchmal (selten allerdings) läßt sich das nicht/schwer vermeiden (dynamische Werte, bei denen man -zig klassen im CSS anlegen müßte).
Stur lächeln und winken, Männer!
Kai
@@Kai345:
nuqneH
function berechneAntwort (wert1, wert2, wert3) {
return 42;
}
*g*
Manchmal (selten allerdings) läßt sich das nicht/schwer vermeiden (dynamische Werte, bei denen man -zig klassen im CSS anlegen müßte).
Auch darauf hat CSS 3 eine – ähm – Antwort.
Qapla'
[latex]Mae govannen![/latex]
Manchmal (selten allerdings) läßt sich das nicht/schwer vermeiden (dynamische Werte, bei denen man -zig klassen im CSS anlegen müßte).
Auch darauf hat CSS 3 eine – ähm – Antwort.
Wenn vIEle Browser das nicht beherrschen, bringt es nur nix, wenn es nicht gerade „nur“ ein Aufhübschungs-Effekt ist.
Für eine begrenzte Anzahl und bestimmte Art der gewünschten Regeln kann man selbige dann eher per insertRule()/addRule() erzeugen. Man schaltet im JS dann weiterhin bspw. per Klassen-Namen um, muß aber die Liste sehr ähnlicher Regeln nicht händisch im CSS pflegen. Kommt darauf an, was man erreichen will. Muß man halt „Stubbe“ entscheiden :)
Stur lächeln und winken, Männer!
Kai
[latex]Mae govannen![/latex]
function berechneAntwort (wert1, wert2, wert3) {
return 42;
}*g*
Eigentlich:
function berechneAntwort (wert1, wert2, wert3) {
return (Math.abs(Math.PI * wert1) * Math.sin(Math.abs(wert2)) + Math.pow(wert3, 2)) * (Math.ceil(Math.cos(90 / (2 * Math.PI)))) + Math.ceil(Math.floor(Math.LN10) * Math.sqrt(Math.floor(Math.E * 162)));
}
Stur lächeln und winken, Männer!
Kai
function berechneAntwort (wert1, wert2, wert3) {
return (Math.abs(Math.PI * wert1) * Math.sin(Math.abs(wert2)) + Math.pow(wert3, 2)) * (Math.ceil(Math.cos(90 / (2 * Math.PI)))) + Math.ceil(Math.floor(Math.LN10) * Math.sqrt(Math.floor(Math.E * 162)));
}
Kann man damit den Umrechnungsfaktor von Thermometer zu Thermoinch berechnen?
Du stehst auf Rot? Einmal rot für immer und ewig? ;-)
Rot ist meine Defaultfarbe während ich entwickel. Backgrounds, highlights...
Du meintest
HtmlElement.style.color = cssValue;Eine Funktion, die die Farbe ändert, sollte nicht changeStyle heißen, sondern eher changeColor.
Ursprünglich wollte ich die CssEigenschaft mit angeben lassen wollen. Habs dann doch gelassen.
Von changeStyle würde ich erwarten, dass ich die zu ändernde CSS-Eigenschaft auch als Parameter angeben kann:
function changeStyle(element, property, value)
{
element.style[property] = value;
}
>
> Aber zum einen braucht man dafür keine Extra-Funktion; statt `changeStyle(myElement, myProperty, myValue)`{:.language-javascript} könnte man gleich `myElement.style[myProperty] = myValue`{:.language-javascript} schreiben.
>
Ich persönlich finde einen Funktionsaufruf immer angenehmer im eventhanlder als javascript.
Hi,
Eine Funktion, die die Farbe ändert, sollte nicht changeStyle heißen, sondern eher changeColor.
Von changeStyle würde ich erwarten, dass ich die zu ändernde CSS-Eigenschaft auch als Parameter angeben kann:
Wie? Eine Methode, mit der nur der Wert einer Eigenschaft gesetzt werden kann, soll changeStyle heißen?
Bei changeStyle würde ich erwarten, daß ich eine Liste von Eigenschaften samt Werten als Parameter angeben kann, so daß man den Stil komplett ändern kann ;-)
cu,
Andreas
@@Texter mit x:
nuqneH
Wie kann ich ohne viel Drumherum mit onmouseover die Werte für style eines anderen Elements ändern?
Was soll bei mouseout passieren?
Die Antwort auf diese Frage ist entscheidend, ob JavaScript hier überhaupt die richtige Technologie ist.
Qapla'
Wie kann ich ohne viel Drumherum mit onmouseover die Werte für style eines anderen Elements ändern?
Was soll bei mouseout passieren?
Die Antwort auf diese Frage ist entscheidend, ob JavaScript hier überhaupt die richtige Technologie ist.
Möglichst nichts, d.h. die letzte Infobox soll stehen bleiben. Ich weiß, daß es sonnst auch mit einer reinen css-Lösung gehen könnte.
Kann jemand was dazu sagen? Ich habe keine Idee wie ich ansetzen soll. Oder hat jemand eine Idee für eine andere Umsetzung, bei der das Problem nicht auftritt?
Zur Verdeutlichung des Problems zwei Bilder der selben Seite in verschiedenen Zoomstufen:
http://www.zwobotsgeist.de/test/test1.png
http://www.zwobotsgeist.de/test/test2.png
Wenn man die Seite über einen festen Wert für die Höhe verlängert, müßte man also sehr viel zugeben.
Der Effekt ist auch von den Wortlängen abhängig, wodurch bei verschiedenen Texten bei einer Zoomstufe ein anderer Text der längste sein kann, als bei einer anderen Zoomstufe. Es reicht also nicht aus, nur den vermeintlich längsten Text unsichtbar Platz einnehmen zu lassen um die Seite auf die richtige Länge zu bringen.
