maik maik - 29 days ago 6
CSS Question

adjust jQuery option via CSS media query

i've looked through quite a few jQuery / CSS answers but none seem to touch on my problem _
i used popin.js to create a popin at the bottom of a webpage which appears after the user scrolls down past 500px _ everything works as it should for large screen but i need to know how to reset the height for smaller screens and whether it's possible via a media query_ say '@media(max-width: 768px)'

the code from the popin.js library =

var settings = $.extend({
target : '[data-toggle="popin"]', // Target element
button : '[data-toggle="kill-popin"]', // Close Button
store : 'popin', // Cookie Name
offsetTop : 500, // Offset when to slide
duration : 400 // Speed of animation
}, options);


how do i change the offsetTop option for @media(max-width: 768px)

thanks in advance

Answer

ok here is the answer https://jsfiddle.net/qtsk1zwu/2/

var offsetVal = 0;
$(window).on('resize',function(){
  if($(window).width() <=768){
    offsetVal = 200
      console.log(offsetVal)
  }else{
   offsetVal = 500
     console.log(offsetVal)
  }

})
$(window).on('load',function(){
  if($(window).width <=768){
    offsetVal = 200
      console.log(offsetVal)
  }else{
   offsetVal = 500
     console.log(offsetVal)
  }

})
Comments