onmousedown not working

Hi,

I have several overlapping divs. I have set up a function to make any of the divs come to the forefront onmousedown, but it's not working, and I don't know why. Changing onmousedown to onclick makes it work, but I need it to work without releasing the mousebutton.

                   <div id="h1" onmousedown="zi(this);" style="background-color:Black;color:White;width:100%;font-weight:bold;"><a style="padding:5px">test</a></div>

var zx=1;

function zi(obj)
{
obj.parentNode.style.zIndex=zx;
zx=zx+1;
}


Feivi99Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mohan_sekarCommented:
Do you have this problem in IE or Firefox?
0
OpalelementCommented:
If all it does is brings it to the front, why do you need it to be mousedown? It seems like you could use click if thats all that happens...

Either way, some problems:
1. obj.parentNode.style... Why the parentNode? Essentially that means that by clicking the div, you want its parent (probably the body) to come to the front.
2. You need to make sure you have position:absolute set for the div.

I got the code snippet here to work, alternate the red and black by clicking them. (IE8, Chrome, IE8 Compatibility Mode, and FF3 compatible)
<div id="h1" onmousedown="zi(this);" style="position:absolute;background-color:Black;color:White;width:50%;font-weight:bold"><a style="padding:5px">test</a></div>
 
<div id="h2" onmousedown="zi(this);" style="background-color:red;color:White;width:50%;font-weight:bold;position:absolute;top:20px;left:20px"><a style="padding:5px">test</a></div>
 
<script>
var zx=1;
 
function zi(obj)
{
obj.style.zIndex=zx;
zx=zx+1;
}
</script>

Open in new window

0
Feivi99Author Commented:
Opalelement,

The reason for the parentNode is because this div is the handle to drag its parent div. Putting position:absolute on them messes them up. Now strange enough, I have another div under that which serves as the main content container for the parent div. I have that as position:relative, and the onmousedown worked for that. So I tried adding position:relative here too, but it still didn't work...??

Here's the full code for the parent div:

<div id="d1" class="rma" style="position:absolute;top:0px;width:400px;height:370px;float:left; border-style:none;background-color:white;z-index:1">
                   <div id="h1" onmousedown="zi(this)" style="position:relative;background-color:Black;color:White;width:100%;font-weight:bold;border-style:solid;border-width:1px;border-color:Silver;">
                   <a style="padding:5px">Web</a></div>
                    <div id="web" onmousedown="zi(this)" style="position:relative;width:100%;height:94%;overflow-x:hidden;overflow-y:auto" ></div>
                   </div>


var zx=6;

function zi(obj)
{
obj.parentNode.style.zIndex=zx;
zx=zx+1;
}
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

OpalelementCommented:
So basically all that is one box?

If so, I did this to test them. Cross-browser. I made two of the boxes and now I can just click one or the other and it comes to the front.
<div id="d1" class="rma" style="position:absolute;top:0px;width:400px;height:370px;float:left; border-style:none;background-color:white;z-index:1">
                   <div id="h1" onmousedown="zi(this)" style="position:relative;background-color:Black;color:White;width:100%;font-weight:bold;border-style:solid;border-width:1px;border-color:Silver;">
                   <a style="padding:5px">Web</a></div>
                    <div id="web" onmousedown="zi(this)" style="background:red;position:relative;width:100%;height:94%;overflow-x:hidden;overflow-y:auto" ></div>
</div>
 
<div id="d1" class="rma" style="position:absolute;top:50px;left:50px;width:400px;height:370px;float:left; border-style:none;background-color:white;z-index:1">
                   <div id="h1" onmousedown="zi(this)" style="position:relative;background-color:blue;color:White;width:100%;font-weight:bold;border-style:solid;border-width:1px;border-color:Silver;">
                   <a style="padding:5px">Web</a></div>
                    <div id="web" onmousedown="zi(this)" style="background:green;position:relative;width:100%;height:94%;overflow-x:hidden;overflow-y:auto" ></div>
</div>
 
<script>
var zx=6;
 
function zi(obj)
{
obj.parentNode.style.zIndex=zx;
zx=zx+1;
}
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Feivi99Author Commented:
Well, I solved the mystery. As mentioned in the original post, I am using a "drop-and-drag" script which turns the "h" divs into handles. It seems that that script is somehow interfering with the onmousedown action. onclick and onmouseover work fine. So I'll either have to use a different d-a-d script, or content myself with on of the other mouse events...
0
OpalelementCommented:
I don't see what the problem is with what I gave you above, it is working the way you asked. If there is another problem I will be glad to help.
0
Feivi99Author Commented:
Opalelement,

The h1 and h2 divs function as handles to drag the parent div around the screen. This was accomplished by using the drag script found at http://www.dynamicdrive.com/dynamicindex11/domdrag/. (The actual script is http://www.dynamicdrive.com/dynamicindex11/domdrag/dom-drag.js)

I then added the following code to the page:

 var theHandle = document.getElementById("h1");
var theRoot = document.getElementById("d1");
var theHandle2 = document.getElementById("h2");
var theRoot2 = document.getElementById("d2");

Drag.init(theHandle, theRoot);
Drag.init(theHandle2, theRoot2);

I think that something in that js file which is applied to the h1 and h2 divs is interfering with the onmousedown. When I deleted the above script, the onmousedown worked fine. If you could find a way to modify the script to make it work with onmousedown, that would be amazing...
0
OpalelementCommented:
Oh I see the problem, the script is setting the onmousedown function as well...

Try this...
On your title bars for the divs, take out the onmousedown. However, leave the ones on the content areas. So take out the onmousedown for only the handles.

Then in the JS, find:

      drag : function(e)
      {
            e = Drag.fixE(e);
            var o = Drag.obj;

After that, add this:

o.parentNode.style.zIndex=zx;
zx=zx+1;

That works for me, I can drag with the title bars and when clicking a title bar to drag it comes to the front. If i click the content area of the floating box, it comes to the front but you cannot drag it.
0
Feivi99Author Commented:
Opalelement,

You're really being a tremendous help! It works with one small caveat; it's not enough to just click the handle, one has to also drag it for the z-index to change, but that's not a big deal. Great work! Thanks!
0
OpalelementCommented:
My bad, that is my fault. I put it in the wrong spot.

      start : function(e)
      {
            var o = Drag.obj = this;
            e = Drag.fixE(e);

Add this after that and take it away from the drag function:

o.parentNode.style.zIndex=zx;
zx=zx+1;
0
Feivi99Author Commented:
Beautiful. Much thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.