PDA

Click to See Complete Forum and Search --> : i need a litttle help please

digital21stuk
11-08-2003, 06:20 AM
My problem is within the script below. I need the blue block to move within the background only. As you can see, if you press the right and left arrow keys down the block moves, BUT it moves outside of the required background.
can anyone help

cheers in advance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">

#block {
position: relative;
left: 10px;
top: 450px;
width: 100px;
height: 20px;
background-color: blue;
}
#background {
width: 500px;
color: #FFFFFF;
background-color: black;
height: 500px;
position: absolute;
overflow: hidden;
background-color: #000000;
}

</style>
</head>

<body>
<div id="background"></div>
<div id="block"></div>
<script type="text/javascript">

function move() {
keyPress=event.keyCode;
if (keyPress==37) block.style.posLeft-=10;
if (keyPress==39) block.style.posLeft+=10;
}


</script>
</body>
</html>
Mr J
11-08-2003, 08:08 AM
Tried your script above and nothing happens in my IE6
digital21stuk
11-08-2003, 08:22 AM
sorry, try this:


<html>
<title>Untitled</title>
<style type="text/css">
#block {
position: relative;
left: 10px;
top: 450px;
width: 100px;
height: 20px;
background-color: blue;
}

#background {
width: 500px;
color: #FFFFFF;
background-color: black;
height: 500px;
position: absolute;
overflow: hidden;
background-color: #000000;
}
</style>
<body>
</head>
<body onkeydown="move();">

<div id="background"></div>
<div id="block"></div>


<SCRIPT>
function move() {
keyPress=event.keyCode;
if (keyPress==37) block.style.posLeft-=10;
if (keyPress==39) block.style.posLeft+=10;

}
</SCRIPT>

</body>
</html>
Mr J
11-08-2003, 10:28 AM
Please try the following

<html>
<title>Untitled</title>
<style type="text/css">
#block {
position: relative;
left: 10px;
top: 450px;
width: 100px;
height: 20px;
background-color: blue;
}

#background {
width: 500px;
color: #FFFFFF;
background-color: black;
height: 500px;
position: absolute;
overflow: hidden;
background-color: #000000;
}
</style>
<body>
</head>
<body onkeydown="move();">

<div id="background" style="width: 500px; color: #FFFFFF; background-color: black; height: 500px; position: absolute; overflow: hidden;background-color: #000000" ></div>

<div id="block" style="position: relative; left: 10px; top: 450px; width: 100px; height: 20px; background-color: blue"></div>


<SCRIPT>
function move() {
keyPress=event.keyCode;
if (keyPress==37){
if(block.style.posLeft>background.style.posLeft){
block.style.posLeft-=10;
}
else{
block.style.posLeft=background.style.posLeft
}
}

if (keyPress==39){
obj=parseInt(block.style.posLeft)
if(obj>(background.style.posLeft+parseInt(background.style.width))-parseInt(block.style.width)-10){
block.style.posLeft=background.style.posLeft+parseInt(background.style.width)-parseInt(block.style.width)
}
else{
obj+=10
block.style.posLeft=obj
}
}

}
</SCRIPT>

</body>
</html>
digital21stuk
11-08-2003, 10:59 AM
Cheers Mr J.

One questionm though: Why do you define the CSS twice??

digital21st
Mr J
11-08-2003, 11:10 AM
Its not that I have defined the CSS twice I just didn't delete the style rules you put in. :(


In order to reference the width of the background and object the width needed to be stated inline. :)

There are other methods but it would mean making the script longer than is really necessary. :(

I suppose I could have just stated just the width inline.:rolleyes:




:D
digital21stuk
11-08-2003, 11:15 AM
yaeh ive heard of that, whats the width inline
Mr J
11-08-2003, 05:30 PM
In order for the script to work using embedded style rules you would have to reference those style rules.

This requires an understanding of the zero-based collection.

<html>
<title>Untitled</title>
<style type="text/css">
#block {
position: relative;
left: 10px;
top: 450px;
width: 100px;
height: 20px;
background-color: blue;
}

#background {
width: 500px;
color: #FFFFFF;
background-color: black;
height: 500px;
position: absolute;
overflow: hidden;
background-color: #000000;
}
</style>
<body>
</head>
<body onkeydown="move();">

<div id="background"></div>

<div id="block"></div>


<SCRIPT>
function move() {
keyPress=event.keyCode;
if (keyPress==37){
if(block.style.posLeft>background.style.posLeft){
block.style.posLeft-=10;
}
else{
block.style.posLeft=background.style.posLeft
}
}

if (keyPress==39){
obj=parseInt(block.style.posLeft)

if(obj>(background.style.posLeft+parseInt(document.styleSheets[0].rules[1].style.width))-parseInt(document.styleSheets[0].rules[0].style.width)-10){
block.style.posLeft=background.style.posLeft+parseInt(document.styleSheets[0].rules[1].style.width)-parseInt(document.styleSheets[0].rules[0].style.width)
}
else{
obj+=10
block.style.posLeft=obj
}
}

}
</SCRIPT>

</body>
</html>