Toon posts:

[js] positie plaatje berekenen

Pagina: 1

Acties:

55 views sinds 30-01-2008
Reageer

donderdag 5 september 2002 17:24

Acties:

Dark Blue

Compositionista!

Alpenmeisje

Topicstarter

Hoewel ik dus totaal geen javascript kan ben ik er toch weer aan begonnen. Ik zoek de rampen gewoon op, zo lijkt het. Enfin.
Ik heb een pagina, simpel gezegd bestaat die uit 3 framerows. De bovenste is vast (145), de middelste variabel, de onderste vast (20).

In het middelste frame staat een plaatje, dat moet tegen de onderkant van dat frame aan zitten. Als ik nou de hoogte van dat frame wist, zou ik hem zo met een divje erin kunnen plakken. Maar helaas. Gelukkig is de hoogte van het plaatje wel vooraf bepaald: 80px hoog.

Nu wil ik middels een javascriptje dus de hoogte van het scherm berekenen;
daar de hoogte van beide frames vanaf halen - dan houd je de hoogte van het middelste frame over, anders gezegd; de onderrand van het frame. Als ik daar 80px vanaf trek, heb ik de positie van het plaatje.
Nu mijn wonderlijke code, het is wat uitgebreid geschreven om het voor mezelf begrijpelijk te houden:

code:

<script language="javascript">

var overig = 165;
var scherm = self.screen.availHeight ;
var plaatje = 80;

hoogte = scherm - overig;
positie = hoogte - plaatje;

</script>

Ik roep vervolgens de div weer aan met:

code:

    <script language="javascript">
    document.write('<div style="position: absolute; left: 0px; top: ',positie,'px;">');
    </script>
        [img]"gfx2/bhoek.gif"[/img]
    </div>

Hij rekent het redelijk goed uit: de self.screen.availHeight wordt 740 (ik weet niet of dat goed is maar enfin) en van 'positie' maakt hij 495.
Dat klopt dus nog steeds niet.

Ik zou ook graag, ipv. dat ik er nu 165 aftrek, de hoogtes van het bovenframe en het onderframe uitrekenen (ivm. Netscape die er andere maten van maakt) en dát van de maximale hoogte aftrekken. Hoe doe ik dat?

Ik weet bovendien niet of self.screen.availHeight de goede manier is om hem aan te roepen, ik heb het gevonden op http://www.xs4all.nl/~ppk/js/winprop.html
...

Kan iemand me helpen met het bovenstaande?

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

donderdag 5 september 2002 17:36

Acties:

Verwijderd

PHP:

<img style="position:fixed; bottom:0px;" width="80" height="80">
<!-- scrollt mee -->

<img style="position:absolute; bottom:0px;" width="80" height="80">
<!-- scrollt niet mee -->

Should do the trick voor moderne browsers.

Voor andere moet je waarschijnlijk met JS en scrollOffsets enzo aan de slag. Ik zal kijken of ik daar iets voor heb liggen.

donderdag 5 september 2002 18:02

Acties:

Dark Blue

Compositionista!

Alpenmeisje

Topicstarter

Dat van position:fixed heb ik zojuist gebruikt, maar het werkt zowel voor IE als voor NS4.x niet?
Ik had ook eerst position: absolute aangegeven en dan met bottom zo, maar dat wil weer niet in Netscape 4.x.

Nog even een duidelijkheid:
De pagina scrollt niet.

Er staat een achtergrond, en een plaatje in, maar het is gewoon een zijrand.
Zie ook http://www.mediawebhosting.nl --> linker zij-frame.
Ik heb het indertijd opgelost met een tabel die 100% hoog is, maar dat is gewoon een ronduit slordige oplossing vind ik, en niet cross-browser.

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

vrijdag 6 september 2002 03:03

Acties:

Morrar

Weet niet of ik het helemaal goed door heb, ben vandaag in een luie bui maar voor zover ik je verhaal kon snappen hier enkele suggesties:

als het image op de background mag staan en je NS4 ff laat zitten:

body
{background-image: url("blaat.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}

Als het echt een plaatje moet zijn vrees ik idd dat er Javascript aan te pas komt...

<html>
<head>
<script language="Javascript">
function GetWindowInnerWidth()
{ if(self.innerWidth;)
return self.innerWidth;
else
return document.body.clientWidth;
return -1;
}

function GetWindowInnerHeight()
{ if(self.innerHeight)
return self.innerHeight;
else
return document.body.clientHeight;
return -1;
}

//Im setup, onload doen
function PosImg()
{

if(document.layers)
{
theLayer = document.layers["ImLayerNN4"];
theLayer.left = GetWindowInnerWidth() - 80;
theLayer.top = GetWindowInnerHeight() - 80;
}
else
{
if(document.all)
theLayer = document.all["ImLayer"];
else if(document.getElementById)
theLayer = document.getElementById("ImLayer");

theLayer.style.left = (GetWindowInnerWidth() - 80) + "px";
theLayer.style.top = (GetWindowInnerHeight() - 80) + "px";
}

}
</script>
</head>
<body onload="PosImg();">
<layer name="ImLayerNN4" position="absolute" left="0" top="0" width="80" height="80" z-index="1" visisbility="show">
<div id="ImLayer" style="position: absolute; left: 0px; top: 0px; width: 80px; height: 80px; padding: 0px; z-index: 1; visibility: visible;">
[img]"blaat.gif"[/img]
</div></layer>
</body>
</html>

Sorry dat de code een beetje brak is, maar het wordt laat. Hoop dat het wel werkt of dat je er zelf uit kunt komen zo. Het geheel enigszins netter maken is mayb ook geen slecht idee

PS dit geheel moet dus in het middenframe zoals je denk ik ook al begreep...

vrijdag 6 september 2002 03:10

Acties:

Morrar

Ok, ik ben een %#%@ zat dus te slapen:

if(self.innerWidth;)

die ; moet weg anders krijg je een errortje, verder werkt het in IE in ieder geval...

Wat je wel moet doen is die newlines weghalen tussen de <layer><div><img></div></layer> tags, anders krijg je een beetje ruimte onder het plaatje en dus een scrollbar....

vrijdag 6 september 2002 12:10

Acties:

Verwijderd

Volgens mij kun je bij een document.write niet zomaar i.p.v. een getal een variabele opgeven. Zul je wel moeten scheiden met '+' teken. In jouw geval moet je ',' vervangen door '+'. En ik zou de IMG ook gewoon meenemen in de document.write.

code:

1	document.write('<div style="position: absolute; left: 0px; top: '+positie+'px;">');

Pagina: 1

Reageer