[thelist] containing DIV blocks events?

Tom Dell'Aringa pixelmech at yahoo.com
Thu May 30 11:27:01 CDT 2002


Hi Everyone,

I'm still working on my slider controls, and I've caught a bit of a snag. I want to move all my
controls at once when a frame resizes (instead of ref'ing every single one and moving it
individually) so I figured I would place them all in a DIV absolutely positioned, and simpy move
that object instead.

The problem is this: the sliders work fine -- until the controls are placed inside the DIV tag.
Once they are in there, they won't drag. It almost seems like the onMouseDown event is blocked --
but it isn't because I can fire off an alert() on the mouse down -- yet no drag.

Move the stuff out of the div..works fine.

Here is a sample of my DIV set up:

===================================

<div id="temp" style="position: absolute; top: 10; left: 10; z-index; 0; border-style: solid;
border-color: silver; width: 400; height: 400;">

<div id="slider"></div>
<div id="knob"></div>

<div>

====================================

The z-index's for 1 and 2 are also set in the style (to either 1 or 2) so they should be above the
containing element. Here is a sample of one of the slider styles (ie. "knob")

#knob { position:absolute; left:50; top:118; width:8; height:14; z-index:2;
background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px
8px 14px 0px);}

Somehow containing my elements in a DIV blocks the script from working completely. Any ideas?
Below is the script.

Tom

------------------------------------

function init() {
	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp

	sliderMin = 70;
	sliderMax = 326;

	isActive = false;

	knob = knob.style;
	knob.xpos = knob.offsetLeft;
	knob.ypos = knob.offsetTop;
	knob.w = knob.clientWidth;
	knob.h = knob.clientHeight;
}


function mouseDown(e) {
	if (event.button != 1) return true;         //can't drag with right button, stops event.
	var x = event.x + document.body.scrollLeft;
	var y = event.y + document.body.scrollTop;

	//makes sure you grabbed the knob, sets drag to active
	if ((x > knob.xpos) && (x < knob.xpos + knob.w) && (y > knob.ypos) && (y < knob.ypos + knob.h)) {

		isActive = true;

		//item pointer
		dragObject = knob;
	}

	if (isActive == true){
		//are we on the knob? if not return false -- i think...
		if ((x >= dragObject.xpos) && (x <= dragObject.xpos + dragObject.w)) {
			//where 'x' is on the knob
			dragObject.dragOffsetX = x - dragObject.xpos
		}
	return false

	} else {

	return true
   }
}


function mouseMove(e) {
	var x = event.x + document.body.scrollLeft; //scroll values will be 0 if no scrolling
	var y = event.y + document.body.scrollTop;

	if (isActive) {
		rMoveTo = x - dragObject.dragOffsetX;
			if (rMoveTo > sliderMax) rMoveTo = sliderMax;
			if (rMoveTo < sliderMin) rMoveTo = sliderMin;
		knob.xpos = rMoveTo;
		knob.left = knob.xpos;
		rValue = (knob.xpos + 4) - 50; //50 is left position of knob, 4 is half the width of knob
	}
	return true
}

function mouseUp(e) {
	var x = event.x + document.body.scrollLeft
	var y = event.y + document.body.scrollTop

	isActive = false
	return true
}

__________________________________________________
Do You Yahoo!?
Yahoo! - Official partner of 2002 FIFA World Cup
http://fifaworldcup.yahoo.com



More information about the thelist mailing list