title: jQuery Basic Slider - remove resize/responsive functionality
body: <p>I'm using the Basic jQuery Slider (http://basic-slider.com/) and I'm trying to remove the responsive/resize feature. The slider should remain within a centered div, and not change size - however as soon as I resize the window, the slider stretches vertically, but seems to be ok in its width. The page in question is <a href="http://www.ritapaynemusic.com/home" rel="nofollow">http://www.ritapaynemusic.com/home</a></p>
  
  <p>I've pasted the js code here - hoping someone can help me out! Thanks.</p>
  
  <pre><code>/*
  * Basic jQuery Slider plug-in v.1.3
  *
  * http://www.basic-slider.com
  *
  * Authored by John Cobb
  * http://www.johncobb.name
  * @john0514
  *
  * Copyright 2011, John Cobb
  * License: GNU General Public License, version 3 (GPL-3.0)
  * http://www.opensource.org/licenses/gpl-3.0.html
  *
  */
  
  ;(function($) {
  
  "use strict";
  
  $.fn.bjqs = function(o) {
  
      // slider default settings
      var defaults        = {
  
          // w + h to enforce consistency
          width           : 720,
          height          : 265,
  
          // transition valuess
          animtype        : 'fade',
          animduration    : 450,      // length of transition
          animspeed       : 4000,     // delay between transitions
          automatic       : null,     // enable/disable automatic slide rotation
  
          // control and marker configuration
          showcontrols    : true,     // enable/disable next + previous UI elements
          centercontrols  : true,     // vertically center controls
          nexttext        : '&lt;img src="http://www.ritapaynemusic.com/wp-content/themes/sfas/slider/img/next.png"&gt;',   // text/html inside next UI element
          prevtext        : '&lt;img src="http://www.ritapaynemusic.com/wp-content/themes/sfas/slider/img/prev.png"&gt;',   // text/html inside previous UI element
          showmarkers     : true,     // enable/disable individual slide UI markers
          centermarkers   : true,     // horizontally center markers
  
          // interaction values
          keyboardnav     : true,     // enable/disable keyboard navigation
          hoverpause      : true,     // enable/disable pause slides on hover
  
          // presentational options
          usecaptions     : true,     // enable/disable captions using img title attribute
          randomstart     : null,     // start from a random slide
          responsive      : false,     // enable responsive behaviour
  
      };
  
      // create settings from defauls and user options
      var settings        = $.extend({}, defaults, o);
  
      // slider elements
      var $wrapper        = this,
          $slider         = $wrapper.find('ul.bjqs'),
          $slides         = $slider.children('li'),
  
          // control elements
          $c_wrapper      = null,
          $c_fwd          = null,
          $c_prev         = null,
  
          // marker elements
          $m_wrapper      = null,
          $m_markers      = null,
  
          // elements for slide animation
          $canvas         = null,
          $clone_first    = null,
          $clone_last     = null;
  
      // state management object
      var state           = {
          slidecount      : $slides.length,   // total number of slides
          animating       : null,            // bool: is transition is progress
          paused          : null,            // bool: is the slider paused
          currentslide    : 1,                // current slide being viewed (not 0 based)
          nextslide       : 0,                // slide to view next (not 0 based)
          currentindex    : 0,                // current slide being viewed (0 based)
          nextindex       : 0,                // slide to view next (0 based)
          interval        : null              // interval for automatic rotation
      };
  
      var responsive      = {
          width           : null,
          height          : null,
          ratio           : null
      };
  
      // helpful variables
      var vars            = {
          fwd             : 'forward',
          prev            : 'previous'
      };
  
      // run through options and initialise settings
      var init = function() {
  
          // differentiate slider li from content li
          $slides.addClass('bjqs-slide');
  
          // conf dimensions, responsive or static
          if( settings.responsive ){
              conf_responsive();
          }
          else{
              conf_static();
          }
  
          // configurations only avaliable if more than 1 slide
          if( state.slidecount &gt; 1 ){
  
              // enable random start
              if (settings.randomstart){
                  conf_random();
              }
  
              // create and show controls
              if( settings.showcontrols ){
                  conf_controls();
              }
  
              // create and show markers
              if( settings.showmarkers ){
                  conf_markers();
              }
  
              // enable slidenumboard navigation
              if( settings.keyboardnav ){
                  conf_keynav();
              }
  
              // enable pause on hover
              if (settings.hoverpause &amp;&amp; settings.automatic){
                  conf_hoverpause();
              }
  
              // conf slide animation
              if (settings.animtype === 'slide'){
                  conf_slide();
              }
  
          }
  
          if(settings.usecaptions){
              conf_captions();
          }
  
          // TODO: need to accomodate random start for slide transition setting
          if(settings.animtype === 'slide' &amp;&amp; !settings.randomstart){
              state.currentindex = 1;
              state.currentslide = 2;
          }
  
          // slide components are hidden by default, show them now
          $slider.show();
          $slides.eq(state.currentindex).show();
  
          // Finally, if automatic is set to true, kick off the interval
          if(settings.automatic){
              state.interval = setInterval(function () {
                  go(vars.fwd, false);
              }, settings.animspeed);
          }
  
      };
  
      var conf_responsive = function() {
  
          responsive.width    = $wrapper.outerWidth();
          responsive.ratio    = responsive.width/settings.width,
          responsive.height   = settings.height * responsive.ratio;
  
          if(settings.animtype === 'fade'){
  
              // initial setup
              $slides.css({
                  'height'        : '290px',
                  'width'         : '720px'
              });
              $slider.css({
                  'height'        : '290px',
                  'width'         : '720px'
              });
              $wrapper.css({
                  'height'        : '290px',
                  'max-width'     : '720px',
                  'position'      : 'relative'
              });
  
              if(responsive.width &lt; settings.width){
  
                  $slides.css({
                      'height'        : responsive.height
                  });
                  $slider.css({
                      'height'        : responsive.height
                  });
                  $wrapper.css({
                      'height'        : responsive.height
                  });
  
              }
  
  
  
          if(settings.animtype === 'slide'){
  
              // initial setup
              $slides.css({
                  'height'        : settings.height,
                  'width'         : settings.width
              });
              $slides.children('img').css({
                  'height'        : settings.height,
                  'width'         : settings.width
              });
              $slider.css({
                  'height'        : settings.height,
                  'width'         : settings.width * settings.slidecount
              });
              $wrapper.css({
                  'height'        : settings.height,
                  'max-width'     : settings.width,
                  'position'      : 'relative'
              });
  
              if(responsive.width &lt; settings.width){
  
                  $slides.css({
                      'height'        : responsive.height
                  });
                  $slides.children('img').css({
                      'height'        : responsive.height
                  });
                  $slider.css({
                      'height'        : responsive.height
                  });
                  $wrapper.css({
                      'height'        : responsive.height
                  });
  
              }
  
              $(window).resize(function() {
  
                  // calculate and update dimensions
                  responsive.width    = $wrapper.outerWidth(),
                  responsive.ratio    = responsive.width/settings.width,
                  responsive.height   = settings.height * responsive.ratio;
  
                  $slides.css({
                      'height'        : responsive.height,
                      'width'         : responsive.width
                  });
                  $slides.children('img').css({
                      'height'        : responsive.height,
                      'width'         : responsive.width
                  });
                  $slider.css({
                      'height'        : responsive.height,
                      'width'         : responsive.width * settings.slidecount
                  });
                  $wrapper.css({
                      'height'        : responsive.height
                  });
                  $canvas.css({
                      'height'        : responsive.height,
                      'width'         : responsive.width
                  });
  
                  resize_complete(function(){
                      go(null,state.currentslide);
                  }, 200, "some unique string");
  
              });
  
          }
  
      };
  
      var resize_complete = (function () {
  
          var timers = {};
  
          return function (callback, ms, uniqueId) {
              if (!uniqueId) {
                  uniqueId = "Don't call this twice without a uniqueId";
              }
              if (timers[uniqueId]) {
                  clearTimeout (timers[uniqueId]);
              }
              timers[uniqueId] = setTimeout(callback, ms);
          };
  
      })();
  
      // enforce fixed sizing on slides, slider and wrapper
      var conf_static = function() {
  
          $slides.css({
              'height'    : settings.height,
              'width'     : settings.width
          });
          $slider.css({
              'height'    : settings.height,
              'width'     : settings.width
          });
          $wrapper.css({
              'height'    : settings.height,
              'width'     : settings.width,
              'position'  : 'relative'
          });
  
      };
  
      var conf_slide = function() {
  
          // create two extra elements which are clones of the first and last slides
          $clone_first    = $slides.eq(0).clone();
          $clone_last     = $slides.eq(state.slidecount-1).clone();
  
          // add them to the DOM where we need them
          $clone_first.attr({'data-clone' : 'last', 'data-slide' : 0}).appendTo($slider).show();
          $clone_last.attr({'data-clone' : 'first', 'data-slide' : 0}).prependTo($slider).show();
  
          // update the elements object
          $slides             = $slider.children('li');
          state.slidecount    = $slides.length;
  
          // create a 'canvas' element which is neccessary for the slide animation to work
          $canvas = $('&lt;div class="bjqs-wrapper"&gt;&lt;/div&gt;');
  
          // if the slider is responsive &amp;&amp; the calculated width is less than the max width
          if(settings.responsive &amp;&amp; (responsive.width &lt; settings.width)){
  
              $canvas.css({
                  'width'     : responsive.width,
                  'height'    : responsive.height,
                  'overflow'  : 'hidden',
                  'position'  : 'relative'
              });
  
              // update the dimensions to the slider to accomodate all the slides side by side
              $slider.css({
                  'width'     : responsive.width * (state.slidecount + 2),
                  'left'      : -responsive.width * state.currentslide
              });
  
          }
          else {
  
              $canvas.css({
                  'width'     : settings.width,
                  'height'    : settings.height,
                  'overflow'  : 'hidden',
                  'position'  : 'relative'
              });
  
              // update the dimensions to the slider to accomodate all the slides side by side
              $slider.css({
                  'width'     : settings.width * (state.slidecount + 2),
                  'left'      : -settings.width * state.currentslide
              });
  
          }
  
          // add some inline styles which will align our slides for left-right sliding
          $slides.css({
              'float'         : 'left',
              'position'      : 'relative',
              'display'       : 'list-item'
          });
  
          // 'everything.. in it's right place'
          $canvas.prependTo($wrapper);
          $slider.appendTo($canvas);
  
      };
  
      var conf_controls = function() {
  
          // create the elements for the controls
          $c_wrapper  = $('&lt;ul class="bjqs-controls"&gt;&lt;/ul&gt;');
          $c_fwd      = $('&lt;li class="bjqs-next"&gt;&lt;a href="#" data-direction="'+ vars.fwd +'"&gt;' + settings.nexttext + '&lt;/a&gt;&lt;/li&gt;');
          $c_prev     = $('&lt;li class="bjqs-prev"&gt;&lt;a href="#" data-direction="'+ vars.prev +'"&gt;' + settings.prevtext + '&lt;/a&gt;&lt;/li&gt;');
  
          // bind click events
          $c_wrapper.on('click','a',function(e){
  
              e.preventDefault();
              var direction = $(this).attr('data-direction');
  
              if(!state.animating){
  
                  if(direction === vars.fwd){
                      go(vars.fwd,false);
                  }
  
                  if(direction === vars.prev){
                      go(vars.prev,false);
                  }
  
              }
  
          });
  
          // put 'em all together
          $c_prev.appendTo($c_wrapper);
          $c_fwd.appendTo($c_wrapper);
          $c_wrapper.appendTo($wrapper);
  
          // vertically center the controls
          if (settings.centercontrols) {
  
              $c_wrapper.addClass('v-centered');
  
              // calculate offset % for vertical positioning
              var offset_px   = ($wrapper.height() - $c_fwd.children('a').outerHeight()) / 2,
                  ratio       = (offset_px / settings.height) * 100,
                  offset      = ratio + '%';
  
              $c_fwd.find('a').css('top', offset);
              $c_prev.find('a').css('top', offset);
  
          }
  
      };
  
      var conf_markers = function() {
  
          // create a wrapper for our markers
          $m_wrapper = $('&lt;ol class="bjqs-markers"&gt;&lt;/ol&gt;');
  
          // for every slide, create a marker
          $.each($slides, function(key, slide){
  
              var slidenum    = key + 1,
                  gotoslide   = key + 1;
  
              if(settings.animtype === 'slide'){
                  // + 2 to account for clones
                  gotoslide = key + 2;
              }
  
              var marker = $('&lt;li&gt;&lt;a href="#"&gt;'+ slidenum +'&lt;/a&gt;&lt;/li&gt;');
  
              // set the first marker to be active
              if(slidenum === state.currentslide){ marker.addClass('active-marker'); }
  
              // bind the click event
              marker.on('click','a',function(e){
                  e.preventDefault();
                  if(!state.animating &amp;&amp; state.currentslide !== gotoslide){
                      go(false,gotoslide);
                  }
              });
  
              // add the marker to the wrapper
              marker.appendTo($m_wrapper);
  
          });
  
          $m_wrapper.appendTo($wrapper);
          $m_markers = $m_wrapper.find('li');
  
          // center the markers
          if (settings.centermarkers) {
              $m_wrapper.addClass('h-centered');
              var offset = (settings.width - $m_wrapper.width()) / 2;
              $m_wrapper.css('left', offset);
          }
  
      };
  
      var conf_keynav = function() {
  
          $(document).keyup(function (event) {
  
              if (!state.paused) {
                  clearInterval(state.interval);
                  state.paused = true;
              }
  
              if (!state.animating) {
                  if (event.keyCode === 39) {
                      event.preventDefault();
                      go(vars.fwd, false);
                  } else if (event.keyCode === 37) {
                      event.preventDefault();
                      go(vars.prev, false);
                  }
              }
  
              if (state.paused &amp;&amp; settings.automatic) {
                  state.interval = setInterval(function () {
                      go(vars.fwd);
                  }, settings.animspeed);
                  state.paused = false;
              }
  
          });
  
      };
  
      var conf_hoverpause = function() {
  
          $wrapper.hover(function () {
              if (!state.paused) {
                  clearInterval(state.interval);
                  state.paused = true;
              }
          }, function () {
              if (state.paused) {
                  state.interval = setInterval(function () {
                      go(vars.fwd, false);
                  }, settings.animspeed);
                  state.paused = false;
              }
          });
  
      };
  
      var conf_captions = function() {
  
          $.each($slides, function (key, slide) {
  
              var caption = $(slide).children('img:first-child').attr('title');
  
              // Account for images wrapped in links
              if(!caption){
                  caption = $(slide).children('a').find('img:first-child').attr('title');
              }
  
              if (caption) {
                  caption = $('&lt;div class="capt" style="width: 310px; height: auto; vertical-align:middle; display: inline-block;"&gt;&lt;span class="bjqs-caption"&gt;' + caption + '&lt;/span&gt;&lt;/div&gt;');
                  caption.appendTo($(slide));
              }
  
          });
  
      };
  
      var conf_random = function() {
  
          var rand            = Math.floor(Math.random() * state.slidecount) + 1;
          state.currentslide  = rand;
          state.currentindex  = rand-1;
  
      };
  
      var set_next = function(direction) {
  
          if(direction === vars.fwd){
  
              if($slides.eq(state.currentindex).next().length){
                  state.nextindex = state.currentindex + 1;
                  state.nextslide = state.currentslide + 1;
              }
              else{
                  state.nextindex = 0;
                  state.nextslide = 1;
              }
  
          }
          else{
  
              if($slides.eq(state.currentindex).prev().length){
                  state.nextindex = state.currentindex - 1;
                  state.nextslide = state.currentslide - 1;
              }
              else{
                  state.nextindex = state.slidecount - 1;
                  state.nextslide = state.slidecount;
              }
  
          }
  
      };
  
      var go = function(direction, position) {
  
          // only if we're not already doing things
          if(!state.animating){
  
              // doing things
              state.animating = true;
  
              if(position){
                  state.nextslide = position;
                  state.nextindex = position-1;
              }
              else{
                  set_next(direction);
              }
  
              // fade animation
              if(settings.animtype === 'fade'){
  
                  if(settings.showmarkers){
                      $m_markers.removeClass('active-marker');
                      $m_markers.eq(state.nextindex).addClass('active-marker');
                  }
  
                  // fade out current
                  $slides.eq(state.currentindex).fadeOut(settings.animduration);
                  // fade in next
                  $slides.eq(state.nextindex).fadeIn(settings.animduration, function(){
  
                      // update state variables
                      state.animating = false;
                      state.currentslide = state.nextslide;
                      state.currentindex = state.nextindex;
  
                  });
  
              }
  
              // slide animation
              if(settings.animtype === 'slide'){
  
                  if(settings.showmarkers){
  
                      var markerindex = state.nextindex-1;
  
                      if(markerindex === state.slidecount-2){
                          markerindex = 0;
                      }
                      else if(markerindex === -1){
                          markerindex = state.slidecount-3;
                      }
  
                      $m_markers.removeClass('active-marker');
                      $m_markers.eq(markerindex).addClass('active-marker');
                  }
  
                  // if the slider is responsive &amp;&amp; the calculated width is less than the max width
                  if(settings.responsive &amp;&amp; ( responsive.width &lt; settings.width ) ){
                      state.slidewidth = responsive.width;
                  }
                  else{
                      state.slidewidth = settings.width;
                  }
  
                  $slider.animate({'left': -state.nextindex * state.slidewidth }, settings.animduration, function(){
  
                      state.currentslide = state.nextslide;
                      state.currentindex = state.nextindex;
  
                      // is the current slide a clone?
                      if($slides.eq(state.currentindex).attr('data-clone') === 'last'){
  
                          // affirmative, at the last slide (clone of first)
                          $slider.css({'left': -state.slidewidth });
                          state.currentslide = 2;
                          state.currentindex = 1;
  
                      }
                      else if($slides.eq(state.currentindex).attr('data-clone') === 'first'){
  
                          // affirmative, at the fist slide (clone of last)
                          $slider.css({'left': -state.slidewidth *(state.slidecount - 2)});
                          state.currentslide = state.slidecount - 1;
                          state.currentindex = state.slidecount - 2;
  
                      }
  
                      state.animating = false;
  
                  });
  
              }
  
          }
  
      };
  
      // lets get the party started :)
      init();
  
  };
  
  })(jQuery);
  </code></pre>