Jump to content

What Am I Doing Wrong?

CompX

By CompX
in Programmer's Corner

 Share

Recommended Posts

graememk Newbie

graememk

Posted
Posted

I think the if statements should be inside the functions for the mouseOff functions like you had at the start,

I was wrong to call the boolean a function oopies its a variable type - i think :P

 

like each function like this - sorry about that

 

function mouseOff1()
{
if (div1)
{
moveLeft1();
}
else
{
 null;
}
}

 

Edit..

 

be careful with the semi colons,

im taking this on from my java at uni (only 2 modules) rest was electronics and Visual studio

 

no semi colon after the if statements but semicolons on the statements in the if statement,

 

i think i have corrected the above example.

 

 

 

function moveRight2() {

 this.style.left = (this.style.left)+10+'px'; // pseudo-property code: Move right by 10px

 setInterval(moveRight2,20); // call doMove() every 20 msec

 div2 == true

}

 

I think the last line should be div2 = true; as your assigning the value not testing a condition

 

 

just wondering do you have other functions calling the mouseoff functions?

Share this post

Link to post
Share on other sites
CompX Newbie

CompX

Posted
Posted

No, all of this is seperate, I'm just trying to get the concept going, then I can transfer it onto my page.

 

 

So you can't have a declaration of the moveRight() function inside the mouseOff() function?

 

You just setup the moveRight() inside the mouseOver() and so you have 2 different sets of booleans, the ones for mouseOver() and ones for mouseOff()?

 

changing all of the equals, and gonna try this out again.

 

 

 

<html>

<style>
#div { position: absolute; z-index: -200; }
</style>

<head>

<script type="text/javascript">









boolean div1 = false;
boolean div2 = false;
boolean div3 = false;
boolean div4 = false;

				// mouseOff Functions
function mouseOff1()
{
if (div1)
{
moveLeft1();
}
else
{
 null;
}
}

function mouseOff2()
{
if (div1)
{
moveLeft2();
}
else
{
 null;
}
}

function mouseOff3()
{
if (div1)
{
moveLeft3();
}
else
{
 null;
}
}

function mouseOff4()
{
if (div1)
{
moveLeft4();
}
else
{
 null;
}
}

					// mouseOver() Functions

function mouseOver1()
{
if (div1)
{
moveRight1();
}
else
{
 null;
}
}

function mouseOver2()
{
if (div1)
{
moveRight2();
}
else
{
 null;
}
}

function mouseOver3()
{
if (div1)
{
moveRight3();
}
else
{
 null;
}
}

function mouseOver4()
{
if (div1)
{
moveRight4();
}
else
{
 null;
}
}





// Move Right Functions

function moveRight1() {

 this.style.left = (this.style.left)+10+'px'; // pseudo-property code: Move right by 10px

 setInterval(moveRight1,20); // call doMove() every 20 msec

 div1 = true

}

function moveRight2() {

 this.style.left = (this.style.left)+10+'px'; // pseudo-property code: Move right by 10px

 setInterval(moveRight2,20); // call doMove() every 20 msec

 div2 = true

}

function moveRight3() {

 this.style.left = (this.style.left)+10+'px'; // pseudo-property code: Move right by 10px

 setInterval(moveRight3,20); // call doMove() every 20 msec

 div3 = true

}

function moveRight4() {

 this.style.left = (this.style.left)+10+'px'; // pseudo-property code: Move right by 10px

 setInterval(moveRight4,20); // call doMove() every 20 msec

 div4 = true

}
// Move Left Functions

  function moveLeft1() 
  {
this.style.left = (this.style.left)-10+'px';  //move left by 10px
setInterval(moveLeft1,20);
div1 = false
}
function moveLeft2() 
{
this.style.left = (this.style.left)-10+'px';	// move left by 10px
setInterval(moveLeft2,20);
div2 = false
}
function moveLeft3() 
{
this.style.left = (this.style.left)-10+'px';	 // move left by 10 px
setInterval(moveLeft3,20);
div3 = false
}
function moveLeft4() {
this.style.left = (this.style.left)-10+'px';	  // move left by 10px
setInterval(moveLeft4,20);
div4 = false
}





</script>

</head>






<body>

<div id="div" style="background: blue; height: 500px; width:300px;" onmouseout="mouseOff1(),mouseOff2(),mouseOff3(),mouseOff4()"></div>

<div id="div1" style="background: black; height:100px; width:100px;" onmouseover="mouseOver1()"></div>
<br>
<div id="div2" style="background: black; height:100px; width:100px;" onmouseover="mouseOver2()"></div>
<br>
<div id="div3" style="background: black; height:100px; width:100px;" onmouseover="mouseOver3()"></div>
<br>
<div id="div4" style="background: black; height:100px; width:100px;" onmouseover="mouseOver4()"></div>
<br>















</body></html>

 

 

There's everything put together. Still nothing :\ It's not even acting like it wants to do anything.

Share this post

Link to post
Share on other sites
graememk Newbie

graememk

Posted
Posted

umm i think you need semi-colons too,

 

function moveRight1() {

 this.style.left = (this.style.left)+10+'px'; // pseudo-property code: Move right by 10px

 setInterval(moveRight1,20); // call doMove() every 20 msec

 div1 = true; //<need a semi colon here i think 

}

 

i think thats all the syntax errors sorted once that is done, Anybody else with more experience of JS step in now, as thats as far as i think i can go - sorry :(

Share this post

Link to post
Share on other sites
graememk Newbie

graememk

Posted
Posted

i bet once its figured out its gonna look so simple!

 

I'm thinking something is needed to "activate" the mouse over functions

look at this sample code

<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" >
</form>
</body>
</html>

 

the button is needed to activate the code

Share this post

Link to post
Share on other sites
d3bruts1d Newbie

d3bruts1d

Posted
Posted
i bet once its figured out its gonna look so simple!

 

I'm thinking something is needed to "activate" the mouse over functions

look at this sample code

 

 

the button is needed to activate the code

 

No, the onmouseover event in the html tag is what triggers the JavaScript function. It's just confusing when people use mouseover, mouseout, etc as function names.

Share this post

Link to post
Share on other sites
d3bruts1d Newbie

d3bruts1d

Posted
Posted

Spent a little bit of time reviewing your code... and it was just easier for me to rewrite it, so apologies for that, but here is an example that should move the boxes to the right. Not had time to get the "return to original" working, but this should (hopefully) give you some ideas and get you going in the right direction...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>d3's version</title>

<script language="javascript" type="text/javascript">

var divName, step, t; // Set the varable globally so we can use it in the setTimeout

function MoveDiv(x, y){ // This function will move whatever div we pass to it. y should be a 0, we'll set it to 1 after the first pass.

divName = x;
var thisDiv = document.getElementById(x);

if(y == 0 && thisDiv.style.marginLeft == ''){
	// Some reason it didn't want to get the marginLeft, so I'll cheat.
	// First run through, we'll jsut set the damn thing to 0px
	thisDiv.style.marginLeft = "0px";
}

var leftPOS = parseInt(thisDiv.style.marginLeft);

if(leftPOS < 100) {
	thisDiv.style.marginLeft = (leftPOS + 20) + "px";

	t = setTimeout('MoveDiv(divName, 1)', 20);
} 
}
</script>

<style type="text/css">
.bigblue {
margin: 0px;
height: 650px;
width: 300px;
background-color: #000099;
z-index: 0;
position: absolute;
}
.blackdiv {
height: 100px;
width: 100px;
background-color: #000000;
z-index: 5;
margin-top: 25px;
margin-left: 0px;
position: relative;
}
</style>
</head>
<body>
<div id="blueone" class="bigblue">

<div id="div1" class="blackdiv" onmouseover="MoveDiv('div1', 0);"> </div>

<div id="div2" class="blackdiv" onmouseover="MoveDiv('div2', 0);"> </div>

<div id="div3" class="blackdiv" onmouseover="MoveDiv('div3', 0);"> </div>

<div id="div4" class="blackdiv" onmouseover="MoveDiv('div4', 0);"> </div>

<div id="div5" class="blackdiv" onmouseover="MoveDiv('div5', 0);"> </div>

</div>
</body>
</html>

Share this post

Link to post
Share on other sites
ocmooz Newbie

ocmooz

Posted
Posted

If you did this

boolean div1 = false;
boolean div2 = false;
boolean div3 = false;
boolean div4 = false;

Then you would have to use 

while(div1 != true)
{
 ...
}

(!= means not equal btw)

Which might not necessarily work with what you are trying to accomplish here. Have you tried changing the = in the original code for just the if statements and fixed your brackets? That first code you posted should be close enough that you could tweak it a little and make it right. Best of Luck. :thumbs-up:

Share this post

Link to post
Share on other sites
CompX Newbie

CompX

Posted
Posted

Alright d3, awesome, I really appreciate it :D. I've been playing with it a little bit, and I see two things. the movement to the right works perfectly. It gets to the right side, and i have a moveLeft function setup so that it will come back if it has gone more than 5 px to the right, and it is called by an onmouseout event of the big blue div. Now, here's what I don't understand. It doesnt use the setTimeout() function. it just goes around 20px then stops. And it does it if you mouseout of the black div. Just a little confused, but thanks so much for the code.

 

 

 

Here's the JavaScript portion of it.

 

var divName, step, t; // Set the varable globally so we can use it in the setTimeout
var divNAME, step, p;

function MoveLeft(a, z){

var thisDIV = document.getElementById(a);

if(z == 0 && thisDIV.style.marginLeft == ''){
thisDIV.style.marginLeft = "0px";

divNAME = a;

}
var leftPos = parseInt(thisDIV.style.marginLeft);
if(leftPos >5) {
thisDIV.style.marginLeft = (leftPos - 20) + "px";

p = setTimeout('MoveDIV(divNAME, 1)', 60);
}
}
function MoveDiv(x, y){ // This function will move whatever div we pass to it. y should be a 0, we'll set it to 1 after the first pass.

var thisDiv = document.getElementById(x);
 divName = x;

if(y == 0 && thisDiv.style.marginLeft == ''){
	// Some reason it didn't want to get the marginLeft, so I'll cheat.
	// First run through, we'll jsut set the damn thing to 0px
	thisDiv.style.marginLeft = "0px";
}

var leftPOS = parseInt(thisDiv.style.marginLeft);

if(leftPOS < 200) {
	thisDiv.style.marginLeft = (leftPOS + 20) + "px";

	t = setTimeout('MoveDiv(divName, 1)', 60);
}
}

Share this post

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to topic listing
×
×
  • Create New...