[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