nickfmc

responsive jquery

Sep 19th, 2021
821
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * Get Viewport Dimensions
  3.  * returns object with viewport dimensions to match css in width and height properties
  4.  * ( source: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript )
  5. */
  6. function updateViewportDimensions() {
  7.   var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
  8.   return { width:x,height:y };
  9. }
  10. // setting the viewport width
  11. var viewport = updateViewportDimensions();
  12.  
  13.  
  14. /*
  15.  * Throttle Resize-triggered Events
  16.  * Wrap your actions in this function to throttle the frequency of firing them off, for better performance, esp. on mobile.
  17.  * ( source: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed )
  18. */
  19. var waitForFinalEvent = (function () {
  20.   var timers = {};
  21.   return function (callback, ms, uniqueId) {
  22.     if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; }
  23.     if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); }
  24.     timers[uniqueId] = setTimeout(callback, ms);
  25.   };
  26. })();
  27.  
  28. // how long to wait before deciding the resize has stopped, in ms. Around 50-100 should work ok.
  29. var timeToWaitForLast = 100;
  30.  
  31.  
  32.  
  33. /************** EXAMPLES *******************************************/
  34.  
  35.  
  36. /*
  37.  * Responsive viewport AND resize throttling example....
  38. */
  39.  
  40. // check window resize, close mmenu if window resized above mobile menu breakpoint
  41. $(window).resize(function () {
  42.  
  43.   // wait until resizing is done...
  44.   waitForFinalEvent( function() {
  45.     // update the viewport, in case the window size has changed
  46.     viewport = updateViewportDimensions();
  47.     // if we're above or equal to 992px (mobile menu breakpoint), then fire!
  48.     if( viewport.width >= 992 ) {
  49.       var API = $("#MobileMenuWrap").data( "mmenu" );
  50.       API.close();
  51.     } else {
  52.       // console.log('No worries.');
  53.     }
  54.  
  55.   }, timeToWaitForLast, "resize-mobile-menu-checker");
  56. });
  57.  
  58.  
  59.  
  60.  
  61. /*
  62.  * Responsive viewport Gravatars....Call this function in doc.ready to hide Gravatars
  63.  * until an appropriate viewport size. This does NOT throttle frequency of resize check.
  64. */
  65. function loadGravatars() {
  66.   // set the viewport using the function above
  67.   viewport = updateViewportDimensions();
  68.   // if the viewport is tablet or larger, we load in the gravatars
  69.   if (viewport.width >= 768) {
  70.     jQuery('.comment img[data-gravatar]').each(function(){
  71.       jQuery(this).attr('src',jQuery(this).attr('data-gravatar'));
  72.     });
  73.   }
  74. } // end function
RAW Paste Data