fout in javascript met bewegen layer

Status
Niet open voor verdere reacties.
H

hvandervoort

Nieuwe gebruiker
Lid geworden
16 jan 2007
Berichten
3
Hallo,

Ik heb gebrobeerd 4 layers te laten bewegen in een layer. Ik wilde layer 1 van boven naar beneden laten bewegen, layer 2 erachteraan etc.. Ik heb de javascript zelf geschreven .De pagina werkt niet, maar ik denk wel dat ik aardig in de richting zit.

Ik hoop dat iemand mij kan helpen ermee!


En de tekst ik ook handig ebij::eek:
PHP: 
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
background-color:#000000;
}
#bar{
height:600px;
width:300px;
background-color:#0000FF;
position:relative;
top: 10px;
}
#laad1 {
	width:300px;
	height:600px;
	position:absolute;
	top:-610;
	}
#laad2 {
	width:300px;
	height:600px;
	position:absolute;
	top:-610;
	}
#laad3 {
	width:300px;
	height:600px;
	position:absolute;
	top:-610;
	}
#laad4 {
	width:300px;
	height:600px;
	position:absolute;
	top:-610;
	}
</style>

<script language="JavaScript">
function getStyle( layer ) {
	if( document.getElementById ) {
		return document.getElementById( layer ).style
	} else if( document.all ) {
		return document.all[layer].style
	} else {
		return document[layer]
	}
}

// PICTURE 1 !!!
function laad1in() {
	if ( ypos1 < 10 ) {
		ypos1 = ypos1 + 1
		getStyle('laad1').top = ypos1
		setTimeout( 'laad1in()', 50 )
	}
	else if ( ypos1 == 10 ) { setTimeout( 'laad1out()','laad2in()', 50000) }
}

function laad1out {
	if ( ypos1 > 9 ) {
		ypos1 = ypos1 + 1
		getStyle('laad1').top = ypos1
		setTimeout( 'laad1out()', 50 )
	}
	else if ( ypos1 == 630 ) { ypos1 = -610 }
}

// PICTURE 2 !!!
function laad2in() {
	if ( ypos2 < 10 ) {
		ypos2 = ypos2 + 1
		getStyle('laad2').top = ypos2
		setTimeout( 'laad2in()', 50 )
	}
	else if ( ypos2 == 10 ) { setTimeout( 'laad2out()','laad3in()', 50000) }
}

function laad2out {
	if ( ypos2 > 9 ) {
		ypos2 = ypos2 + 1
		getStyle('laad2').top = ypos2
		setTimeout( 'laad2out()', 50 )
	}
	else if ( ypos2 == 630 ) { ypos2 = -610 }
}

// PICTURE 3 !!!
function laad3in() {
	if ( ypos3 < 10 ) {
		ypos3 = ypos3 + 1
		getStyle('laad3').top = ypos3
		setTimeout( 'laad3in()', 50 )
	}
	else if ( ypos3 == 10 ) { setTimeout( 'laad3out()','laad4in()', 50000) }
}

function laad3out {
	if ( ypos3 > 9 ) {
		ypos3 = ypos3 + 1
		getStyle('laad3').top = ypos3
		setTimeout( 'laad3out()', 50 )
	}
	else if ( ypos3 == 630 ) { ypos3 = -610 }
}


// PICTURE 4 !!!
function laad4in() {
	if ( ypos4 < 10 ) {
		ypos4 = ypos4 + 1
		getStyle('laad4').top = ypos4
		setTimeout( 'laad4in()', 50 )
	}
	else if ( ypos4 == 10 ) { setTimeout( 'laad4out()','laad1in()', 50000) }
}

function laad4out {
	if ( ypos4 > 9 ) {
		ypos4 = ypos4 + 1
		getStyle('laad4').top = ypos4
		setTimeout( 'laad4out()', 50 )
	}
	else if ( ypos4 == 630 ) { ypos4 = -610 }
}

</script>

</head>
<body onLoad="laad1in()">
<div id="bar" align="left" style="vertical-align:top">
<div id="laad1"> dit is de layer van foto1</div><div id="laad2"> deze is van laad2 ook een leuke</div><div id="laad3">laag 3 is de beste tot nu toe</div><div id="laad4">jaa het is gelukt! het 4e en laatste nummer</div>
</div>
</body>
</html>
 
Bij je laadout staan geen haakjes : laadout() staat als laadout en dit 4 maal.
Je hebt in jhe script ook de ypos 4 maal niet gedefinieerd.
Hier is het verbeterde script :

PHP: 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
body { 
background-color:#000000; 
} 
#bar{ 
height:600px; 
width:300px; 
background-color:#0000FF; 
position:relative; 
top: 10px; 
} 
#laad1 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad2 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad3 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad4 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
</style> 

<script language="JavaScript"> 
function getStyle( layer ) { 
    if( document.getElementById ) { 
        return document.getElementById( layer ).style 
    } else if( document.all ) { 
        return document.all[layer].style 
    } else { 
        return document[layer] 
    } 
} 

// PICTURE 1 !!! 
var ypos1 = -610;
var ypos2 = -610;
var ypos3 = -610;
var ypos4 = -610;
function laad1in() { 
    if ( ypos1 < 10 ) { 
        ypos1 = ypos1 + 1 
        getStyle('laad1').top = ypos1 
        setTimeout( 'laad1in()', 50 ) 
    } 
    else if ( ypos1 == 10 ) { setTimeout( 'laad1out()','laad2in()', 50000) } 
} 

function laad1out() { 
    if ( ypos1 > 9 ) { 
        ypos1 = ypos1 + 1 
        getStyle('laad1').top = ypos1 
        setTimeout( 'laad1out()', 50 ) 
    } 
    else if ( ypos1 == 630 ) { ypos1 = -610 } 
} 

// PICTURE 2 !!! 
function laad2in() { 
    if ( ypos2 < 10 ) { 
        ypos2 = ypos2 + 1 
        getStyle('laad2').top = ypos2 
        setTimeout( 'laad2in()', 50 ) 
    } 
    else if ( ypos2 == 10 ) { setTimeout( 'laad2out()','laad3in()', 50000) } 
} 

function laad2out() { 
    if ( ypos2 > 9 ) { 
        ypos2 = ypos2 + 1 
        getStyle('laad2').top = ypos2 
        setTimeout( 'laad2out()', 50 ) 
    } 
    else if ( ypos2 == 630 ) { ypos2 = -610 } 
} 

// PICTURE 3 !!! 
function laad3in() { 
    if ( ypos3 < 10 ) { 
        ypos3 = ypos3 + 1 
        getStyle('laad3').top = ypos3 
        setTimeout( 'laad3in()', 50 ) 
    } 
    else if ( ypos3 == 10 ) { setTimeout( 'laad3out()','laad4in()', 50000) } 
} 

function laad3out() { 
    if ( ypos3 > 9 ) { 
        ypos3 = ypos3 + 1 
        getStyle('laad3').top = ypos3 
        setTimeout( 'laad3out()', 50 ) 
    } 
    else if ( ypos3 == 630 ) { ypos3 = -610 } 
} 


// PICTURE 4 !!! 
function laad4in() { 
    if ( ypos4 < 10 ) { 
        ypos4 = ypos4 + 1 
        getStyle('laad4').top = ypos4 
        setTimeout( 'laad4in()', 50 ) 
    } 
    else if ( ypos4 == 10 ) { setTimeout( 'laad4out()','laad1in()', 50000) } 
} 

function laad4out() { 
    if ( ypos4 > 9 ) { 
        ypos4 = ypos4 + 1 
        getStyle('laad4').top = ypos4 
        setTimeout( 'laad4out()', 50 ) 
    } 
    else if ( ypos4 == 630 ) { ypos4 = -610 } 
} 

</script> 

</head> 
<body onLoad="laad1in()"> 
<div id="bar" align="left" style="vertical-align:top"> 
<div id="laad1"> dit is de layer van foto1</div><div id="laad2"> deze is van laad2 ook een leuke</div><div id="laad3">laag 3 is de beste tot nu toe</div><div id="laad4">jaa het is gelukt! het 4e en laatste nummer</div> 
</div> 
</body> 
</html>

Greetz : Jer:cool:en.
 
JeroenE zei:
Bij je laadout staan geen haakjes : laadout() staat als laadout en dit 4 maal.
Je hebt in jhe script ook de ypos 4 maal niet gedefinieerd.
Hier is het verbeterde script :

PHP: 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
body { 
background-color:#000000; 
} 
#bar{ 
height:600px; 
width:300px; 
background-color:#0000FF; 
position:relative; 
top: 10px; 
} 
#laad1 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad2 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad3 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad4 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
</style> 

