✔ Javascript: <div> ein- und ausblenden

R

roman_drechsel

Mitglied
Hi,

ich habe ein Menü bestehend aus mehreren <div>-Tags. Jetzt möchte ich, dass wenn ich mit der Maus über so einen Tag fahren, direkt links daneben ein anderer div-Bereich (mit weiteren Informationen, auch HTML-Tags usw.) aufgeht. Wenn ich mit der Maus wieder runter gehe soll er wieder verschwinden.
Das Ein- und Ausblenden ist kein Problem. Aber ich bekomme es nicht hin, den Bereich direkt links neben dem Haupt-div zu platzieren.
Eine absolute Positionierung mit top und left ist nicht möglich, da die Seite zentriert angezeigt wird und deshalb das Menü bei jeder Auflösung an einer anderen Position befindet. Es muss also eine relative Positionierung zum Menü stattfinden, nur leider funktioniert das bei mir nich so wie es soll :suspekt:
Ein weiteres Problem: es sollte möglichst auf allen gängigen Browsern laufen.

Ich hoffe ich habe mich verständlich ausgedrückt ;)
Kann mir jemand weiterhelfen?
 
Positioniere das <div> absolute und ermittle die nötigen Koordinaten, wenn es soweit ist, also wenn es angezeigt werden soll.
Das Ermitteln kann erfolgen nach dem Schema:
Code: 
oben=[objekt].offsetTop;
links=[objekt].offsetLeft+[objekt].offsetWidth
...wobei [objekt] für das Menu steht.
 
Moin!

Wenn Du ganz, ganz sicher gehen willst, dass Dein Skript in allen Browsern läuft, empfehle ich Die folgenden Funktionen. Ich habe Sie extrem vereinfacht gecodet, zum besseren Vertändniss. Jede einzelne Funktion gibt 0 zurück, wenn der Browser absolut nicht in der Lage ist, Koordinaten bzw. Größe eines Elementes zu ermitteln.

Zuerst eine Basisfunktion, die eine Referenz auf ein Objekt nach dem DOModell erzeugt - Basis alles Weiteren...
Code: 
function element_query(ref_object)
{
	if(!(typeof(ref_object) == "object"))
	{
		return (ref_object = document.getElementById(ref_object))? ref_object: 0;
	}

	return ref_object;
}

Breite...
Code: 
function element_width(ref_object)
{
	if(ref_object = element_query(ref_object))
	{
		if(ref_object.width)
		{
			return ref_object.width;
		}

		if(ref_object.offsetWidth)
		{
			return ref_object.offsetWidth;
		}
	}

	return 0;
}
Höhe...
Code: 
function element_height(ref_object)
{
	if(ref_object = element_query(ref_object))
	{
		if(ref_object.height)
		{
			return ref_object.height;
		}

		if(ref_object.offsetHeight)
		{
			return ref_object.offsetHeight;
		}
	}

	return 0;
}
Oben...
Code: 
function element_top(ref_object)
{
var	ret_val = 0;

	if(ref_object = element_query(ref_object))
	{
		while((typeof(ref_object) == "object") && (typeof(ref_object.tagName) != "undefined"))
		{
			ret_val += ref_object.offsetTop;

			if(!(ref_object = ref_object.offsetParent))
			{
				break;
			}
		}
	}

	return ret_val;
}
Links...
Code: 
function element_left(ref_object)
{
var	ret_val = 0;

	if((ref_object = element_query(ref_object)) && (ref_object.offsetLeft))
	{
		while((typeof(ref_object) == "object") && (typeof(ref_object.tagName) != "undefined"))
		{
			ret_val += ref_object.offsetLeft;

			if(!(ref_object = ref_object.offsetParent))
			{
				break;
			}
		}
	}

	return ret_val;
}

Ich verwende Diese Methoden in ähnlicher Form seit langer Zeit und bisher sind keine Probleme bekannt. Außerdem werden Javascript-Fehlermeldungen strikt gemieden.

