Solved

onmousedown not working

Posted on 2009-07-02
11
527 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
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

803 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