jQuery: Disable & Enable Plugin based on browser window size?

Question

I've got the following code to add a function depending on browser size, but how do I remove the effects of this plugin if the browser is resized? (Currently it only works if the page is loaded at the specific size, not if it's resized)

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() >= 420) {
          // Enable the plugin to make the tab functionality...
          $( "#tabs" ).tabs();
      }
      else {
        // Code needed to completely disable the tab functionality??
      }
   });
});

score 0 · Answer 1 · answered Apr 08 '13 at 11:30

I normaly create the script with the plug-in, inside a DIV with specific ID, so when I wan to to clear, just remove the ID and the SCRIPT will go with him.

In your case..

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() >= 420) {
          // Enable the plugin to make the tab functionality...
          var tempScript = '<div id="newTempId"><script type="text/javascript" src="../js/plugInScript.js"></script></div>';
          $('body').append(tempScript); // append the DIV with the PlugIn script inside
          $( "#tabs" ).tabs();
      }
      else {
        // Code needed to completely disable the tab functionality??
        $( "#tabs" ).tabs({ disabled: [ 0, 2 ] }); // see API info at http://api.jqueryui.com/tabs/#option-disabled
        $('newTempId').remove(); // Remove the DIV that include the script
      }
   });
});

OR/And... include a responsive CSS file, based on the window size.

<link href="../css/responsive_style.css" rel="stylesheet" type="text/css" media="screen and (min-width:419px)" />

Hope it helps, Good Luck

Hi, So with your solution, does this hide the tabbed content or simply just remove the script? - As I still need the content displayed when the script is removed. — CodeyMonkey, Apr 09 '13 at 06:51
Will remove everything inside `#newTempId` div from the `DOM`, in my example, only the script and his functionality. (Unless you put/move the tabbed content inside it). If you want to give us a working example, we can try to adjust for your needs. — gmo, Apr 09 '13 at 10:59

Simon · Answer 2 · 2013-04-08T12:10:42.890

0

If you're using the jQuery UI tabs plugin (I guess so):

var $win = $(window),
    $tabs = $( "#tabs" );

$win.resize(function() {
  if ($win.width() >= 420 && !$tabs.is('.tabbed') {
      // Enable the plugin to make the tab functionality...
      $tabs.tabs().addClass('tabbed').removeClass('destroyed');
  } else if(!$tabs.is('.destroyed')) {
      // remove plugin functionality and add class
      // so we don't try to execute this on every resize
      $tabs.tabs('destroy').addClass('destroyed').removeClass('tabbed');
  }
});

edited Apr 08 '13 at 12:10

answered Apr 08 '13 at 11:40

Simon

7,182
2
26
42

Hi, - I'm not using jQuery UI i'm afraid :( - I don't suppose you have a generic solution out of interest? Let me know if you need anything from me :) - I'm actually using this - http://os.alfajango.com/easytabs/ – CodeyMonkey Apr 09 '13 at 06:52
But doesn't this plugin init with `.easytabs()` not `.tabs()`? Couldn't find any demo on easytabs' page which calls `.tabs()`... – Simon Apr 09 '13 at 07:46

jQuery: Disable & Enable Plugin based on browser window size?

2 Answers2

Linked