Forked from petertwise/squarecandy-responsive-basics.js
Created
April 6, 2019 15:41
-
-
Save whoami15/01c8b3a95ab7cf792bcf4e0f623aa72d to your computer and use it in GitHub Desktop.
Basic Load and Resize jQuery to start from
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*********** | |
RESPONSIVE CALCULATIONS | |
**********/ | |
// On the first time the page loads, or if the orientation changes | |
// (portrait to landscape, etc) call the recalculation script | |
$(window).on('load orientationchange', function(){ | |
responsive_calc(); | |
}); | |
// For the resize event, only call recalculation if the WIDTH changes | |
// This avoids jumpyness with mobile URL bar showing and hiding | |
test_w = get_w(); | |
// set the browser width data on initial load somewhere we can access it later | |
$('body').data('w',test_w); | |
$(window).on('resize', function(){ | |
w = get_w(); | |
// only call recalculation if the new width is different from the initial load width | |
if (w != test_w) { | |
responsive_calc(); | |
} | |
}); | |
var responsive_calc = function(){ | |
// get the viewport height & width | |
var h = get_h(); | |
var w = get_w(); | |
// do some things based on screen size | |
var breakPoint = 800; | |
if (w < breakPoint) { | |
// Small Stuff!!! | |
} | |
else { | |
// Big Stuff!!! | |
} | |
} | |
var get_w = function(){ | |
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | |
} | |
var get_h = function(){ | |
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment