[JS] IE loopt soms vast bij een resize script

[Michali]

Voor een website moet een bepaalde blok opgerekt worden tot onder aan de rand van het vester. Dit lukt allemaal erg goed, alleen zit ik met het probleem dat IE soms gewoon hierop vast loopt.

Ik heb te maken met 2 blokken, de top balk en het content blok. Het content blok moet dus opgerekt worden. Dat doe ik door eerst de hoogte van het document/body op te vragen, en dan van die waarde de hoogte van het top blok en de top en bottom padding van het content blok af te trekken. Als ik die waarde dan toe ken aan de height van het content blok, dan rekt hij perfect op.

Het probleem waar ik het over had krijg ik als het content blok toch net enkele pixels buiten beeld valt na de resize. Dit gebeurt niet als ik het venster kleiner schaal zodat de onderkant van het venster sowieso over het content gedeelte valt, maar alleen als het groter is dan het minimum en zo geresized wordt dat het buiten het beeld valt. Dit gebeurt soms als ik de constante waarmee ik aangeef hoe hoog het top blok is een verkeerde waarde geeft, maar ook soms als het allemaal wel klopt, dan loopt hij na het browser door enkele pagina's gewoon ineens vast.

Iemand die dit probleem ook heeft gehad en weet hoe het op te lossen is?

[BtM909]

En hoe gaan we je probleem kunnen bekijken zonder 1 character code?

[Verwijderd]

Ik voel de hogere machten van een endless loop

[Michali]

Een duidelijke beschrijving leek me in dit geval waardevoller dan een stuk code. Die werkt gewoon namelijk. Maar als dat helpt zet ik het er wel even bij.

JavaScript:

var NAVIGATOR_IS_IE = navigator.appName == "Microsoft Internet Explorer";

var BODY_ELEMENT_ID = 'body';

var BODY_HEIGHT; // will be determined at runtime
var BODY_VERTICAL_PADDING = 50; // pixels

function getBodyElement()
{
    return document.getElementById(BODY_ELEMENT_ID);
}

function init()
{
    BODY_HEIGHT = getBodyElement().clientHeight - BODY_VERTICAL_PADDING;
    window.onresize = resize;
    resize();
}

function getDocHeight()
{
    return NAVIGATOR_IS_IE ? document.body.clientHeight : document.documentElement.clientHeight;
}

function resize()
{
    getBodyElement().style.height = "0px";
    getBodyElement().style.height = getNewBodyHeight() + "px";
}

function getNewBodyHeight()
{
    var height = getDocHeight();
    var newHeight = ( height - TOP_HEIGHT ) - BODY_VERTICAL_PADDING;
    return newHeight < BODY_HEIGHT ? BODY_HEIGHT : newHeight;
}

Hier is de betreffende code. Body verwijst hier overigens naar een div element in de pagina met body als ID. TOP_HEIGHT komt uit het HTML document zelf. Die is op verschillende pagina's namelijk anders.

Verwijderd schreef op vrijdag 15 juli 2005 @ 16:59:
Ik voel de hogere machten van een endless loop

Het is 99% zeker dat het een endless loop is ja. Ik vermoed sterk dat IE het resize event nog een keer triggered als het element buiten het venster valt. Bij die resize valt hij dan weer buiten het venster en dan wordt de resize nog een keer getriggered etc. Mischien kan ik dit achterhalen door even een alert() in het resize event te stoppen.

[ Voor 102% gewijzigd door Michali op 15-07-2005 17:20 ]