HINWEIS: Die letzen beiden Funktionen ermitteln immer die Position relativ zum Fenster, nicht etwa zum Eltern-Objekt.

Gruß
Enum
 
Zuletzt bearbeitet:
Hi,

danke für die schnellen Antworten, aber ich kann mit den Funktionen nicht wirklich viel anfangen. Hab nicht viel Ahnung von JS.
Ich komme mit dem ref_object nich klar, wie genau soll ich die Funktionen in HTML nutzen?
 
Abend!

Ganz einfach: "ref_object" heisst soviel wie "referenziertes-objekt". Klingt kompliziert, ist aber ganz einfach. Du hast z.B. einen Div-Bereich...
Code: 
...
<div id="test">blabla</div>
...

Jetzt kannst Du alle relevanten Informationen über Position und Größe mit Hilfe der Funktionen erfragen:
Code: 
var linker_abstand = element_left("test);
var oberer_abstand = element_top("test);
var breite = element_width("test");
var hoehe = element_height("test);

Gaanz einfach, oder? Die Werte werden in die Variablen geschrieben, die Einheit ist "pixel".
Sollte der Browser sehr veraltet sein, erhälst Du immer den Wert "0".

Die erste Funktion dient lediglich dazu, den übergeben "ref_object" Wert in ein Objekt zu verwandeln, das mittels DOM referenziert wird. Aber das Braucht Dich eigentlich nicht zu interessieren - binde einfach den Code ein und nutze die Funktionen.

Gruß
Enumeratur
 
Zuletzt bearbeitet:
Hi,

also so richtig läuft das bei mir immernoch net... :/
Was mach ich nich falsch? Habs unter IE6.0 getestet und ich bekomm von allen Funktionen 0 zurückgegeben

Code: 
<script language='javascript'>
 
[...] Hier die Funktionen
 
element_query("bla");
var linker_abstand = element_left("bla");
var oberer_abstand = element_top("bla");
var breite = element_width("bla");
var hoehe = element_height("bla");
alert(linker_abstand+" - "+oberer_abstand+" - "+breite+" - "+hoehe);
</script>
 
<center>
<div id='bla' style='border:solid black 2px'>Hallo Hallo</div>
</center>
 
Abend!

Sorry, ich hatte einen Tippfehler im Quellcode.
Hab den obigen Beitrag geändert, kopier die Funktionen einfach noch einmal.

Ach ja, deinen Quellcode solltest Du auch ändern...
Code: 
<script language='javascript'>
 
[...] Hier die Funktionen
 
element_query("bla"); // SINNLOS/ÜBERFLÜSSIG  Die Funktion wird in den anderen aufgerufen ...

var linker_abstand = element_left("bla");
var oberer_abstand = element_top("bla");
var breite = element_width("bla");
var hoehe = element_height("bla");
alert(linker_abstand+" - "+oberer_abstand+" - "+breite+" - "+hoehe);
</script>
 
<center>
<div id='bla' style='border:solid black 2px'>Hallo Hallo</div>
</center>
 
N'Abend!

roman_drechsel hat gesagt.:
ich bekomm immernoch von allen Funktionen 0 zurückgegeben
Zum Vergrößern anklicken....

Also, ich habe die Funktionen erneut überprüft und getestet. Du musst Dich irgendwo vertan haben. Sie funktionieren definitiv in IE 5.5+, Opera 7+, Firefox 1+, Konqueror 3.2+, Netscape 8+ und höchstwahrscheinlich auch in anderen Browsern bzw. noch älteren Versionen. Doch in den eben ganannten auf jeden Fall! Kopier' sie einfach noch mal.

Ach ja, ich habe mit <div>'s und <span>-tags gestestet, außerdem mit <img> sowie diversen Fomularelementen und Tabellen. Egal ob ohne CSS oder mit Positionsangaben als "relative", "fixed", "absolute" ...

Keiner meiner Test-Browser verfügt über irgendwelche Add-Ons etc.

Gruß
Enum
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück