The problem I’m facing, I need to set a vertical offset (this can be set in the panel of the plugin), but I want it only on certain screen sizes, because my header is vertical on large screen an horizontal when small size, so the offset is needed only on small sizes.
On bigger width than 1100px I need and offet of 0px, but on smaller i need an offset of 125px;
Here is the script that initiate the plugin with the desire options, and the one that I need in order to change the offset is this one fullScreenOffset
<script type="text/javascript">
/******************************************
- PREPARE PLACEHOLDER FOR SLIDER -
******************************************/
var setREVStartSize=function(){
try{var e=new Object,i=jQuery(window).width(),t=9999,r=0,n=0,l=0,f=0,s=0,h=0;
e.c = jQuery('#rev_slider_2_1');
e.responsiveLevels = [1240,1024,778,480];
e.gridwidth = [1400,1240,778,480];
e.gridheight = [868,768,960,720];
e.sliderLayout = "fullscreen";
e.fullScreenAutoWidth='on';
e.fullScreenAlignForce='off';
e.fullScreenOffsetContainer= '';
e.fullScreenOffset='';
if(e.responsiveLevels&&(jQuery.each(e.responsiveLevels,function(e,f){f>i&&(t=r=f,l=e),i>f&&f>r&&(r=f,n=e)}),t>r&&(l=n)),f=e.gridheight[l]||e.gridheight[0]||e.gridheight,s=e.gridwidth[l]||e.gridwidth[0]||e.gridwidth,h=i/s,h=h>1?1:h,f=Math.round(h*f),"fullscreen"==e.sliderLayout){var u=(e.c.width(),jQuery(window).height());if(void 0!=e.fullScreenOffsetContainer){var c=e.fullScreenOffsetContainer.split(",");if (c) jQuery.each(c,function(e,i){u=jQuery(i).length>0?u-jQuery(i).outerHeight(!0):u}),e.fullScreenOffset.split("%").length>1&&void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0?u-=jQuery(window).height()*parseInt(e.fullScreenOffset,0)/100:void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0&&(u-=parseInt(e.fullScreenOffset,0))}f=u}else void 0!=e.minHeight&&f<e.minHeight&&(f=e.minHeight);e.c.closest(".rev_slider_wrapper").css({height:f})
}catch(d){console.log("Failure at Presize of Slider:"+d)}
};
setREVStartSize();
var tpj=jQuery;
var revapi2;
tpj(document).ready(function() {
if(tpj("#rev_slider_2_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_2_1");
}else{
revapi2 = tpj("#rev_slider_2_1").show().revolution({
sliderType:"standard",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation:"on",
keyboard_direction: "vertical",
mouseScrollNavigation:"on",
mouseScrollReverse:"default",
onHoverStop:"off",
touch:{
touchenabled:"on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "vertical",
drag_block_vertical: false
}
,
bullets: {
enable:true,
hide_onmobile:true,
hide_under:1024,
style:"zeus",
hide_onleave:false,
direction:"vertical",
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0,
space:5,
tmp:'<span class="tp-bullet-image"></span><span class="tp-bullet-imageoverlay"></span><span class="tp-bullet-title">{{title}}</span>'
}
},
responsiveLevels:[1240,1024,778,480],
visibilityLevels:[1240,1024,778,480],
gridwidth:[1400,1240,778,480],
gridheight:[868,768,960,720],
lazyType:"none",
shadow:0,
spinner:"spinner2",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"off",
fullScreenAutoWidth:"on",
fullScreenAlignForce:"off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar:"on",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}); /*ready*/
</script>
I have search and didn’t find a proper answer. I know using resize() function but I don't know how to change the value in the script.
Thanks in advance.
Now that you already got the width in the "i" variable, you can just create a short if statement like this in the variable offset:
e.fullScreenOffset = i > 1100 ? '0' : '125';
I don't know if you need it with the "px" at the end or just the number, also I don't know if that should be on the e.fullScreenOffsetContainer as well, anyways, hope this helped.
Leo.