[Layer] Positie behouden schermresoluties en resizen

[Ruzor]

Ik heb me rot gezocht op google en got, maar ik kom er toch nog steeds niet uit.

Ik heb een layer op een bepaalde positie in het scherm. Ik wil deze layer graag op diezelfde positie behouden bij verschillende schermresoluties en als je het scherm resized. Die layer staat gepositioneerd op een bepaald plaatje, dus ik zou van de linkerkant van het plaatje kunnen rekenen. Het plaatje staat gecentreerd, dus als je het scherm kleiner maakt is de linkerkant korter.

Hoe doe ik dat, kan iemand mij dat duidelijk uitleggen?

Ik heb het al geprobeerd met percentages, relative, absolute positie, scripts, etc. maar het lukt nog steeds niet.

[creative8500]

Het kan met JavaScript, maar zo'n script slurpt CPU-tijd.

Weet je wat: zet het eens on-line, volgens mij begrijp ik je verkeerd. Is wat je wilt: een <div/> die je altijd precies in het midden van de viewport staat?

[ Voor 60% gewijzigd door creative8500 op 20-01-2004 20:10 ]

[Ruzor]

Nee, juist niet in het midden, dat had ik al gevonden.

Ik zal het proberen duidelijker en compleet uit te leggen:
- Ik heb een achtergrondplaatje (zeg maar pic1) op het beginscherm van mijn website.
- Dit plaatje (pic 1) gebruik ik als imagemap.
- Als je over een bepaald gebied van pic1 komt wordt er een layer (layer1) geopend op precies dezelfde plek.
- Deze layer (layer1) op zichzelf is ook weer een image map (pic2).
- Als je dan met de muis over een bepaald gebied van de pic2 komt dan wordt er een url geopend.

Dit werkt allemaal.

Het probleem is nu dat layer1 van positie verschuift als er wordt geresized en er een andere schermresolutie is. Dat is niet mooi natuurlijk, dus hoe behoud ik diezelfde positie?

Mijn idee is om elke keer (bij resizen, schermresolutie) te kijken op hoeveel afstand pic1 van de linkerkant van het scherm is en dan een vast aantal pixels erbij op te tellen. Op een of andere manier lukt mij dit niet.

[ Voor 14% gewijzigd door Ruzor op 20-01-2004 20:24 ]

[Verwijderd]

waarom zet je pic1 niet in ook een layer? (layer1 zeg maar)
en pic2 in een nieuwe layer2 met z-index 2?

[Ruzor]

Dat kan natuurlijk, maar mijn probleem blijft natuurlijk dan nog steeds...of weet je daar dan iets op?

[creative8500]

Als wij niet weten wat je nu hebt, kunnen we ook niet aanwijzen wat er anders moet.
Nogmaals: kun je het niet on-line zetten?

[Ruzor]

@creative8500:
Ik snap inderdaad dat dat makkelijker was geweest, maar de code is nogal lang en bevat veel (voor dit topic) onnodige delen.

Maar ik heb het opgelost, ik heb een script code gevonden die inderdaad bekijkt hoeveel een html element (in dit geval mijn plaatje, pic1) van de bovenkant en de linker kant af zit. Aan de hand daarvan kun je een functie (positionLayer)maken die je layer een bepaald aantal pixels van diezelfde bovenkant en linkerkant neerzet. Deze functie moet je ook aanroepen in de body onResize.

Hier is de code:

code:

<script language="JavaScript1.2" type="text/javascript">
function getRealLeft(el) {
    xPos = el.offsetLeft;
    tempEl = el.offsetParent;
    while (tempEl != null) {
        xPos += tempEl.offsetLeft;
        tempEl = tempEl.offsetParent;
    }
    return xPos;
}

function getRealTop(el) {
    yPos = el.offsetTop;
    tempEl = el.offsetParent;
    while (tempEl != null) {
        yPos += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }
    return yPos;
}

function getElement(id) {
    return document.all ? document.all(id) :
    document.getElementById ? document.getElementById(id) :
    document.layers ? document.layers[id] :
    null;
}

function positionLayer() {
    trueX = getRealLeft(getElement('Pic1'));
    trueY = getRealTop(getElement('Pic1'));
    /*alert(trueX);
    alert(trueY);*/

    document.getElementById('Layer1').style.left = trueX + aantal pixels van links;
    document.getElementById('Layer1').style.top = trueY + aantal pixels van boven;
}

positionLayer();
</script>

Let er trouwens wel op dat je de functie pas aanroept nadat je Layer1 hebt gedefinieerd!

[ Voor 11% gewijzigd door Ruzor op 20-01-2004 22:47 ]

[disjfa]

met javascript ff kijken naar scrolltop

met css zoeken:
CSS: Alternatief voor positioning: fixed

[Ruzor]

@disjfa:
Ik zie dat ik toch niet helemaal duidelijk was In ieder geval het is nu gelukt en ik hoop dat het nu (met het posten van het script) toch nog duidelijk is geworden.

In ieder geval bedankt voor de link!

[disjfa]

oow gecentreerd.... http://vmalek.murphy.cz/

_{het is officieel... ik volg het niet....}

[ Voor 39% gewijzigd door disjfa op 20-01-2004 22:58 ]

[Ruzor]

@disjfa
Nee, die ook niet, die had ik al gevonden