Assign a value depending on window width using jQuery

Question

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));

Arty.Simon · Accepted Answer · 2014-03-12 19:02:14Z

1

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

edited Mar 12, 2014 at 19:02

answered Mar 12, 2014 at 16:22

Arty.Simon

8702 gold badges7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3326054 Over a year ago

Thanks for that, I'm just a bit confused how to implement that into the actual bigSlide.js code above, so that where it has 'menuWidth': '250px', your function can work out the window size and then insert either 100px or 250px where the 250px currently is, so that the rest of the code uses menuWidth as it currently does.

user3326054 Over a year ago

Thank you, I really appreciate your help. I'll have a proper look at it all tomorrow to see if I can get it working.

user3326054 Over a year ago

I had another go at trying to get this to work but as my js skills are rather limited I had no luck, so think I'll have to give up on this idea.

Collectives™ on Stack Overflow

Assign a value depending on window width using jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related