Funktionen & Template » outerHeight wie anwenden?

Florians Forum � Webmaster � Xobor (Homepagemodules & Dynamicboard) � Funktionen & Template � outerHeight wie anwenden?

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | outerHeight wie anwenden? datum

20.06.2011 13:16

Hallo Florian,
Sorry wen es vielleicht nicht der richtige Betreff dafür ist.
Ich wollte div-Elemente mit hilfe von outerHeight positionieren können so wie die Unter-Navigationen in der Forums-Navigation.
Wie kann ich das mit JavaScript am besten realisieren?
Vielen Dank schonmal im vorraus!

Antworten

#2 | RE: outerHeight wie anwenden? datum

20.06.2011 20:38

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo toggodamian,
bei der Navigation sehe ich folgende Funktion die aufgerufen wird:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
function togSub(element,link) {
	try {
		var timer;
		var pagewidth = document.getElementById('pagewidth').offsetWidth;
		var navheight = document.getElementById(element).offsetHeight;
		var listleft = document.getElementById(element).offsetLeft;
		var allEl = document.getElementById(element).getElementsByTagName("ul");
		var el = document.getElementById(element);
		if (allEl.length > 0) {
			var actEl = allEl[0];
			if (actEl.className=='nav_open') {
				actEl.className='nav_close'; el.onclick = "window.location='"+link+"'; return false;";
			}
			else {
				actEl.className='nav_open';
				el.onclick = "";
				var actElWidth = actEl.offsetWidth;
				var topstring = parseInt(navheight)+'px';
				actEl.style.top = topstring;
				actEl.style.zIndex = '99999';
				if (listleft + actElWidth >= pagewidth) {
					actEl.style.right = '-1px';
				}
				else {
					actEl.style.left = '-1px';
				}
			}
		}
	}
	catch(err) {}
}
 

Meintest du wirklich outerHeight oder doch vielleicht eher offsetHeight?
Kannst du ansonsten vielleicht dein Vorhaben noch etwas genauer erl�utern oder ein Beispielskript (/-Seite) posten? (Benutze selbst allenfalls das GAIA-Template zum Testen)

Ansonsten hilft dir vielleicht auch die Anleitung f�r Tooltips weiter.
Der Style positioniert die Elemente absolut und das Skript setzt beim Einblenden (�berfahren eines anderen SPANs) die genaue Position des Elementes (hier liefert das Event die Mausposition).

Was du dir aber auf jeden Fall mal anschauen solltest, ist die CSS-Referenz von Position (Beachte auch die Beispiele f�r relative und absolute).
Ich denke, dass du alleine damit dein Vorhaben umsetzen kannst.
Setze einfach die Elemente, sagen wir mal Unternavigation, innerhalb das �bergeordnete DIV.
Mit den CSS-Angaben position:relative sowie top und left kannst du die Unternavigation dann um die festgelegte H�he (z.B. 20px) des �bergeordneten DIVs nach unten setzen, so erscheinen die Unterelemente einfach darunter.

Auch mittels position:absolute w�re eine Positionierung denkbar, dann muss wohl aber das �bergeordnete DIV die Angabe position:relative enthalten, ohne dort unbedingt top und left anzugeben.
Das liegt daran, dass ein absolut positioniertes Element vom �bergeordneten Element ausgeht, wenn dieses selbst positioniert wurde.
Ohne top und left wirkt sich die relative Positionierung des �bergeordneten Elementes nicht auf das Design aus.
Das untergeordnete absolute Element ver�ndert hingegen seine Position erst durch diese Angaben.

Ich w�rde nach derzeitigem Verst�ndnis die Variante mit position:relative vorschlagen.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#3 | RE: outerHeight wie anwenden? datum

20.06.2011 21:31

