Change jQuery slider option dynamically based on window width
- by Nathan
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!
