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

  • 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 at 11:32
  • Thanks .Will give it a short – naijacoder Sep 13 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 at 0:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.