CompX Posted December 10, 2008 Posted December 10, 2008 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 More sharing options...
graememk Posted December 11, 2008 Posted December 11, 2008 I dont really know jScript, but i do have some programming skills, what are you trying to do with your code maybe i can help out on your alogrithmn.? Share this post Link to post Share on other sites More sharing options...
silkster Posted December 11, 2008 Posted December 11, 2008 Where is that BSD guru when you need him? o.O? Share this post Link to post Share on other sites More sharing options...
ocmooz Posted December 11, 2008 Posted December 11, 2008 (edited) 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 December 11, 2008 by ocmooz Share this post Link to post Share on other sites More sharing options...
CompX Posted December 11, 2008 Posted December 11, 2008 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 More sharing options...
d3bruts1d Posted December 11, 2008 Posted December 11, 2008 Sounds like you are wanting to do something similar to the iTunes "cover flow". Something like this site? http://myscraproom.net/ If so, you can get code for that from http://imageflow.finnrudolph.de/ and a number of other places. Share this post Link to post Share on other sites More sharing options...
CompX Posted December 11, 2008 Posted December 11, 2008 That's pretty close, thanks d3. I'll see if I can get this to work. Share this post Link to post Share on other sites More sharing options...
graememk Posted December 11, 2008 Posted December 11, 2008 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 More sharing options...
CompX Posted December 11, 2008 Posted December 11, 2008 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. Share this post Link to post Share on other sites More sharing options...
CompX Posted December 11, 2008 Posted December 11, 2008 I added the rest of the }'s to only realize it still doesnt work. Is there a way to debug? or something like that, to see what is not working. Share this post Link to post Share on other sites More sharing options...
graememk Posted December 11, 2008 Posted December 11, 2008 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 More sharing options...
CompX Posted December 11, 2008 Posted December 11, 2008 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 More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now