<script language="JavaScript"> 
function getStyle( layer ) { 
    if( document.getElementById ) { 
        return document.getElementById( layer ).style 
    } else if( document.all ) { 
        return document.all[layer].style 
    } else { 
        return document[layer] 
    } 
} 

// PICTURE 1 !!! 
var ypos1 = -610;
var ypos2 = -610;
var ypos3 = -610;
var ypos4 = -610;
function laad1in() { 
    if ( ypos1 < 10 ) { 
        ypos1 = ypos1 + 1 
        getStyle('laad1').top = ypos1 
        setTimeout( 'laad1in()', 50 ) 
    } 
    else if ( ypos1 == 10 ) { setTimeout( 'laad1out()','laad2in()', 50000) } 
} 

function laad1out() { 
    if ( ypos1 > 9 ) { 
        ypos1 = ypos1 + 1 
        getStyle('laad1').top = ypos1 
        setTimeout( 'laad1out()', 50 ) 
    } 
    else if ( ypos1 == 630 ) { ypos1 = -610 } 
} 

// PICTURE 2 !!! 
function laad2in() { 
    if ( ypos2 < 10 ) { 
        ypos2 = ypos2 + 1 
        getStyle('laad2').top = ypos2 
        setTimeout( 'laad2in()', 50 ) 
    } 
    else if ( ypos2 == 10 ) { setTimeout( 'laad2out()','laad3in()', 50000) } 
} 

function laad2out() { 
    if ( ypos2 > 9 ) { 
        ypos2 = ypos2 + 1 
        getStyle('laad2').top = ypos2 
        setTimeout( 'laad2out()', 50 ) 
    } 
    else if ( ypos2 == 630 ) { ypos2 = -610 } 
} 

// PICTURE 3 !!! 
function laad3in() { 
    if ( ypos3 < 10 ) { 
        ypos3 = ypos3 + 1 
        getStyle('laad3').top = ypos3 
        setTimeout( 'laad3in()', 50 ) 
    } 
    else if ( ypos3 == 10 ) { setTimeout( 'laad3out()','laad4in()', 50000) } 
} 

function laad3out() { 
    if ( ypos3 > 9 ) { 
        ypos3 = ypos3 + 1 
        getStyle('laad3').top = ypos3 
        setTimeout( 'laad3out()', 50 ) 
    } 
    else if ( ypos3 == 630 ) { ypos3 = -610 } 
} 


// PICTURE 4 !!! 
function laad4in() { 
    if ( ypos4 < 10 ) { 
        ypos4 = ypos4 + 1 
        getStyle('laad4').top = ypos4 
        setTimeout( 'laad4in()', 50 ) 
    } 
    else if ( ypos4 == 10 ) { setTimeout( 'laad4out()','laad1in()', 50000) } 
} 

function laad4out() { 
    if ( ypos4 > 9 ) { 
        ypos4 = ypos4 + 1 
        getStyle('laad4').top = ypos4 
        setTimeout( 'laad4out()', 50 ) 
    } 
    else if ( ypos4 == 630 ) { ypos4 = -610 } 
} 

</script> 

</head> 
<body onLoad="laad1in()"> 
<div id="bar" align="left" style="vertical-align:top"> 
<div id="laad1"> dit is de layer van foto1</div><div id="laad2"> deze is van laad2 ook een leuke</div><div id="laad3">laag 3 is de beste tot nu toe</div><div id="laad4">jaa het is gelukt! het 4e en laatste nummer</div> 
</div> 
</body> 
</html>

Greetz : Jer:cool:en.
Klik om te vergroten...

Heel erg bedankt voor de snelle reactie!!


Het script werkt nu bijna, het enige wat tot nu toe misgaat is dat als layer1 naar beneden bewogen is er niets meer gebeurt. Layer 1 gaat er niet meer uit, ook Layer 2 komt niet naar binnen, ook als ik de timeout varander van 50000 naar 5000 niet.

EDIT: Hij werkt al, ik moest even de
else if ( ypos4 == 10 ) { setTimeout( 'laad4out()','laad1in()', 50000) }
veranderen in:
if ( ypos4 > 9 ) { setTimeout( 'laad4out()', 50000) }
en bij laad4out()
heb ik "laad1in()" geschreven.