Naja eine Beispiel-Seite habe ich irgendwie nicht gefunden wie ich es meine ich weiß aber das es gibt.
Ist eigentlich egal ob es outerHeight ist oder offsetHeight.
Auf jedenfall habe ich ein Desgin gebastelt und es gibt eine Navigation die oben besteht. Oben ist auch wie hier nur oben das Usermenü eingetragen dies hat ein Fenster das gerade jetzt die Positionierung mit Top enthält. Sobald ich die Schrift größe änder muss ich es auch mit der Positionierung ändern ist zwar kein großer umweg nur ich habe noch anderes mit dem ich es Positionieren muss eins davon ist noch in Beiträgen sobald sich dort die Symbol-Bar ändert ändert sich auch hier die Positionierung. Ich würde es mit JS einfach finden. Nur da für mich noch die JS welt neu ist weiß ich jetzt nicht genau wie ich es z.B. von der Navigation das Script auseinander nehme.

Antworten

#4 | RE: outerHeight wie anwenden? datum

21.06.2011 12:36

Hallo Florian,
Aus irgendeinem grund verschieben sich die Div elemente auch wen ich die Schrfitgröße ändere mit.
Früher war das nicht so und musste es mit Top positionieren heute habe ich mal probeweiße die Top-Positionierung entfern und sehe da es klappt
Ich möchte es dir nicht vorenthalten und zeige dir mal was ich so mache: http://513283.homepagemodules.de/
Da wo jetzt der Mini-Login steht steht auch der Usermenu.
Das ist sowas wie du jetzt auf "Suche Erweitern" klickst dort erscheint ein Fenster und so ähnlich sieht auch das Usermenu aus.
Passt nun komischerweiße auch ohne Top weil früher es mir nach ganz oben gelegt hat.
Sorry das ich dir den Kopf verdreht hatte hatte das wirklich gar nicht geahnt das das nun Funktioniert
Vielen Dank dir shon mal das du mir helfen wolltest

Antworten

#5 | RE: outerHeight wie anwenden? datum

22.06.2011 15:04

Hallo toggodamian,
freut mich, dass es nun doch noch so auf die Schnelle funktioniert hat.
Aber so ist es eben, manchmal kann man stundenlang �ber etwas gr�beln, bis einem dann zuf�llig die L�sung erscheint.
Auch Kompliment an das Design, ist dir wirklich gut gelungen.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#6 | RE: outerHeight wie anwenden? datum

23.06.2011 17:32

Hallo Florian,
Jetzt fällt mir natürlich wieder ein wo ich es gesehen hatte. Das ist im Business Template so gemacht mit dem Script und deswegen weiß ich auch das das geht ist zwar etwas spät die Info aber besser als gar nichts.
Ja, das ist wirklich so bei mir und ich wollte schon hier mit Scripten kommen und was weiß ich was.
Jetzt weiß ich aber auch wieso ich den Abstand damit er mir nicht auf die Obere Navigation kommt gemacht habe ohne Top das liegt mit großer warscheinlichkeit an der Tabelle oder an padding und/oder margin aber ich vermute jedoch es macht die Tabelle.
Danke, man versuche das beste zu schnipseln auch wen ich nicht wirklicher einer bin der gut Programmieren kann ich schnipsel es einfach zusammen und das kommt dabei raus.
Ansonsten hoffe ich doch das ich hier nicht im Falschen bereich bin (Ansonsten gerne Verschieben) und das ich dir keine großen Probleme gemacht habe den das mit der Positionierung hatte ich wirklich nicht gedacht das das selber gemacht wird. Auf jedenfall bedanke ich mich noch an die Hilfreichen Tipps
Mfg,
Damian

Antworten

Spoiler mit Cookies � � "Bei User bedanken"-Button

�hnliche Themen

Antworten

Letzter Beitrag

Fenster bei geringer Breite Rechts nach Links schieben
Erstellt im Forum Homepage & Anderes von toggodamian 1 16.01.2013 23:26
florian-zier • Zugriffe: 727
"Für Beitrag bedanken"-Button (next Generation)
Erstellt im Forum Funktionen & Template von florian-zier 41 26.07.2015 17:39
DJ-Frechdax • Zugriffe: 3765
Shoutbox ohne externen Anbieter
Erstellt im Forum Homepage & Anderes von florian-zier 26 18.08.2015 23:10
florian-zier • Zugriffe: 4917
Radware: Aktuelle DoS-Lücke in Firefox 3
Erstellt im Forum News von Emanuel 1 07.08.2008 13:34
florian-zier • Zugriffe: 736

Bitte geben Sie einen Grund f�r die Verwarnung an