Change jQuery slider option dynamically based on window width

Posted by Nathan on Stack Overflow See other posts from Stack Overflow or by Nathan
Published on 2012-09-03T03:33:06Z Indexed on 2012/09/03 3:38 UTC
Read the original article Hit count: 132

Filed under:
|
|

I would like to change a jQuery option based on window width (on load as well as on resize).

I've found solutions close to what I need, but I don't understand jQuery or javascript enough to customize them for my needs.

Here's my jQuery code:

<script type="text/javascript">
  var tpj = jQuery;

  tpj.noConflict();

  tpj(document).ready(function () {

    if (tpj.fn.cssOriginal != undefined) tpj.fn.css = tpj.fn.cssOriginal;

    tpj('#rev_slider_1_1').show().revolution({
      delay: 5000,
      startwidth: 1920,
      startheight: 515,
      hideThumbs: 200,

      thumbWidth: 100,
      thumbHeight: 50,
      thumbAmount: 4,

      navigationType: "bullet",
      navigationArrows: "verticalcentered",
      navigationStyle: "navbar",

      touchenabled: "on",
      onHoverStop: "off",

      navOffsetHorizontal: 0,
      navOffsetVertical: 20,

      shadow: 0,
      fullWidth: "on"
    });

  }); //ready
</script>

I want to change the startheight based on window width.

If the window width is above 1280 I would like the value for the height to be 515, and if it is below 1280 I would like the height to be 615 and if the width is less than 480 make the height 715.

With help from another post I am able to change the css I need using this script:

$(window).on('load resize', function () {
  var w = $(window).width();
  $("#rev_slider_1_1 #rev_slider_1_1_wrapper")
    .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715);
});

But I need to also change the jQuery startheight value on the fly.

Can someone help?

Thanks!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery