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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    oresize fires twice

    Hello everybody,
    I'm new to javascript so please excuse my ignorance.

    Can someone help me understand why onresize event fires twice?
    I have the following piece of code:

    <script language=" javascript">

    function MyResize()
    {
    alert('MyResize function!');
    }

    </script>

    <body onresize="MyResize();">
    <h1> Just a test </h1>
    </body>

    and every time I resize the window the message in my function appears twice.

    Thank you

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    i don't know, but...

    Frankly I don't know. maybe because the resize event means both X and Y resize... (Yet that occures even when drag the window on a single axis). Maybe because the alert() fuction is called both by resize and reload events... I don't know.

    But, if you want to solve this problem, here's a solution to get rid of this double mess:

    insert a condition which changes after the first alert is made, let's say a variable, something like:

    Code:
    <script>
    var varResize = 0;
    function MyResize() 
    {
      if(varResize ==0) {
        varResize = 1;
      }
    else {
        alert('MyResize function!');
        varResize = 0;
      }
    } 
    </script>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion.
    I have already tried this workaround. But, what if one day the implementation of onresize changes and the event it will fire three times or just once?

    The workaround serves the purpose for what I am doing right now, but I would prefer to find out the correct behavior of onresize event (which doesn't seem to be specified in MSDN).

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've never seen onresize attached to body before - afaik it's an event of window, so

    window.onresize = function() { whatever; }

    See if that makes this double-firing problem go away.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    brothercake...

    <body onresize = window.onresize

    Really bizarre. Only in IE, afaik. I got 3 repeats:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    n = 1
    function MyResize()
    {
    window.status += (n++)+' ';
    }
    
    onresize = MyResize;
    
    </script>
    </head>
    <body>
    </body>
    </html>
    googled to no avail. Weird.

  • #6
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It still fires twice using the code above. The easiest way to see it is by minimizing/maximizing the window.

  • #7
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Probably the best way I've seen to manage resizes (sometimes, I think depending on rendering mode, the frequency/number of resize events changes) is to create two functions: one for onResize, and one for onFinishResize (of course that's not a real event, but hang with me.) Check it:
    Code:
    <script type="javascript">
    window.onresize = function () {
        window.clearTimeout('resizeTimer');
        resizeTimer = window.setTimeout(finishResize, 1000);
    }
    function finishResize () {
        // do whatever you really need to do here
    }
    </script>
    Your real function should be finishResize. The anonymous window.onresize function really becomes nothing more than a queue manager.

    HTH.

  • #8
    New to the CF scene
    Join Date
    Oct 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Choopernickel.
    I have tried the code you wrote and unfortunately it doesn't solve the problem.
    If the function looks like this

    function finishResize () {
    // do whatever you really need to do here
    alert('MyResize');

    }

    when minimizing/maximizing the window the message shows twice.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    I think this has to do with event bubbling - but otherwise, it's a mystery.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    var n = 1;
    function MyResize()
    {
    	window.status += '#' + (n++) + ' ';
    }
    
    onresize = MyResize;
    
    </script>
    </head>
    <body>
    </body>
    </html>
    Remove the doctype - which makes the HTML element the outermost container (IE) - and you get two resize events firing, instead of three. Nothing seems to alter this behavior.
    Last edited by adios; 10-29-2003 at 08:27 AM.

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using IE? I can sometimes get up to around 7 onresize events firing after one resize. Although this will decrease the effeciency of your program, I've never seen it actually _matter_.

    Interestingly, Moz and I think Op get around this problem by firing a single onresize event at the end of the resizing period. This means if you're handling that event, the page may look screwy until the user lets go of the mouse, and the onresize event is fired. I think I prefer the IE way, myself.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I agree with 'me.

    In IE, onresize is fired as the user resizes the window without releasing the mouse. In NS/Moz, onresize only fires once when the mouse is released.

    Test the code I posted in this post:

    http://www.codingforums.com/showthre...threadid=26444

    In that code, I prefer that onresize is fired as the mouse is dragged without releasing it. That way, the resizing of frame is "smooth".
    So, multiple invocation of onresize event has advantages and disadvantages depending on how you use it. In the case of the code I posted, it is an advantage.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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