Jump to content

What Am I Doing Wrong?


CompX

Recommended Posts

Ive been working on this for a while now, trying a whole lot of different angles.

 

<html>

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

<head>

<script type="text/javascript">





var div1 = false;
var div2 = false;
var div3 = false;
var div4 = false;

			// These are the Functions to move the divs left.   If you Mouse off of the blue div (the big one), the int divs go left.
function mouseOff1() {
if (div1 = true);
{
moveLeft1()
}
else;
{null;}


function mouseOff2() {
if (div2 = true);
{
moveLeft2()
}
else;
{null;}


function mouseOff3() {
if (div3 = true);
{
moveLeft3()
}
else;
{null;}


function mouseOff4() {
if (div4 = true);
{
moveLeft4()
}
else;
{null;}
	   // End of mouse off functions



	   // MouseOver functions, if you mouseover one certain div, it will go to the right.

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

function mouseOver2() {
if (div2 = false);
{
moveRight2()
}
else;
{null;}

function mouseOver3() {
if (div3 = false);
{
moveRight3()
}
else;
{null;}

function mouseOver4() {
if (div4 = false);
{
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: 700px; 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>

 

 

 

I've probably got this totally wrong, but I have to get this to work somehow.

Share this post


Link to post
Share on other sites

I see a problem in the java parts... = means set to where as ==means equals. I have just finished my first programming class so I don't know the jscript and GUI stuff so well yet, but that would cause a little problem in and of itself. Beyond that it looks about right. :thumbs-up:

Edited by ocmooz

Share this post


Link to post
Share on other sites

Basically a dynamic gallery. I'm just trying to get the code working before I start integrating it into my actual page.

 

I need to have say 6 images in a div.

 

The images are stacked on top of each other with the left side of each one showing.

 

The one on the right is the front most layer.

---------

When somebody hovers over one, it, and everyone to the right of it will slide to the right a bit, and the one that is hovered over will come to the top so the person can see all of it.

 

If you mouse off the pic it will stay at the same place.

 

But! If you mouseout of the div that they are all contained in, they will all go back to their normal positions.

------

 

I'm not even sure if I'm going at this the right way, but I'm definitely trying. This is like the first Jscript I've ever written from scratch by myself.

 

And I still have to set a clearInterval() but I'm not sure how to do that to get it to stop at say...200px?

Share this post


Link to post
Share on other sites

I see a problem in the java parts... = means set to where as ==means equals. I have just finished my first programming class so I don't know the jscript and GUI stuff so well yet, but that would cause a little problem in and of itself. Beyond that it looks about right. :thumbs-up:

 

that could be it, that catches people when they move from vb to c#

 

i read "=" is "assigned the value of" ie a = b, a is assigned the value of b

 

and "==" is "equals"

 

i am unsure if that is the case in JScript put it mite be

so this for example:

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

 

would become this:

 

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

 

also noticed that your missing a curley bracket at the end of each function

 

wouldnt JScript have a boolean function if thats the case, you could do this

 

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

Share this post


Link to post
Share on other sites

It does, but I'm not even sure what boolean means, or how to use it. Do you just change everything to if (div1); ?

I'm adding all of the }'s right now. See if it works. Thanks.

 

boolean is a true/false value so its good for if statements

 

i dont know how to declare it in JS but in c# (which is similar to java) its

 

eg.

bool div1 = true;

 

yea i cant tell ya for sure but i think it should work

 

if(div1)
{
 //do whatever you wnat to do if true
}
else
{
// if false
}

Share this post


Link to post
Share on other sites

That all makes sense, but what would you use to call it with in html? the function thats inside the boolean? or would you call the name of the boolean (div1) and it would do whichever based on whether its true or false?

 

	
<html>
<head>
<script type="text/javascript">

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


if(div1)
{
 moveLeft1()
}
else
{
moveRight1()
}


if(div2)
{
moveLeft2()
}
else
{
moveRight2()
}

if (div3)
{
moveLeft3()
}
else
{
moveRight3()
}

if (div4)
{
moveLeft4()
}
else
{
moveRight4()
}
// 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>


													   //   ^^^^^ what would you call right here?  (div1-4) or moveLeft/Right functions












</body></html>

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
×
×
  • Create New...