none
how to use media queries with javascript in a custom web parts - classic mode RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    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


    Thursday, November 14, 2019 7:07 AM
    |

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    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 test

    2, 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.

    Friday, November 15, 2019 7:31 AM
    |
  • Question
    Sign in to vote
    0
    Sign in to vote

    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 here

    var step_v= ($(window).width())<850?3:5

     

    What is 

     ($(window).width())<850?3:5

    Thanks in advance

    Sunday, November 17, 2019 11:18 PM
    |
  • Question
    Sign in to vote
    0
    Sign in to vote

    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'

	}); 
}


    Monday, November 18, 2019 1:12 AM
    |
  • Question
    Sign in to vote
    0
    Sign in to vote

    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.


    Monday, November 18, 2019 4:56 AM
    |
  • Question
    Sign in to vote
    0
    Sign in to vote
    Thanks for the tip
    Monday, November 18, 2019 11:29 PM
    |
  • Question
    Sign in to vote
    0
    Sign in to vote

    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.

    Tuesday, November 19, 2019 8:48 AM
    |