adjust jQuery option via CSS media query

Question

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

you could use javascript to check the width of the window if ts 768 or greater than 768. — Rani Moreles Rubillos
– Rani Moreles Rubillos, Commented Nov 4, 2016 at 1:20
thanks for getting back to me Rani _ if i understand you correctly you're suggesting i create a new javascript function which overrides the original when the device screen is smaller _ sadly i don't have enough JS knowledge to do that..... hmm create an if / else to control which function is used? — inputforcolor
– inputforcolor, Commented Nov 4, 2016 at 1:27
@Rani 200 possibly? _ if i knew how to do it i could adjust accordingly _ presumably for larger media queries as well _ do you think creating an if / else which tests for screen width would work? — inputforcolor
– inputforcolor, Commented Nov 4, 2016 at 1:30
yes just like this one check this fiddle jsfiddle.net/qtsk1zwu/2 just change the value and set the value you want — Rani Moreles Rubillos
– Rani Moreles Rubillos, Commented Nov 4, 2016 at 1:35

Rani Moreles Rubillos · Accepted Answer · 2016-11-04 01:38:41Z

4

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)
  }

})

answered Nov 4, 2016 at 1:38

Rani Moreles Rubillos

1,1087 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

adjust jQuery option via CSS media query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related