[Javascript]Muistrail, probleem na scrollen mainframe..

[Verwijderd]

Goede middag,

Ik heb een webpagina die opgedeeld is in 3 frames,
met een cursor die gevolgt wordt door een slinger.

Het was wat moeite om de slinger werkend te krijgen over de 3 frames, maar uit eindelijk is dit toch gelukt.

Nu heeft het volgende probleem zich voorgedaan:

Wanneer ik in de mainframe naar beneden scroll werkt het niet meer goed.

Dit is mijn code:

Knip

de functie window resize word aangeroepen in alle body's van de html pagina's. en op het moment dat er een window geresized wordt.

Een voorbeeld van deze pagina is te zien op:

Knip op verzoek


Als iemand mij kan helpen, graag!

Bij voorbaat dank,

Nick

[ Voor 79% gewijzigd door André op 30-10-2006 14:56 ]

[André]

Ik heb even de overbodige code weggehaald. Je knipt en plakt ergens een script weg en nu moeten wij dat gaan fixen? Het is de bedoeling dat je dat zelf probeert alvorens je een vraag stelt.

Daarbij maakt het script gebruik van dermate oude syntax dat ik op zoek zou gaan naar een nieuwere. Ook het lozen van de frames kan je daarbij erg helpen.

[storeman]

Zoals Andre al zegt, stop met frames, deze zijn zo oud, die waren hip in der beginne van het Internet.

Voor je javascript is een no-frames pagina ook veel fijner. Ga gewoon met DIV-jes werken en gooi daar met bijvoorbeeld javascript dynamische content in....

[Verwijderd]

dank je voor jullie reactie,

Ik zit op dit moment op stage en moet dit maken voor de website van de directeur. [ mijn baas ]

Aangezien hij het zo wilt hebben, kan ik niet zeggen: nou dan doe je het toch zonder frames.

dan was het inderdaad zo dat het meteen zou werken.

Deze code is volledig zelf geprogrammeerd van het begin tot eind, nadat ik een week op internet heb gezocht naar een dergelijk probleem. en niet te hebben gevonden, ben ik zelf aan de slag gegaan vanaf 0 code.

En ja, ik ben inmiddels al 3 weken, 9 uur per dag met dit probleem bezig. en het lukt me niet. ik heb het dus al echt zelf geprobeerd. kan iemand het alsjeblieft proberen werkend te krijgen met frames.

bvd,

Nick

[André]

Waar gaat het fout dan?

[Verwijderd]

wanneer je in de mainframe naar beneden scrollt, en je gaat over naar het linker frame.. dan komt voor heel eventjes de volgende blokjes, de afstand die je naar beneden ben gescrollt, boven het voorste blokje.

bvd,

Nick

[André]

Trek dan de gescrollde hoogte er van af?

[Verwijderd]

Heb ik al geprobeert, dan werkt het wel goed. maar komen alle blokjes onder elkaar te staan..

aangezien elk blokje de positie van het volgende blokje krijgt. het gebeurt dus zo dat nu elk blokje de positie van het volgende blokje krijgt ( + de correctie van scrollen ) en dan komen ze dus onder elkaar te staan.

overig is dit probleem er alleen bij de overstap naar een ander frame.

Zonder het overstappen naar een ander frame. werkt alles wel goed.

Bvd,

Nick

[ Voor 20% gewijzigd door Verwijderd op 30-10-2006 14:17 ]

[André]

Ik heb het originele adres weggehaald op verzoek, alleen ik ga niet de totale code opnieuw er in plakken. Het gaat alleen om de relevante code, en die kun je hieronder ook wel kwijt

[Verwijderd]

Naar mijn idee is alles relevant, omdat het er juist omgaat dat er gewerkt wordt met frames. hierdoor ontstaat de fout en daardoor post ik deze code ook mee.

Dit is de code:

code:

//aanmaken availframes array
availFrames = new Array ();
availFrames[0] = Array ("topframe", 0, 0, 0, 0); //naam,breedte,hoogte,correctie X,correctie Y
availFrames[1] = Array ("leftframe", 0, 0, 0, 0);
availFrames[2] = Array ("mainframe", 0, 0, 0, 0);

//variable waarin de naam word vastgelegd van de frame waar nu in gewerkt wordt
var currentFrame = this.name;
var activeFrame = this.name;

function windowResize () {
    for (h=0; h<availFrames.length; h++) {
        availFrames[h][1] = parent.document.all(availFrames[h][0]).Width;
        availFrames[h][2] = parent.document.all(availFrames[h][0]).Height;
    }
    
    switch (currentFrame) {
        case availFrames[0][0]: //wanneer we in frame topframe zitten
            availFrames[1][4] = -availFrames[0][2]; //leftframe correctie Y = leftframe hoogte - topframe hoogte
            availFrames[2][3] = -availFrames[1][1]; //mainframe correctie X = mainframe breedte - leftframe breedte
            availFrames[2][4] = -availFrames[0][2]; //mainframe correctie Y = mainframe hoogte - topframe hoogte
        break;
        case availFrames[1][0]: //wanneer we in frame leftframe zitten
            availFrames[0][4] = availFrames[0][2]; //topframe correctie Y = topframe hoogte
            availFrames[2][3] = -availFrames[1][1]; //mainframe correctie X = mainframe brredte - leftframe breedte
        break;
        case availFrames[2][0]: //wanneer we in frame mainframe zitten
            availFrames[0][3] = availFrames[1][1]; //topframe correctie X = leftframe breedte
            availFrames[0][4] = availFrames[0][2]; //topframe correctie Y =  topframe hoogte
            availFrames[1][3] = availFrames[1][1]; //leftframe correctie X = leftframe breedte
        break;
    }
}







//------------------------------------------ Frames hierboven --------------------------------------------------
//------------------------------------------  Nu volgt Balls  --------------------------------------------------




//--------- Aanmaken van ballen -----------

images=new Array ("ball.bmp",40,40,"ball.bmp",40,40,"ball.bmp",40,40,"ball.bmp",40,40,"ball.bmp",40,40,"ball.bmp",40,40,"ball.bmp",40,40,"ball.bmp",40,40,"ball.bmp",40,40,"ball.bmp",40,40);
nob=parseInt (images.length/3); // number of balls

for (h=0; h < nob; h++){
    // Naam ster, begin positie X, begin positie Y, breedte, hoogte, definitie image HTML code
    createBall ("ball"+h, -200, -200, images[(h*3+1)], images[(h*3+2)], "<img src='"+images[h*3]+"' width="+images[(h*3+1)]+" height="+images[(h*3+2)]+" border=0>");
}

function createBall (N, Xp, Yp, W, H, Img){ //div id, xpos, ypos, width, height, img
    with (document){
        write("<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+";'>");
        write(Img); // afbeelding ster wordt neergezet
        write("</div>"); // einde layer/div
    }
}

//---------- einde aanmaken ballen -----------

B = document.all;


function followmouse () {

    correctTop = parent.frames(availFrames[2][0]).document.body.scrollTop;
    
    xpos = event.clientX;
    ypos = event.clientY;


    

        parent.frames(availFrames[2][0]).B["ball" + (nob-1)].style.left = xpos + availFrames[2][3];
        parent.frames(availFrames[2][0]).B["ball" + (nob-1)].style.top = ypos + availFrames[2][4] + correctTop;
        parent.frames(availFrames[1][0]).B["ball" + (nob-1)].style.left = xpos + availFrames[1][3];
        parent.frames(availFrames[1][0]).B["ball" + (nob-1)].style.top = ypos + availFrames[1][4];
        parent.frames(availFrames[0][0]).B["ball" + (nob-1)].style.left = xpos + availFrames[0][3];
        parent.frames(availFrames[0][0]).B["ball" + (nob-1)].style.top = ypos + availFrames[0][4];
        

    
    
    for (i=0;i<(nob-1);i++){
        xposi = parseInt(B["ball"+(i+1)].style.left);
        yposi = parseInt(B["ball"+(i+1)].style.top);
        correctTop = parent.frames(availFrames[2][0]).document.body.scrollTop;
        parent.frames(availFrames[2][0]).B["ball" + i].style.left = xposi + availFrames[2][3];
        parent.frames(availFrames[2][0]).B["ball" + i].style.top = yposi + availFrames[2][4];
        parent.frames(availFrames[1][0]).B["ball" + i].style.left = xposi + availFrames[1][3];
        parent.frames(availFrames[1][0]).B["ball" + i].style.top = yposi + availFrames[1][4];
        parent.frames(availFrames[0][0]).B["ball" + i].style.left = xposi + availFrames[0][3];
        parent.frames(availFrames[0][0]).B["ball" + i].style.top = yposi + availFrames[0][4];
    }   
    
}

setTimeout ('document.onmousemove = followmouse ', 500);