Solved

onmousedown not working

Posted on 2009-07-02
11
525 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now