DIV position problem generated dynamically from javascript

Question

here i generate a div from javascript and position over the text box.

i found two problem 1) my code is working only for IE. 2) text inside in div is not getting positioned vertically center.

here is my code.

<html xmlns="http://www.w3.org/1999/xhtml" >  
  <head id="Head1" runat="server">  
  <title>Untitled Page</title>  
  <script type="text/javascript" language="javascript">
  var modalWindow = null;

  function drawDiv() {
    var txt = document.getElementById('TextBox1');
    var dime = new Dimension(txt);
    modalWindow = document.createElement('div');
    modalWindow.style.position = 'absolute';
    modalWindow.setAttribute("align", "center");
    modalWindow.setAttribute("vertical-align", "middle");
    modalWindow.innerHTML = '<p>hello...</p>';
    modalWindow.style.left = dime.x;
    modalWindow.style.top = dime.y;
    modalWindow.style.width = dime.w;
    modalWindow.style.height = dime.h;
    modalWindow.style.backgroundColor = '#C0C0C0';
    document.body.appendChild(modalWindow);
    return false;
  }

  function hider(whichDiv) {
    document.getElementById(modalWindow).style.display = 'none';
  }

  function Dimension(element) {
    this.x = -1;
    this.y = -1;
    this.w = 0;
    this.h = 0;
    if (element == document) {
      this.x = element.body.scrollLeft;
      this.y = element.body.scrollTop;
      this.w = element.body.clientWidth;
      this.h = element.body.clientHeight;
    }
    else if (element != null) {
      var e = element;
      var left = e.offsetLeft;
      while ((e = e.offsetParent) != null) {
        left += e.offsetLeft;
      }
      var e = element;
      var top = e.offsetTop;
      while ((e = e.offsetParent) != null) {
        top += e.offsetTop;
      }
      this.x = left;
      this.y = top;
      this.w = element.offsetWidth;
      this.h = element.offsetHeight;
    }
  }
   </script>  
</head>  
<body>  
<div>
<form id="form1" runat="server">

   <asp:TextBox ID="TextBox1" runat="server" Height="180px" Style="left: 307px; position: relative;  
       top: 264px" TextMode="MultiLine" Width="432px"></asp:TextBox>
    <asp:Button ID="Button1" runat="server"  
        Text="Button" OnClientClick=" return drawDiv()"  />  
</form>
</div> 
</body>  
</html>

basically i was trying to place a div just on the multiline text box to prevent user to access that multiline text box. my code is working fine in IE but not working properly in firefox. when i run the code in firefox then div is not getting position properly on the textbox. i think my javascript is not crossbrowser. so please rectify my javascript to make it crossbrowser.

thanks

Answer 1

Javascript

function disable(id) {
  var txt = document.getElementById(id);
  txt.disabled = true;
  return false;
}

ASP

<asp:Button ID="Button1" runat="server" Text="Button"
     OnClientClick="return disable('TextBox1')"  />

Note: you can also hide the textbox if you want.

DIV position problem generated dynamically from javascript

Question

1 answers

solution1
1 ACCPTED 2010-11-17 09:33:14

DIV position problem generated dynamically from javascript

Question

1 answers

solution1 1 ACCPTED 2010-11-17 09:33:14

solution1
1 ACCPTED 2010-11-17 09:33:14