SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HELP!!! How do I set a div width through the onresize event?

    Hello -

    I am trying to set a div width through the onresize event. For some reason, I am able to set the height ok. When setting the width, it will set once and then both the height and the width will not respond to the onresize event anymore. I basically want the div to resize whenever the browser is resized.

    To demonstrate what I mean, copy and paste this code into a htm file. Add long strings of text to the div so that it will scroll both horizontally and vertically. Notice when resizing, the resize will get called once, but when resizing again it will not. Comment out the width line, and now the resizing will always get called.

    Here is the code:

    <script language="javascript">
    function ResizeGrid()
    {
    myDiv.style.height = document.body.clientHeight - 50;
    myDiv.style.width = document.body.clientWidth - 20;
    }
    </script>

    <TABLE id="Table1" style="POSITION: absolute; TOP: 2px" cellSpacing="1"
    cellPadding="1" border="0" onresize="ResizeGrid();">
    <tr>
    <td>
    <div id="myDiv" style="overflow:auto">
    text here
    </div>
    </td>
    </tr>
    </table>

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm no JS expert, but the only way I've seen this work is if you refresh the page on resize and have that code in the head of the page. I may be wrong since I don't meddle in these things very often, but I have a script that does something similar. I pain, granted, but it works.

    G

  3. #3
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Figured it out

    I figured it out! I needed to add window.onresize = ResizeGrid; and remove the ResizeGrid from the table element.

    <script language="javascript">
    window.onresize = ResizeGrid;
    function ResizeGrid()
    {
    myDiv.style.height = document.body.clientHeight - 50;
    myDiv.style.width = document.body.clientWidth - 20;
    }
    </script>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •