Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: DIV onResize FF

  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts

    DIV onResize FF

    there is the peace of code
    Code:
      <div id="header" style = "Height:100px" onResize = "alert('a')">
          header
          <INPUT TYPE="BUTTON" VALUE="click"           
           ONCLICK="this.parentNode.style.height = '300px';" >
      </div>
    it resizes on click, but onResize doesn't get fired on FF, works on IE ok.
    wierd coz body.onResize works ok on both ?

    link to test page:

    http://86.61.66.17:8084/AgroZoo/testHTML/testHTML.jsp


    Thanks for tips.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,795
    Thanks
    19
    Thanked 156 Times in 147 Posts
    I think you should read this: http://www.w3schools.com/jsref/jsref_onresize.asp.

    "The onresize event occurs when a window or frame is resized."

    Ask yourself: Are you resizing the window or a frame?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts
    quote from link given:

    Supported by the following HTML tags:

    <a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>

    Supported by the following JavaScript objects:

    window
    how can I interprete this ?

    Should <DIV onResize = " ...... work or not ?

    Works on IE , so ?

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,795
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Forgive me if I am stating the obvious, but you are resizing a DIV, not the entire window or a frame...So the onresize event will not fire...

    you can use the onresize event in virtaully any HTML tag, but it will only fire when the window or a frame is resized.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts
    ok, thanks for explanation of the obvious that was not so obvios (-: to me
    especialy when I was looking at IE which works regardles of this rull, as you can see on test page.

    Anyway, lets say that I have DIV, button on it, and on click button reproduces itself into its clone --> div gets resized.
    Is there a way to catch that resize ? leaving out the obvious--> doing something right after adding another button.

    Regards.

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,795
    Thanks
    19
    Thanked 156 Times in 147 Posts
    you're using an IE-only application of onresize: http://msdn.microsoft.com/workshop/a...s/onresize.asp

    That's JScript, not JavaScript (IE's proprietary version of JS)....But that is why your application of onresize works in IE...

    Is this what you are after (I had trouble understanding your last post)? This generates an alert message after the div is resized, in both browsers:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <title>Untitled Document</title>
    
    <script type="text/javascript">
    
        function doit()
        {
            if (document.getElementById('header').style.height != '300px')
            {
                document.getElementById('header').style.height = '300px';
                alert('aaaaaaaa')
            }
        }
    
    </script>
    
    </head>
    
    <body>
    
    <div id="header" style="height:100px;background-color:blue;">
        <p>header <input type="button" value="click" onclick="doit();" /></p>
    </div>
    
    </body>
    
    </html>
    Last edited by chump2877; 02-03-2007 at 03:04 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #7
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Created a sample to explain myself. Click on button(many times). Extensible div gets filled with buttons. At one point gets resized as defined by normal flow. I would somehow like to catch that event.
    This is just a sample , in real case there are inner div-that gets expanded, .....

    http://86.61.66.17:8084/AgroZoo/testHTML/testHTML.jsp

    again: works with JScript, but would like to have something cross browser.

    Regards
    Last edited by BubikolRamios; 02-03-2007 at 07:07 PM.

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,795
    Thanks
    19
    Thanked 156 Times in 147 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    <style type="text/css">
    <!--
    
    input, p
    {
        margin:0;
    }
    
    input
    {
        width:40px;
    }
    
    -->
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <title>Untitled Document</title>
    
    </head>
    
    <body>
    
    <div id="header" style="width:200px;background-color:blue;">
        <p><span>header <input type="button" id="button" value="click" onclick="doit();" /></span></p>
    </div>
    
    <script type="text/javascript">
    <!--
    
    var num = 0;
    
    function doit()
    {
        var divObj = document.getElementById('header');
        var inputObj = document.getElementById('button');
        var newInput = inputObj.cloneNode(true);
    
        if (divObj.getElementsByTagName("span")[num].offsetWidth <= 200 - 40)
        {
            divObj.getElementsByTagName("span")[num].appendChild(newInput);
        }
        else
        {
            num++;
            alert('aaaaaaaa');
            var newLine = document.createElement("p");
            var newSpan = document.createElement("span");
            newSpan.appendChild(newInput);
            newLine.appendChild(newSpan);
            divObj.appendChild(newLine);
        }
    }
    
    -->
    </script>
    
    </body>
    
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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