CODEWITHSUNDEEP
javascript
Thomas
Thomas

Reputation: 34188

need javascript cross browser solution?

here i am giving my javascript which is working fine for IE but not working properly in FireFox. so please tell me what to change in my javascript to run it properly in firefox too.

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>

Upvotes: 0

Views: 268

Answers (1)

Tolgahan Albayrak
Tolgahan Albayrak

Reputation: 1759

use

            modalWindow.style.left = dime.x + "px";
            modalWindow.style.top = dime.y + "px";
            modalWindow.style.width = dime.w + "px";
            modalWindow.style.height = dime.h + "px";

i mean put "px" after dimensions.. otherwise firefox will not understand your unit type :))

Upvotes: 1

Related Questions