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 15 of 15
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Script creating infinite loop, crashing browser... I think

    Hello, I'm trying to destroy a function on smaller window widths and then reactivate it on larger window widths but in the process am crashing my browser because once I destroy the function the only way I can figure out how to reactivate the function is re initialize it within it's own function. Wondering how I could do the following differently?

    Code:
    function initFunction() {
    
        jQuery('#myid').myplugin({ uniquepluginattribute: 0 });
    
        $(window).resize(function() {  
            if ($(window).width() <= 765) {
                jQuery('#myid').myplugin('destroy');
            } else {
                
                // reinitializing the function because in case it was destroyed.
                jQuery(function(){
    	            initFunction();
                });
    
                jQuery('#myid').myplugin({ uniquepluginattribute: 0 });
            }
        });
    
    }
    Last edited by wyclef; 09-15-2013 at 02:17 PM.

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i tried something to check and see if that function exists or not already, do nothing... but it's not working... this is the latest. i think my first one was better because it also didnt work but was simpler.

    Code:
    function initFunction() {
    
        jQuery('#myid').myplugin({ uniquepluginattribute: 0 });
    
        $(window).resize(function() {  
            if ($(window).width() <= 765) {
                jQuery('#myid').myplugin('destroy');
            } else if (typeof initFunction == 'initFunction') { 
       
            } else {
                jQuery(function(){
    	            initFunction();
                });
    
                jQuery('#myid').myplugin({ uniquepluginattribute: 0 });
            }
        });
    
    }

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    As an alternate, why not put
    Code:
    if ($(window).width() > 765) {
    in your
    ('#myid').myplugin function.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    can you elaborate? i am confused how that would help. thanks.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    He is saying, if it is YOUR plugin, just make the plugin do NOTHING when the width is smaller than the minimum. That is, never destroy or recreate the plugin. Change the code *IN* the plugin.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    it's not my plugin but you know, in the world of plugins galore that's a pretty good idea that didn't even cross my mind. i'll take a look and see if i can handle it.

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Thumbs up

    ok, i looked into the plugin src real quick. started to panic. but forced me back to rework the idea. something like the following actually is kind of working for my purposes. wondering what people think of it and how it could be simplified. those styles could clearly be moved to media queries in the css so i'd really just be switching the ID back and forth, but for the purposes of you guys understanding this I left them in.

    Code:
    function initFunction() {
    
        jQuery('#myid').myplugin({ uniquepluginattribute: 0 });
        
        if ($(window).width() <= 765) {
            jQuery('#myid').attr('id', 'mobile-myid');
        }
        
        $(window).resize(function() {  
            if ($(window).width() <= 765) {
                jQuery('#myid').attr('style', 'display: none');
                jQuery('#myid').attr('id', 'mobile-myid');
                jQuery('#mobile-myid').attr('style', 'display: block');
            } else {
                jQuery('#mobile-myid').attr('id', 'myid');
                jQuery('#myid').myplugin({ duration: 300 });
            }
        });
    
          
    }

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hey, the top code seems to work well. I guess my only complaint with it is that the browser width number seems to be different from browser to browser. One thing I'm trying to do now is destroy if less than ie9... this is what i'm using but it's not working. pretty sure i have the syntax correct?
    Code:
    if($.browser.msie && parseFloat($.browser.version)<8) {
            jQuery('#myid').myplugin('destroy');
        }
    was placing it under the resize function

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Window resize event is triggerred multiple times by browsers in different frequencies. You need to debounce your handler to avoid that and execute the handler only once.
    Glenn
    ____________________________________

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

  • #10
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    neat, reading up on debounce. this is cool. not sure how to use it yet but this will be useful.

  • #11
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    hmmm... reading up on debounce I'm wondering if throttling is more what I would be interested in. This guys plugin looks pretty good.

    http://benalman.com/projects/jquery-...bounce-plugin/

  • #12
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    hey, this throttling thing looks cool. say i want to use this guys
    Code:
    $(window).resize( $.throttle( 250, resize_2 ) );
    to bind my resize function... how would i do this? as my resize function doesn't have a typical function name.

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Like this?
    Code:
    $(window).on('resize',  $.throttle(250, function() {
        //...
    }));
    Glenn
    ____________________________________

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

  • #14
    Regular Coder
    Join Date
    Feb 2005
    Posts
    191
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i think something more like this is what i'm looking for??? just not sure if i'm writing it correctly.

    Code:
    function initFunction() {
    
        jQuery('#myid').myplugin({ uniquepluginattribute: 0 });
        
        if ($(window).width() <= 765) {
            jQuery('#myid').attr('id', 'mobile-myid');
        }
        
        $(window).resize(function() {  
            if ($(window).width() <= 765) {
                jQuery('#myid').attr('style', 'display: none');
                jQuery('#myid').attr('id', 'mobile-myid');
                jQuery('#mobile-myid').attr('style', 'display: block');
            } else {
                jQuery('#mobile-myid').attr('id', 'myid');
                jQuery('#myid').myplugin({ duration: 300 });
            }
        });
    
        $(window).resize($.throttle(250, function());  
    }

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You only need to attach the window resize event handler once.

    Code:
    $(window).on('resize', $.throttle(250, function () {
        if ($(window).width() <= 765) {
            jQuery('#myid').attr('style', 'display: none');
            jQuery('#myid').attr('id', 'mobile-myid');
            jQuery('#mobile-myid').attr('style', 'display: block');
        } else {
            jQuery('#mobile-myid').attr('id', 'myid');
            jQuery('#myid').myplugin({
                duration: 300
            });
        }
    }));
    And starting jQuery 1.7, using .on() is the recommended way to attach event handlers.
    Last edited by glenngv; 09-18-2013 at 02:58 AM.
    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
    •