1

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.

Community
  • 1
  • 1
Nathan
  • 1,483
  • 3
  • 18
  • 41

2 Answers2

1

Why don't you use percentages in CSS.

I created an example here:

http://jsfiddle.net/webwarrior/aLJQm/52/

<div id="slider"></div>

Css:

#slider {
    width: 90%; 
}

to resize, use JavaScript with something like this on your resize:

var clientWidth = jQuery(window).width();
var clientHeight = jQuery(window).height();
jQuery("#rev_slider_1_1 #rev_slider_1_1_wrapper").height(clientHeight/20);

Trying the following now on images:

.slotholder{
    overflow: hidden;
}
.slotholder img{
    width: 110%;
    margin-left: -5%;
}

as on http://jsfiddle.net/webwarrior/wLFEJ/11/

hth

ShaunOReilly
  • 2,186
  • 22
  • 34
  • Thanks for your time! The slider is already responsive - what I am trying to do is enhance the responsiveness. I am using images that are 1920px wide (so the slider looks good on large screens), but for iPhones, I want to "zoom in" as it were, to make the height of the aspect ratio of the slider taller, and trim the sides of the image off. The "startheight' value changes exactly what I need, but I just can't figure out how to change the value on the fly based on window width. Test site is here: http://beta.actioncambodia.org – Nathan Sep 03 '12 at 04:19
  • Edited my response. Nice site, by the way, but where do you use the slider? – ShaunOReilly Sep 03 '12 at 04:48
  • Sorry, I was fooling around with the slider code to try and find a solution, its back on now if taking a look would help. In your edited answer - doesn't that still only edit the css? Only edited the css doesn't seem to change the value I need. If I manually change the startheight value in the javascript, I can get the result I need, but like I stated, I can't figure out how to dynamically change it. – Nathan Sep 03 '12 at 04:53
  • 1
    It works much faster that editing the CSS any other way. Where do I see the slider. We need to get this working, ASAP, as you have important work to do! :-) – ShaunOReilly Sep 03 '12 at 04:55
  • The slider is right below the menu on the main page there...might be a cache issue if it is not showing up (I've deleted the cache on the serverside). – Nathan Sep 03 '12 at 05:00
  • Ok, let's fiddle around: http://jsfiddle.net/webwarrior/wLFEJ/4/ change a few things to get this to work, and we can try a few things, till we find the best solution – ShaunOReilly Sep 03 '12 at 05:19
  • You were right - it could be fixed with css and media queries - thanks! – Nathan Sep 03 '12 at 13:29
  • It looks great on my Asus Transformer prime, and Samsung galaxy, well done! – ShaunOReilly Sep 04 '12 at 00:46
0

Modify the 'load resize' event binding like so:

$(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);
  if(w > 1280) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 515);}
  else if(w < 1280 && w > 480) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 615); }
  else { tpj('#rev_slider_1_1').revolution('option', 'startheight', 715); }      
});

This would work for most jquery plugins, but since you seem to be using a paid plugin (http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848 would be my guess), the customization might be restricted - so, All the Best! :)

Tiquelou
  • 459
  • 5
  • 12