Asked by:
how to use media queries with javascript in a custom web parts - classic mode

Question
-
Hi All,
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 also tried the below but it doesn't work
if (window.width > 500) { $('ul#items').easyPaginate( { step: 7, nextprev: false, numeric: true }); } else if ((window.width < 500) ){ $('ul#items').easyPaginate( { step: 3, nextprev: false, numeric: true }); } }
I want the step to be 3 when i go on a smaller screen.
Thanks in Advance
All replies
-
Hi Patrick.I,
I enabled pnp responsiv UI on my SharePoint site, then tested this scenario. I did not find window.width. Instead, here i use $( window ).width() or window.innerWidth. Below is my test code, you can take a reference.
1, Add a Content Editor web part for test2, Insert the following code:
<body> <ul id="items"> <li><img src="../../SiteAssets/pat/surf1.jpg" ></li> <li><img src="../../SiteAssets/pat/surf2.jpg" ></li> <li><img src="../../SiteAssets/pat/surf3.jpg" ></li> <li><img src="../../SiteAssets/pat/surf4.jpg" ></li> <li><img src="../../SiteAssets/pat/surf5.jpg" ></li> <li><img src="../../SiteAssets/pat/surf6.jpg" ></li> <li><img src="../../SiteAssets/pat/surf7.jpg" ></li> <li><img src="../../SiteAssets/pat/surf8.jpg" ></li> <li><img src="../../SiteAssets/pat/surf9.jpg" ></li> </ul> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="../../SiteAssets/lib/easypaginate.js"></script> <script type="text/javascript"> $(document).ready(function () { var step_v= ($(window).width())<850?3:5 $('ul#items').easyPaginate({ step:step_v, }); }); </script> <style> ul#items{ margin:0; height:120px; width:auto; overflow-x:auto overflow-y:hidden; } ul#items li{ list-style:none; float:left; width:200px; height:120px; overflow:hidden; margin:0 0 0 1px; background:#999; color:#fff; text-align:center; } ol#pagination{overflow:hidden;} ol#pagination li{ float:left; list-style:none; cursor:pointer; margin:0 0 0 .5em; } ol#pagination li.current{color:#f00;font-weight:bold;} </style> </body>
Best Regards,
Baker Kong
Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.
SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019. -
Thanks Baker for the response.
I tried your solution but didn't work. When i resize my page the pagination numbers aren't changing :(
Also what are you trying to do herevar step_v= ($(window).width())<850?3:5
What is
($(window).width())<850?3:5
Thanks in advance
-
Hi Baker,
Thanks but i came up quickly with a similar solution and it works but not the best..
Any suggestions. Note i used the window.resize that triggers when the screen size is changed:- See below
Any other suggestions...
var step_v; $(window).resize(function() { if ($(window).width() <= 480) { step_v = 2; $("#pagination").empty(); quicklinksSlider(step_v) } else if ($(window).width() <= 719) { step_v = 3; $("#pagination").empty(); quicklinksSlider(step_v) } else if ($(window).width() <= 959) { step_v = 5; $("#pagination").empty(); quicklinksSlider(step_v) } else if ($(window).width() >= 959) { step_v = 7; $("#pagination").empty(); quicklinksSlider(step_v) }
function quicklinksSlider(step_v) { console.log(step_v); $('ul#items').easyPaginate({ step:step_v, nextprev:false, numeric:true, controls:'pagination' }); }
-
Hi Patrick.I,
Sometimes it's more suggested to add some delay to the callback of 'resize' event. And it is also a good choice to monitor the width of the container.
Best Regards,
Baker Kong
Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.
SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.- Edited by Baker_KongMicrosoft contingent staff Monday, November 18, 2019 4:56 AM
- Proposed as answer by Jerry ZyMicrosoft contingent staff Friday, November 22, 2019 1:25 AM
-
-
Hi Patrick.I,
Hope you're delighted with our service. As our discussion goes to an end, it's more appreciated if you could mark this as Answer so that others who stuck in similar issues will get answered quickly.
Best Regards,
Baker Kong
Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.
SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.