#1 outerHeight wie anwenden? von toggodamian 20.06.2011 13:16

avatar

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!

#2 RE: outerHeight wie anwenden? von florian-zier 20.06.2011 20:38

avatar

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.

#3 RE: outerHeight wie anwenden? von toggodamian 20.06.2011 21:31

avatar

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.

#4 RE: outerHeight wie anwenden? von toggodamian 21.06.2011 12:36

avatar

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

#5 RE: outerHeight wie anwenden? von florian-zier 22.06.2011 15:04

avatar

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.

#6 RE: outerHeight wie anwenden? von toggodamian 23.06.2011 17:32

avatar

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

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz