Use jQuery to change css height of slider based on

问题:

I've found solutions very close to what I want, but because of my limited programming experience, I can't make them work for me.

What I want to do is change a parameter inside two inline css tags based on window size.

On my site, I need to change these three parameters (specifically change the number 515 in the following):

• 1) inline css: <div id="rev_slider_1_1" class="rev_slider fullwidthabanner" style="display:none;max-height:515px;">
• 2) inline css: <div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;padding:0px;margin-top:0px;margin-bottom:0px;max-height:515px;">

What I need to do is change the 515 based on the width of the window: 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.

This code (taken from here) seems to be what I need, but I can't figure out how to modify the code for my specific situation:

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
    var h = $(window).height();
    var w = $(window).width();
    $("#elementToResize").css('height',(h < 1024 || w < 768) ? 500 : 400);
}

Can anyone give me some help? I think I only need the width of the screen to do this, but I am not sure. Thanks so much!

回答1:

This is how you may write your conditions:

$(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);
});