[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 764
  • Last Modified:

FLOATING DIV and FIREFOX PROBLEM

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>
0
Vadymus
Asked:
Vadymus
  • 2
1 Solution
 
BogoJokerCommented:
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
0
 
VadymusAuthor Commented:
Hm, what you noticed could be a solution... I wonder why is it like that?

This worked: onFocus="this.focus();"
0
 
BogoJokerCommented:
hehe, nice trick =)
0

Featured Post

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.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now