Promaetheus
Mitglied
Hallo liebe Forengemeinde!
Ich habe leider wieder ein Problem das ich selbst nicht zu lösen imstande bin. Ich habe eine Navigation mit untereinander angeordneten span-Elementen:
Menüpunkt 1 [x]
Menüpunkt 2 [x]
Menüpunkt 3 [x]
Menüpunkt 4 [x]
Ich wollte nun bewerkstelligen, dass, wenn man auf ein [x] klickt oder darüber hovert, RECHTS daneben ein DIV in einem übergeordneten Layer erscheint (damit es die Seite nicht verschiebt) in dem weiterer Text geschrieben steht.
Auf CSS habe ich bewusst verzichtet um die ganze Problematik mit Cross-Browser-Kompatibilität und meinem ewig währenden Krieg mit dem Internet Explorer aus dem Weg zu gehen.
Ich habe mich deshalb für eine JavaScript-Variante entschieden und folgende Funktion erstellt:
Aufgerufen wird das Ganze im HTML-Code wiefolgt:
Das Ganze funktioniert soweit auch ganz gut, nur wird dieses DIV immer in der nächsten Zeile am Anfang angezeigt anstatt hinter dem [x]. Auch habe ich das Problem dass, wenn ich auf das [x] eines anderen Punktes klicke, das obere InfoDIV offen bleibt und somit den Text verdeckt.
Wieder zu sehen auf http://www.rc-info.at/tcms/start/deutsch (Die untersten Menüpunkte).
Gibt es da vielleicht eine einfachere Lösung oder habe ich da einfach nur einen Denkfehler in meiner Überlegung? Ich wäre Euch für Tipps diesbezüglich wieder sehr dankbar!
Ich habe leider wieder ein Problem das ich selbst nicht zu lösen imstande bin. Ich habe eine Navigation mit untereinander angeordneten span-Elementen:
Menüpunkt 1 [x]
Menüpunkt 2 [x]
Menüpunkt 3 [x]
Menüpunkt 4 [x]
Ich wollte nun bewerkstelligen, dass, wenn man auf ein [x] klickt oder darüber hovert, RECHTS daneben ein DIV in einem übergeordneten Layer erscheint (damit es die Seite nicht verschiebt) in dem weiterer Text geschrieben steht.
Auf CSS habe ich bewusst verzichtet um die ganze Problematik mit Cross-Browser-Kompatibilität und meinem ewig währenden Krieg mit dem Internet Explorer aus dem Weg zu gehen.
Ich habe mich deshalb für eine JavaScript-Variante entschieden und folgende Funktion erstellt:
Code:
function expand(id){
if(document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}Aufgerufen wird das Ganze im HTML-Code wiefolgt:
HTML:
Menüpunkt 1 <font onclick="expand('ID_1')" style="cursor: pointer">[x]</font>
<div class="popUpInfo" style="width: 250px; padding: 5px; position: absolute; z-index: 2; display: none; cursor: pointer; " id="ID_1" onclick="expand('ID_1')">Der Infotext</div>Das Ganze funktioniert soweit auch ganz gut, nur wird dieses DIV immer in der nächsten Zeile am Anfang angezeigt anstatt hinter dem [x]. Auch habe ich das Problem dass, wenn ich auf das [x] eines anderen Punktes klicke, das obere InfoDIV offen bleibt und somit den Text verdeckt.
Wieder zu sehen auf http://www.rc-info.at/tcms/start/deutsch (Die untersten Menüpunkte).
Gibt es da vielleicht eine einfachere Lösung oder habe ich da einfach nur einen Denkfehler in meiner Überlegung? Ich wäre Euch für Tipps diesbezüglich wieder sehr dankbar!
Zuletzt bearbeitet:
