nicht angemeldet
Ein objekt dynamisch ein und ausblenden
Hallo ich möchte beim mouseover einen DIV einblenden der beim mouseout weider verschwiendet.
Die Struktur sieht so aus und ist vom CMS vorgegeben.
<div id="mainmenu">
<div class="moduletable_menu">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr >
<td>
<a href="index.php?Itemid=34&option=com_content" class="mainlevel" >What's New</a>
<!-- Dieses Div muss erscheinen und verschwinden -->
<div style="padding-left: 4px">
<a href="index.php?Itemid=51&option=com_content" class="sublevel" >Test</a>
</div>
</td>
</tr>
</table>
Kann mir jemand helfen wie ich diesen speziellen DIV anspreche?!
-
Hallo,
Die Struktur sieht so aus und ist vom CMS vorgegeben.
Eine vernünftige JavaScript-Logik setzt geeigneten HTML-Code mit entsprechenden eindeutigen Auszeichnungen voraus - das muss ich dir wohl nicht sagen. Wenn es irgendwie möglich ist, bringe das CMS dazu, solchen Code zu generieren. Davon hängt zu einem großen Teil ab, ob deine JavaScripte effizient und zuverlässig funktionieren werden.
Kann mir jemand helfen wie ich diesen speziellen DIV anspreche?!
In diesem Kontext ist das div recht einfach bestimmbar, z.B. ist es das Element, dass auf das a-Element folgt. Bei einem Mouseover auf das a-Element suchst du ausgehend vom Event-Target über nextSibling den nächsten Elementknoten (nodeType == 1).
Spannend werden *alle anderen möglichen* Kontexte. Die werden wahrscheinlich dazu führen, dass obige Logik unzureichend ist. Dann musst du halt tricksen: Im div-Element nach a-Elementen mit .className == "sublevel" suchen und so weiter.
Mathias
-
Ja, am liebsten hätte ich das ganze system neu gemacht, aber an dem cms wurde schon soviel verschlimmer äh ergänzt, dass das nicht gewünscht ist.
Dieser HTML Code ist für jeglichen Javascript eingriff einfach schrecklich.Deine Idee mit dem Event-Target klingt gut, das werde ich mal versuchen.
Da die Stuktur sich nicht ändern wird, könnte das klappen.thx
-
-
onmouseover="this.style.display = 'block';"
onmouseout="this.style.display = 'none';"Das this mit dem entsprechenden Capture ersetzen, also getElementById oder getElementByName.
-
Sorry, den Teil mit dem CMS hab ich überlesen.
Eventuell über das Array getElementsByTagName, wenn die Containerzahlen bis zum gewünschten Element immer gleich sind.
-
hi,
onmouseover="this.style.display = 'block';"
onmouseout="this.style.display = 'none';"Interessant - du kannst mouseover auf etwas feststellen, was du zuvor komplett ausgeblendet hast?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Interessant - du kannst mouseover auf etwas feststellen, was du zuvor komplett ausgeblendet hast?
Nein, aber wie ich bereits eine Zeile weiter unten schreibe ist es als Platzhalter gedacht...
-
-
-
Hallo, ich nehme an, du möchtest beim rollOver des "What's new"-Links, dass der "Test"-Div erscheint, vice versa.
Ich würde dem "Test-Div" eine ID geben und ihn verstecken(display:none). Weiteres dem "What's New"-Link MouseListener (onMouseOver, onMouseOut), die die jeweilige Funktion aufrufen, zuordnen.
zB:
//Javascript
<script type="text/javascript">
function show(div_id){
var elm = document.getElementById(div_id);
if (elm) elm.style.display = 'block';
}
function hide(div_id){
var elm = document.getElementById(div_id);
if (elm) elm.style.display = 'none';
}
</script>//HTML
<a href="index.php?Itemid=34&option=com_content" class="mainlevel" onMouseOver="show('test_div');" onMouseOut="hide('test_div');" >What's New</a><!-- Dieses Div muss erscheinen und verschwinden -->
<div style="padding-left: 4px; display:none;">
<a href="index.php?Itemid=51&option=com_content" class="sublevel" id="test_div" >Test</a>
</div>-
Hallo,
Ich würde dem "Test-Div" eine ID geben und ihn verstecken(display:none). Weiteres dem "What's New"-Link MouseListener (onMouseOver, onMouseOut), die die jeweilige Funktion aufrufen, zuordnen.
Wenn er Zugriff auf das HTML hätte, wäre eine semantische HTML-Struktur angesagt sowie die Auslagerung der JavaScript-Logik - also möglichst keine Event-Handler-Attribute, überflüssige Klassen und IDs für jedes Untermenü. Das bläht den HTML-Code nur auf, macht unnötige Arbeit und bringt JavaScript-Logik dort unter, wo sie gar nicht hingehört.
Ein verschachteltes Menü lässt sich z.B. als verschachtelte ol-Elemente lösen. Ein Script von außen fügt dann automatisch die nötige Logik (Event-Handler) hinzu. Dafür gibt es zahlreiche Fertiglösungen, z.B. http://onlinetools.org/tools/dom-tree-menu-puredom/.
Mathias
-
Hallo,
Wenn er Zugriff auf das HTML hätte, wäre eine semantische HTML-Struktur angesagt sowie die Auslagerung der JavaScript-Logik - also möglichst keine Event-Handler-Attribute, überflüssige Klassen und IDs für jedes Untermenü. Das bläht den HTML-Code nur auf, macht unnötige Arbeit und bringt JavaScript-Logik dort unter, wo sie gar nicht hingehört.
Da gebe ich dir völlig recht. Wenn ich jedoch eine mehr oder weniger "triviale" Frage lese, wie in diesem Fall das Ein- und Ausblenden eines Div's, bin ich der Meinung, dass derjenige mit nodeTypes, Event-Target, usw. noch nichts angefangen hat.
...
dave-
Hallo,
Wenn ich jedoch eine mehr oder weniger "triviale" Frage lese, wie in diesem Fall das Ein- und Ausblenden eines Div's, bin ich der Meinung, dass derjenige mit nodeTypes, Event-Target, usw. noch nichts angefangen hat.
Ja, stimmt - dass es sich um ein möglicherweise komplexeres Menü handelt, bei dem sich eine Trennung lohnen wurde, war auch nur eine Mutmaßung von mir.
Mathias
-
-
-