Peter: dynamisches Positionieren von Layern

SELF-Forum

dynamisches Positionieren von Layern

Peter
– Informationen zu den Bewertungsregeln

Hallo Leute,

habe ein kleines Problem, ich möchte eine Seite mit Pull-Down-Menue erstellen. Dieses Pulldownmenue soll keine Texte sondern GIF's als links haben. Aus diesem Grund habe ich mich für Layer entschieden.
Mein Problem: das Menü soll immer Zentriert sein, also muss ich die Position des Layers rechnerisch anhand der Fensterbreite ermitteln(unten für NS). Die feste Breite meiner Tabelle für die "Grundbuttons" ist 750 pixel breit. Also rechne ich Fensterbreite-750pixel/2+Position des Layers ab Tabellenanfang 11pixel. Ich schreibe in meinem Fall über ein Funktion (left) per document.write den DIV Tag. Bei meinem Kenntnisstand würde ich jetzt für jedes Layer (in meinem Fall 5) solch eine Funktion erstellen. Doch was Passiert wenn der User einen re-size des Fensters macht ?? Natürlich nichts. Muss ich dann einen Reload der Seite machen ? Wenn ja wie mache ich diesen z.B. für den IE bei resize ? Oder gibt es insgesamt einen besseren, eleganteren Weg um dieses Problem zu lösen ???

Bin für jeden Tip dankbar.

Tschüß

Peter

function left(){

if (window.innerWidth<751) {
abstand=11;
} else {
abstand=(window.innerWidth-750)/2+11;
}

document.write('<div id="Layer1" style="position:absolute; left:');
document.write(abstand+"px; ");
document.write('top:42px; width:86px; height:81px; z-index:1; visibility: hidden; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000"> ');

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. dynamisches Positionieren von Layern

    Jens Menke
    – Informationen zu den Bewertungsregeln

    Hi

    du definierst einfach ne Funktion die onresize den
    Layer neu positioniert.

    Nachfolgend mal ein Code-Schnipsel wie ich das mal
    gemacht hatte :

    <---------------------------------------------------->
    function getObj(name) {
    if (NS && document.layers[name]) {return document.layers[name];}
    if (IE && document.all[name]) {return document.all[name].style;}
    return 0;
    }

    function setXPosition() {
      width = (IE) ?  document.body.clientWidth:window.innerWidth;
      menuLeft  = (IE) ? (document.body.clientWidth-document.all.navLayer.clientWidth) /2 : (window.innerWidth-document.navLayer.document.width) / 2;
      getObj('navLayer').left=menuLeft;
    }

    window.onresize=setXPosition;

    <---------------------------------------------------->

    Naja.. muste halt etwas auf deine Bedürfnisse noch
    umbauen aber ich hoffe als Idee reichts :)

    gruss
    Jens

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. dynamisches Positionieren von Layern

    holger kuehne
    – Informationen zu den Bewertungsregeln

    Hi
    Ich hab gerade als ich das ganze wegschicken wollte die Loesung von Jens gesehen. Ich werde dir einfach trotzdem diese loesung hier posten. Du kannst dann einfach auswaehlen was dir besser gefaellt....
    Ich hab das Problem auch schon mal gehabt, und hab es folgendermassen geloest:
    Alle layer schon ganz normal zwischen <body> und </body> definieren und die position left so angeben als ob die Breite kleiner 751 waere. Wenn du willst kannst du noch per visibility:hidden  alle layer unsichtbar machen. Dann wird deine Funktion left() so definiert, dass sie alle layer verschiebt (und eventuell wieder sichtbar macht) falls die Fensterbreite groesser als 751 ist. Diese Funktion wird dann onload im body tag aufgerufen.
    So aehnlich muesste das eigentlich funktionieren
    function left(){
    if (document.layers){
    if (window.innerWidth>751) {
    for (i=0;i<5;i++)
    document.layers[i].left+=(window.innerWidth-750)/2;
    }}
    else if (document.all) {
    if (document.body.clientWidth>751) {
    for (i=0;i<5;i++)
    document.all.tags("div")[i].style.left=document.all.tags("div")[i].style.left+(document.body.clientWidth-750)/2;
    }}
    }
    Damit das ganze beim Netscape nicht durch einen resize kaputt geht musst du noch die bekannte resize Funktion von gary smith anwenden:
    /**
      * resize.js 0.3 970811
      * by gary smith
      * js component for "reloading page onResize"
      */
    if(!window.saveInnerWidth)
    { window.onresize = resizeIt;
      window.saveInnerWidth = window.innerWidth;
      window.saveInnerHeight = window.innerHeight; }
    function resizeIt()
    { if (saveInnerWidth < window.innerWidth
      saveInnerWidth > window.innerWidth
      saveInnerHeight > window.innerHeight
      saveInnerHeight < window.innerHeight )
    { window.history.go(0); }}
    So ich hoffe das die erste Funktion auch so funktioniert wie du dir das denkst. Falls nicht oder falls noch Fragen da sind: einfach nochmal posten.
    Tschau Holger

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln