0

I have a site that is using the pnp responsive and the webparts are responsive. But i'm using a jquery (easypaginate.js) in the webpart.

When i resize my webpart how can i dynamically change the step option to show only 3 li items when i resize the screen to let say 500px using (media queries) @media (max-width: 500px)

Below is the default setting options

$('ul#items').easyPaginate({
        step:7,
        nextprev:false,
        numeric:true
    }); 
}

I want the step to be 3 when i go on a smaller screen. Thanks in Advance

Improve this question
4
  • i do not think you can apply any media query on this ,but for sure you can get the windows width and apply easypaginate plugin. if(window.width >500)$('ul#items').easyPaginate({ step:7, nextprev:false, numeric:true }); }else{$('ul#items').easyPaginate({ step:3, nextprev:false, numeric:true }); }}
    – vinit kumar
    Sep 11, 2019 at 11:32
  • Thanks .Will give it a short
    – naijacoder
    Sep 13, 2019 at 7:20
  • Gave it a shot but didn't do it.It doesn't show the render the paginaton buttons. I think i need to pass some variable to the tepas depending on the window size for it to work
    – naijacoder
    Sep 16, 2019 at 0:01
  • Any other solution for this scenario?
    – naijacoder
    Oct 23, 2019 at 12:42

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.