Solved

onmousedown not working

Posted on 2009-07-02
11
528 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
  • 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 5

Accepted Solution

by:
Opalelement earned 250 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

860 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