Assign a value depending on window width using jQuery

I am using the bigSlide.js (http://ascott1.github.io/bigSlide.js/) plugin to create a slide-in menu.

I'm able to enter my own value for the width of the menu, which I've set to 250px, this is then used later in the code. The site is responsive so what I would like to happen is for the value to change depending on the window width, ie. window width 600px or less - the menu width be 100px, and if the window width is larger than 600px - the menu width be 250px.

Is this possible to do? If so, would someone be kind enough to show me how, thanks.

jQuery(function($) {
  'use strict';

  $.fn.bigSlide = function(options) {

    var settings = $.extend({
      'menu': ('#menu'),
      'push': ('.push'),
      'side': 'right',
      'menuWidth': '250px',
      'speed': '300'
    }, options);

    var menuLink = this,
        menu = $(settings.menu),
        push = $(settings.push),
        width = settings.menuWidth;

    var positionOffScreen = {
      'position': 'fixed',
      'top': '0',
      'bottom': '0',
      'settings.side': '-' + settings.menuWidth,
      'width': settings.menuWidth,
      'height': '100%'
    };

    var animateSlide = {
      '-webkit-transition': 'all' + ' ' + settings.speed + 'ms ease',
      '-moz-transition': 'all' + ' ' + settings.speed + 'ms ease',
      '-ms-transition': 'all' + ' ' + settings.speed + 'ms ease',
      '-o-transition': 'all' + ' ' + settings.speed + 'ms ease',
      'transition': 'all' + ' ' + settings.speed + 'ms ease'
    };

    menu.css(positionOffScreen);
    push.css(settings.side, '0');
    menu.css(animateSlide);
    push.css(animateSlide);

    menu._state = 'closed';

    menu.open = function() {
      menu._state = 'open';
      menu.css(settings.side, '0');
      push.css(settings.side, width);
    };

    menu.close = function() {
      menu._state = 'closed';
      menu.css(settings.side, '-' + width);
      push.css(settings.side, '0');
    };

    menuLink.on('click.bigSlide', function(e) {
      e.preventDefault();
      if (menu._state === 'closed') {
        menu.open();
      } else {
        menu.close();
      }
    });

    return menu;

  };

}(jQuery));

Answers


You can use $(window).resize to detect when the window is resized.

Working example of window resize with width change using bigSlide.js

jsfiddle

------------------ UPDATED --------------------

You can probably add the resize code right before line return menu;

-But what would be kind of an issue is updating the value of menuWidth because it passes its value to other variables. So you need to update whatever lines of code are affected by it.

// examples from plugin code
width = settings.menuWidth;

var positionOffScreen = {
      'settings.side': '-' + settings.menuWidth,
      'width': settings.menuWidth
};

menu.css(positionOffScreen);

To keep from repeating the same code, you should encapsulate the code into a function. Then you can call the function when .bigSlide() is instantiated and again whenever the window.resize event is fired.

-I updated the JSFIDDLE with the resize event integrated with the plugin. Try to optimize it if you can. -jQueryLearning-Plugins can help you get a basic understanding of plugin development.

// TEST
$(window).resize(function(){
    // Get window width
    var window_width = $(window).width();

    // Determine width
    if (window_width <= 600) {
         settings.menuWidth = '100px';
    } else if (window_width > 600) {
         settings.menuWidth = '250px';
    }

    // Updating menu width
    positionOffScreen = {
          'settings.side': '-' + settings.menuWidth,
          'width': settings.menuWidth
    };
    menu.css(positionOffScreen);
}); // TEST

Need Your Help

C- Print numbers multiplied by each other?

printf

I am writing a program where I am printing the prime multiples of a given number and am using a print function like this

How do I check if WordprocessingDocument is empty?

.net ms-word ms-office

From a WordprocessingDocument how do I check if the word document is empty?