We help IT Professionals succeed at work.

FLOATING DIV and FIREFOX PROBLEM

Vadymus
Vadymus asked
on
Medium Priority
779 Views
Last Modified: 2007-12-19
Thank you for looking at my problem. This nice code below works well in IE. Floating DIV element can be moved and dragged around the page.
Firefox, however, does not allow typing in the text field. Seems like dragging method covers HTML functionality. Can anyone help? Could it be a CSS "clear" method to be used?

<HTML><HEAD>

<style type="text/css">
.drag{
      position:relative;
      cursor:hand
      top: 120px;
      left: 130px;
}
#vunet{
      background-color:#F4F4F4;
      cursor:move;
      width:190px;
      filter:alpha(opacity=85);
      -moz-opacity:.85;
      opacity:.85;
}
</style>
<script type="text/javascript">



var ie = document.all;
var ns6 = document.getElementById && !document.all;
var dragapproved=false;
var z, x, y;
function move(e) {
  if (dragapproved) {
    z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x;
    z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y;
    return false;
  }
}
function drags(e) {
  if (!ie&&!ns6)
  return;
  var firedobj = ns6? e.target : event.srcElement;
  var topelement = ns6? "HTML" : "BODY";
  while (firedobj.tagName != topelement&&firedobj.className != "drag") {
    firedobj = ns6? firedobj.parentNode : firedobj.parentElement;
  }
  if (firedobj.className == "drag") {
    dragapproved = true;
    z = firedobj;
    temp1 = parseInt(z.style.left+0);
    temp2 = parseInt(z.style.top+0);
    x = ns6? e.clientX: event.clientX;
    y = ns6? e.clientY: event.clientY;
    document.onmousemove=move;
    return false;
  }
}
document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");
</script>
</HEAD><BODY>
CHECK TRANSPERANCY

<div id="vunet" class="drag" style="position: absolute; top: 120px; left: 130px;">
  <table><tr><td><input type="text"></td></tr></table>
  <table><tr><td><a href='http://www.vunet.us'>LINK</a></td></tr></table>
</div>

</BODY></HTML>
Comment
Watch Question

Hi Vadymus,

[These are not solutions, just things I saw]
Right click seems to work to get the mouse into the textarea.
Maybe you could just focus() immediatly into the textfield whenever the user has finshed moving that floating div.

Joe P

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Hm, what you noticed could be a solution... I wonder why is it like that?

This worked: onFocus="this.focus();"
hehe, nice trick =)
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.