Advanced Search

Bootstrap javascript breakpoint utils

/ Published in: JavaScript
Save to your folder(s)
ResponsiveBootstrapToolkit : https://github.com/maciej-gurban/responsive-bootstrap-toolkit

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Manage viewport behavior */
  2.  
  3. +function ($, viewport) {
  4. 	'use strict';
  5.  
  6.  
  7. 		window.BpUtils= {
  8.  
  9. 			// add a callback to call on every breakpoint switch
  10. 			// callback is call this viewport as argument
  11. 			// more about viewport : https://github.com/maciej-gurban/responsive-bootstrap-toolkit
  12. 			newBreakpointRulesList: [],
  13. 			addCallBack: function(rule) {
  14. 				this.newBreakpointRulesList.push(rule);
  15. 			},
  16. 			applyNewBreakpointRules: function (viewport) {
  17. 				if(this.newBreakpointRulesList.length == 0) { return; }
  18. 				$.each(this.newBreakpointRulesList, function(i, rule){
  19. 					rule(viewport);
  20. 				});
  21. 			},
  22.  
  23. 			// Listen viewport changes
  24. 			currentbp: '',
  25. 			onUpdateViewport: function() {
  26. 				var
  27. 					bp = viewport.current()
  28. 				;
  29. 				if (bp.length != 2) { // if breakpoint not detected yet
  30. 					setTimeout(window.BpUtils.onUpdateViewport, 20);
  31. 					return;
  32. 				}
  33. 				//
  34. 				if (bp != this.currentbp) {
  35. 					this.currentbp = bp;
  36. 					window.BpUtils.applyNewBreakpointRules(viewport);
  37. 				}
  38. 			}
  39. 		};
  40.  
  41. 		// on resize
  42. 		$(window).resize(
  43. 			viewport.changed(function() {
  44. 				window.BpUtils.onUpdateViewport();
  45. 			})
  46. 		);
  47. 		window.BpUtils.onUpdateViewport();
  48.  
  49. }(jQuery, ResponsiveBootstrapToolkit);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.