[JS] hoogte paginainhoud uitlezen

[Dark Blue]

Ik heb gegoogled, gezocht, een Papa Eend erbij gehaald, maar ik kom er niet uit.
De situatie is zo:

Ik heb een pagina in een frame, waar soms wel een scrollbar in staat, en soms niet. If not, dan moet er een klein horizontaal streepje onderaan komen te staan, if so, dan vult de scrollbar dat plekje op. Dit is een stukje van de pagina:

Je ziet nu een klein oranje streepje staan. Het hoort eigenlijk blauw te zijn, zodat het aansluit bij het streepje er rechts van (de omlijning van de pagina).
Zodra er een scrollbar komt, moet dit streepje verdwijnen:


_{Ik weet dat hier een hoog 'alleen voor IE en 16px brede scrollbar' gehalte aan zit, maar dat laat ik even buiten beschouwing.}

Het frame is 116px hoog en naar ik meen 425 px breed, waar het streepje moet komen staat in de div hier onder.

Nu heb ik dus deze code:

code:

<script language="JavaScript">
function loadLine()
{
<!--
alert (document.body.offsetHeight);
if (document.body.offsetHeight < 311)
    {
    document.getElementById('streepje').style.visibility = 'visible';
    }
//-->
}
</script>

...die onload aangeroepen wordt...
en dan in de pagina deze:

code:

<div 
id="streepje" 
style="visibility:hidden; 
position: absolute; 
left: 409px; 
top: 309px;">
[img]"gfx/orangedot.gif"[/img]
</div>

Ik heb deze bovenstaande code even afgebroken, anders vernachelde het de layout zo.

Problemo a momento: document.body.offsetHeight geeft altijd 310 terug, ook al vul ik mijn body op met allerhande <br>'s. Ik weet niet wat ik anders zou kunnen gebruiken om de hoogte van mijn pagina inhoud uit te lezen, jullie wel?

[crisp]

document.body.scrollHeight

[Dark Blue]

Woei, 2 meter post, 1 regel reply en het werkt nog ook

maar nu het volgende probleem:
op deze manier maakt hij de layer wel hidden, maar hij stemt zn scrollbars er nog steeds op af. Ik krijg dus een horizontale én een verticale scrollbar, terwijl ik alleen een verticale hoor te krijgen!

Nu heb ik dus de code aangepast:

code:

<script language="JavaScript">
<!--
if (document.body.scrollHeight < 311)
    {
    document.write('<div style="position: absolute; left: 409px; top: 309px;">[img]"gfx/orangedot.gif"[/img]</div>');
    }
//-->
</script>

En deze dus in de body gezet... maar ik blijf die horizontale scrollbar krijgen. Waarom?

[crisp]

Dark Blue schreef op 23 februari 2003 @ 22:01:
Woei, 2 meter post, 1 regel reply en het werkt nog ook

maar nu het volgende probleem:
op deze manier maakt hij de layer wel hidden, maar hij stemt zn scrollbars er nog steeds op af. Ik krijg dus een horizontale én een verticale scrollbar, terwijl ik alleen een verticale hoor te krijgen!

Nu heb ik dus de code aangepast:

code:

knip

En deze dus in de body gezet... maar ik blijf die horizontale scrollbar krijgen. Waarom?

Dat gaat dus niet werken, zolang de pagina nog opgebouwd wordt kan je de hoogte ervan natuurlijk niet uitlezen.
Probeer in plaats van de layer te hiden, de display property eens op none te zetten. Als alternatief zou je ook nog de overflow property van je body op hidden kunnen zetten als je geen scrollbars nodig hebt.

[Dark Blue]

Goed, nu heb ik hem dus weer terugveranderd van dat document.write naar dat stukje met getElementByID (nooit gedacht dat ik dat nog eens neer zou krabbelen...)

Dan wordt het dus dit?

code:

document.getElementById('streepje').style.display= 'none';

[crisp]

Dark Blue schreef op 23 February 2003 @ 22:08:
Goed, nu heb ik hem dus weer terugveranderd van dat document.write naar dat stukje met getElementByID (nooit gedacht dat ik dat nog eens neer zou krabbelen...)

Dan wordt het dus dit?

code:

document.getElementById('streepje').style.display= 'none';

yep, werkt dat wel?

[Dark Blue]

mmmnee. Hij geeft me nog steeds een horizontale en verticale scrollbar



Ik heb dus nu die code in de head staan; mag ik hem daar laten staan, maar tóch een document.write neerzetten? Dan schrijft hij in principe al terwijl hij nog bezig is de head sectie door te ploegen, en ik neem aan dat hij pas in de body mag 'writen' ...? of maakt dat voor javascript niet uit?

anders zou ik gewoon kunnen zeggen;
als er geen scrollbar is: pleur een divje neer op left 409 px.
als er wel een scrollbar is: pleur er een divje neer op left: 393 px. ...

[crisp]

Ik zou beginnen met het divje neerzetten op left: 393px, en dan onload een functie aanroepen die zoiets doet:

JavaScript:

function init() {

  if (document.body.scrollHeight < 311) {

    document.getElementById('divje').style.left = '409px';

  }

}

als je dan nog scrollbars krijgt kan je er desnoods nog

JavaScript:

document.body.style.overflow = 'hidden';

aan toevoegen

[ Voor 25% gewijzigd door crisp op 23-02-2003 22:20 ]

[Dark Blue]

Om het divje vóór het scriptje naar zn plek te schoppen, zal ik hem als css bovenin moeten zetten... even proberen.

[Dark Blue]

En het is gelukt!

code:

<style type="text/css"><!--

#streepje   {
position: absolute;
left: 393px;
top: 309px;
visibility: hidden;
                }
//--></style>
<script language="JavaScript">
function loadLine()
{
<!--
if (document.body.scrollHeight < 311)
    {
    document.getElementById('streepje').style.left = '409px';
    document.getElementById('streepje').style.visibility = 'visible';
    }
//-->
}
</script>

En de functie wordt dus onLoad aangeroepen.
Het resulteert in dit:

http://www.cursist.eduvision.nl/~haulrichedu/

Je hoeft de site niet te bekijken, het is gewoon heel simpel: scrollbar, dan geen streepje, geen scrollbar, dan een klein streepje om het vlak op te vullen.

Crisp bedankt!!!

[Pelle]

Ben ik de enige die denkt dat dit gewoon een heel omslachtige oplossing is? Dit zijn echt zaken waar je op een veel makkelijkere manier omheen had kunnen werken, puur en alleen door je site anders op te zetten.

[1st_Ro]

Pelle, nee je bent niet de enige

Ik kan me nog zoiets leuks herinneren in CSS als : overflow:auto
Werkt prima bij mij in ieder geval...

[ Voor 62% gewijzigd door 1st_Ro op 24-02-2003 08:15 ]