NOGMAALS BEDANKT VOOR ALLES, TOP!
 
Laatst bewerkt:
in je settimeout mag je maar 1 keer ' ... ' gebruiken :
setTimeout("laad1out(); laad2in();",50000);

PHP: 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
body { 
background-color:#000000; 
} 
#bar{ 
height:600px; 
width:300px; 
background-color:#0000FF; 
position:relative; 
top: 10px; 
} 
#laad1 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad2 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad3 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
#laad4 { 
    width:300px; 
    height:600px; 
    position:absolute; 
    top:-610; 
    } 
</style> 

<script language="JavaScript"> 
function getStyle( layer ) { 
    if( document.getElementById ) { 
        return document.getElementById( layer ).style 
    } else if( document.all ) { 
        return document.all[layer].style 
    } else { 
        return document[layer] 
    } 
} 

// PICTURE 1 !!! 
var ypos1 = -610;
var ypos2 = -610;
var ypos3 = -610;
var ypos4 = -610;
function laad1in() { 
    if ( ypos1 < 10 ) { 
        ypos1 = ypos1 + 1 
        getStyle('laad1').top = ypos1 
        setTimeout( 'laad1in()', 50 ) 
    } 
    else if ( ypos1 == 10 ) { setTimeout( 'laad1out(); laad2in();', 50000) } 
} 

function laad1out() { 
    if ( ypos1 > 9 ) { 
        ypos1 = ypos1 + 1 
        getStyle('laad1').top = ypos1 
        setTimeout( 'laad1out()', 50 ) 
    } 
    else if ( ypos1 == 630 ) { ypos1 = -610 } 
} 

// PICTURE 2 !!! 
function laad2in() { 
    if ( ypos2 < 10 ) { 
        ypos2 = ypos2 + 1 
        getStyle('laad2').top = ypos2 
        setTimeout( 'laad2in()', 50 ) 
    } 
    else if ( ypos2 == 10 ) { setTimeout( 'laad2out(); laad3in();', 50000) } 
} 

function laad2out() { 
    if ( ypos2 > 9 ) { 
        ypos2 = ypos2 + 1 
        getStyle('laad2').top = ypos2 
        setTimeout( 'laad2out()', 50 ) 
    } 
    else if ( ypos2 == 630 ) { ypos2 = -610 } 
} 

// PICTURE 3 !!! 
function laad3in() { 
    if ( ypos3 < 10 ) { 
        ypos3 = ypos3 + 1 
        getStyle('laad3').top = ypos3 
        setTimeout( 'laad3in()', 50 ) 
    } 
    else if ( ypos3 == 10 ) { setTimeout( 'laad3out(); laad4in();', 50000) } 
} 

function laad3out() { 
    if ( ypos3 > 9 ) { 
        ypos3 = ypos3 + 1 
        getStyle('laad3').top = ypos3 
        setTimeout( 'laad3out()', 50 ) 
    } 
    else if ( ypos3 == 630 ) { ypos3 = -610 } 
} 


// PICTURE 4 !!! 
function laad4in() { 
    if ( ypos4 < 10 ) { 
        ypos4 = ypos4 + 1 
        getStyle('laad4').top = ypos4 
        setTimeout( 'laad4in()', 50 ) 
    } 
    else if ( ypos4 == 10 ) { setTimeout( 'laad4out(); laad1in();', 50000) } 
} 

function laad4out() { 
    if ( ypos4 > 9 ) { 
        ypos4 = ypos4 + 1 
        getStyle('laad4').top = ypos4 
        setTimeout( 'laad4out()', 50 ) 
    } 
    else if ( ypos4 == 630 ) { ypos4 = -610 } 
} 

</script> 

</head> 
<body onLoad="laad1in()"> 
<div id="bar" align="left" style="vertical-align:top"> 
<div id="laad1"> dit is de layer van foto1</div><div id="laad2"> deze is van laad2 ook een leuke</div><div id="laad3">laag 3 is de beste tot nu toe</div><div id="laad4">jaa het is gelukt! het 4e en laatste nummer</div> 
</div> 
</body> 
</html>

Ik heb het getest zoals het hierboven staat, en dat werkt perfect.
succes.

Greetz : Jer:cool:en.
 
Top het is gelukt, nu alle maten en content nog even aanpassen. Ik ben hier superblij mee bedankt!!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan