Non-coder, hitting a roadblock with first JS.

**theforevernewb** · 11-08-2011, 03:58 PM

Roadblock: I am quickly getting over my head now...

I started with the Carousel Slideshow II script in the hopes of making a scrolling menu out of it. It kept looking wrong to me, and I realised that I wanted something different.

So I wrote this script that copies a DIV ID'd "locomotive" and creates two identical DIVs "railcar" and "caboose", and then assembles the train inside another DIV called "trainbox." It then scrolls the train inside the box either up or down depending on whether shift=1 or -1, at a speed defined by the delay variable. If you run the code, you should see what I mean if you run your mouse over the control links.

The problem I'm having is: I want to control this script by determining where on the outer div ("trainbox") the mouse cursor is positioned.

I've tried a bunch of invisible DIVs with mouseovers, but I can't click through them to get at the links in my scrolling menu. I have also tried setting the z-index of those invisible DIVs below the other objects, and that works a little bit but not well.

I want the train to move upwards when the mouse is near the top of "trainbox" and downwards when the mouse is near the bottom. I'd like to detect the cursor and change two variables according to the y position within the DIV. Can anyone help?

I'm a designer, not a coder, so take it easy on me. I'm sure the script below is a total mess... Oh... and I am forbidden from using external resources in my scripts.

Code:

<script type='text/javascript'>
var height=70;              //set this to the total height of items in locomotive.
var trainboxheight= 50;   //visible (set smaller or equal to above).
var width=180;               //set to width of widest item.
var delay=20;                 //time between steps in msec.
var shift=1;                    //+1 moves the train up, -1 moves it down.

var dreset=delay;
var turbo=delay/4;
var brakes=delay*4;
var shiftreset=shift;
var hreg=height*2;
var loco = null;
var cars = null;
var cabo = null;
var trainbox = null;


function smartMove(){
  if (shift!=0 && hreg==0) {
     loco.style.top = 0-height+'px';
     cars.style.top = '0px';
     cabo.style.top = 0+height+'px';  
     hreg=height*2;  
  } else if (shift!=0 && hreg==height) {
     cars.style.top = 0-height+'px';
     cabo.style.top = '0px';
     loco.style.top = 0+height+'px'; 
  } else if (shift!=0 && hreg==height*2) {
     loco.style.top = 0-height+'px';
     cars.style.top = '0px';
     cabo.style.top = 0+height+'px';  
  } else if (shift!=0 && hreg==height*3) {
     cabo.style.top = 0-height+'px';
     loco.style.top = '0px';
     cars.style.top = 0+height+'px';   
  } else if (shift!=0 && hreg==height*4) {
     loco.style.top = 0-height+'px';
     cars.style.top = '0px';
     cabo.style.top = 0+height+'px';
     hreg=height*2;
  }
loco.style.top = parseInt(loco.style.top)-shift+'px';
cars.style.top = parseInt(cars.style.top)-shift+'px';
cabo.style.top = parseInt(cabo.style.top)-shift+'px';
hreg=hreg-shift;
setTimeout (smartMove,delay);
}


function init() {
 trainbox = document.getElementById('trainbox');
    trainbox.style.height = trainboxheight+'px';
    trainbox.style.width = width+'px';
    trainbox.style.position = 'relative';
    trainbox.style.overflow = 'hidden';
 loco = document.getElementById('locomotive');
     cloner = loco.cloneNode(true);
     cloner.setAttribute('id', 'railcar');
   trainbox.appendChild(cloner);
 cars =  document.getElementById('railcar');
     clonertwo = loco.cloneNode(true);
     clonertwo.setAttribute('id', 'caboose');
   trainbox.appendChild(clonertwo); 
 cabo =  document.getElementById('caboose');   
    loco.style.width = width+'px';
    loco.style.position = 'absolute';
    loco.style.top = 0-height+'px';
    cars.style.width = width+'px';
    cars.style.position = 'absolute';
    cars.style.top = '0px';
    cabo.style.width = width+'px';
    cabo.style.position = 'absolute';
    cabo.style.top = height+'px';   
 smartMove();
}
window.onload = init;
</script>


<div id='trainbox'>
<div id='locomotive'>
<a href='http://localhost/'>usually are</a><br>
<a href='http://localhost/'>image links</a>
</div>
</div>
<a onmouseover="shift=1;delay=turbo;">faster up</a><br>
<a onmouseover="shift=1;delay=dreset;">normal up</a><br>
<a onmouseover="shift=1;delay=brakes;">extra slow up</a><br>
<a onmouseover="shift=0;delay=dreset;">full stop</a><br>
<a onmouseover="shift=-1;delay=brakes;">extra slow dn</a><br>
<a onmouseover="shift=-1;delay=dreset;">normal dn</a><br>
<a onmouseover="shift=-1;delay=turbo;">faster dn</a>

**jscheuer1** · 11-09-2011, 02:34 AM

There actually is a way to create a dead zone in the center, and then calculate the speed progressively upon how far up or down you are from that zone, see the motionengine function in the motiongallery2.js file of:

http://www.dynamicdrive.com/dynamici...ongallery2.htm

But for now I chose to just go with what you already had:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Carousel Menu - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#trainbox {
	border: 1px solid red;
}
</style>
</head>
<body>
<script type='text/javascript'>
var height=70;              //set this to the total height of items in locomotive.
var trainboxheight= 50;   //visible (set smaller or equal to above).
var width=180;               //set to width of widest item.
var delay=20;                 //time between steps in msec.
var shift=1;                    //+1 moves the train up, -1 moves it down.

var dreset=delay;
var turbo=delay/4;
var brakes=delay*4;
var shiftreset=shift;
var hreg=height*2;
var loco = null;
var cars = null;
var cabo = null;
var trainbox = null;


function smartMove(){
  if (shift!=0 && hreg==0) {
     loco.style.top = 0-height+'px';
     cars.style.top = '0px';
     cabo.style.top = 0+height+'px';  
     hreg=height*2;  
  } else if (shift!=0 && hreg==height) {
     cars.style.top = 0-height+'px';
     cabo.style.top = '0px';
     loco.style.top = 0+height+'px'; 
  } else if (shift!=0 && hreg==height*2) {
     loco.style.top = 0-height+'px';
     cars.style.top = '0px';
     cabo.style.top = 0+height+'px';  
  } else if (shift!=0 && hreg==height*3) {
     cabo.style.top = 0-height+'px';
     loco.style.top = '0px';
     cars.style.top = 0+height+'px';   
  } else if (shift!=0 && hreg==height*4) {
     loco.style.top = 0-height+'px';
     cars.style.top = '0px';
     cabo.style.top = 0+height+'px';
     hreg=height*2;
  }
loco.style.top = parseInt(loco.style.top)-shift+'px';
cars.style.top = parseInt(cars.style.top)-shift+'px';
cabo.style.top = parseInt(cabo.style.top)-shift+'px';
hreg=hreg-shift;
setTimeout (smartMove,delay);
}


function init() {
 trainbox = document.getElementById('trainbox');
    trainbox.style.height = trainboxheight+'px';
    trainbox.style.width = width+'px';
    trainbox.style.position = 'relative';
    trainbox.style.overflow = 'hidden';
 loco = document.getElementById('locomotive');
     cloner = loco.cloneNode(true);
     cloner.setAttribute('id', 'railcar');
   trainbox.appendChild(cloner);
 cars =  document.getElementById('railcar');
     clonertwo = loco.cloneNode(true);
     clonertwo.setAttribute('id', 'caboose');
   trainbox.appendChild(clonertwo); 
 cabo =  document.getElementById('caboose');   
    loco.style.width = width+'px';
    loco.style.position = 'absolute';
    loco.style.top = 0-height+'px';
    cars.style.width = width+'px';
    cars.style.position = 'absolute';
    cars.style.top = '0px';
    cabo.style.width = width+'px';
    cabo.style.position = 'absolute';
    cabo.style.top = height+'px';   
 smartMove();
}
window.onload = init;
</script>


<div id='trainbox'>
<div id='locomotive'>
<a href='http://localhost/'>usually are</a><br>
<a href='http://localhost/'>image links</a>
</div>
</div>
<a onmouseover="shift=1;delay=turbo;">faster up</a><br>
<a onmouseover="shift=1;delay=dreset;">normal up</a><br>
<a onmouseover="shift=1;delay=brakes;">extra slow up</a><br>
<a onmouseover="shift=0;delay=dreset;">full stop</a><br>
<a onmouseover="shift=-1;delay=brakes;">extra slow dn</a><br>
<a onmouseover="shift=-1;delay=dreset;">normal dn</a><br>
<a onmouseover="shift=-1;delay=turbo;">faster dn</a>
<script type="text/javascript">
document.getElementById('trainbox').onmousemove = function(e){
	e = e || event;
	var offsetel = document.getElementById('trainbox'),
	offset = offsetel.offsetTop, h = offsetel.offsetHeight, y = e.clientY, zone = h / 8,
	pagey = typeof pageY === 'number'? pageY :
		document[document.compatMode === 'CSS1Compat'? 'documentElement' : 'body'].scrollTop;
	while((offsetel = offsetel.offsetParent)){
		offset += offsetel.offsetTop;
	}
	y -= offset - pagey;
	if(y < zone){
		shift=1;delay=turbo;
	} else if (y < 2 * zone){
		shift=1;delay=dreset;
	} else if (y < 3 * zone){
		shift=1;delay=brakes;
	} else if (y < 4 * zone){
		shift=0;delay=dreset;
	} else if (y < 5 * zone){
		shift=-1;delay=brakes;
	} else if (y < 6 * zone){
		shift=-1;delay=dreset;
	} else {
		shift=-1;delay=turbo;
	}
};
document.getElementById('trainbox').onmouseout = function(e){
	e = e || event;
	var rt = e.relatedTarget || e.toElement, tb = document.getElementById('trainbox');
	if(rt && rt === tb){
		return;
	}
	while (rt && (rt = rt.parentNode)){
		if(rt && rt === tb){
			return;
		}
	}
	shift=1;delay=dreset;
}
</script>
</body>
</html>

Notes: I didn't change or even look at your code. I simply added mine at the bottom there using your control variables (shift and delay) copied directly from your control links. Oh, and I added some HTML to make it a valid page, and a border to the trainbox so it would be easier to see when the mouse was over it. Probably would have been fine without those. Any questions though, feel free to ask.

**theforevernewb** · 11-14-2011, 04:13 PM

First things first:
WOW! Thank you very much John! That works so well and so smoothly. I was blown out of the water when I gave it a try.

Moving on:
Your addition is totally over my head... It's going to take me a while to understand it well enough to write something like it myself. I can see what it does and I understand the logic of it, but there's enough unfamiliar stuff that I will have to study it intensively.

In the meantime, may I please roll your work as it is into my script? If you'll indulge me I'd also like to credit you in the script's comments, so please tell me with what you'd like me to put there.

If it helps; the script is intended for a non-profit group involved in promoting a baker's dozen of regional heritage sites and I'll likely post any finished script(s) here for anyone to use after I get done with their project.

Thanks and thanks again!

**jscheuer1** · 11-14-2011, 04:56 PM

Sure, you can put in a comment like:

Code:

// variable speed hover routine thanks to jscheuer1 of http://www.dynamicdrive.com/forums/

at the beginning of the code, and at the end of the routine:

Code:

// end variable speed hover routine

But it's not really necessary.

Thread: Non-coder, hitting a roadblock with first JS.

Thread Tools

Search Thread

Non-coder, hitting a roadblock with first JS.

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions