Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

onmousedown not working

Posted on 2009-07-02
11
Medium Priority
?
535 Views
Last Modified: 2012-05-07
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;
}


0
Comment
Question by:Feivi99
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
11 Comments
 
LVL 15

Expert Comment

by:mohan_sekar
ID: 24769219
Do you have this problem in IE or Firefox?
0
 
LVL 5

Expert Comment

by:Opalelement
ID: 24769637
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
 

Author Comment

by:Feivi99
ID: 24769753
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 5

Accepted Solution

by:
Opalelement earned 1000 total points
ID: 24769812
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
 

Author Comment

by:Feivi99
ID: 24772868
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24772918
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
 

Author Comment

by:Feivi99
ID: 24773020
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24773233
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
 

Author Comment

by:Feivi99
ID: 24773449
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
 
LVL 5

Expert Comment

by:Opalelement
ID: 24773485
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
 

Author Comment

by:Feivi99
ID: 24773918
Beautiful. Much thanks!
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question