December 14, 2016
When the order of elements in your desktop layout differs from the order of items in your mobile layout, it might be prudent to load items based on the screen size using a jQuery if statement.
This will allow you to be able to use the same IDs and Classes that were applied to your desktop layout, so theming does not need to be re-applied to the mobile layout.
Here is an example loading two Slick Sliders on one page:
jQuery(document).ready(function(){
REL.init();
});
var REL = {};
REL.init = function() {
var viewportWidth = jQuery(window).width(); // get window width
if (viewportWidth > 600) { // if window width is larger than pixels
jQuery('#content #banners').slick({
autoplay: true,
infinite: true,
dots: false,
arrows: false
});
} else { // if window is small than pixels
jQuery('.mobile #banners').slick({
autoplay: true,
infinite: true,
dots: false,
arrows: false
});
}
}
This can also be used to load different files based on window width:
(function () {
var viewportWidth = $(window).width();
if (viewportWidth > 1400) {
$('#wrapper').load('/ajax/largeScreen.php');
} else {
$('#wrapper').load('/ajax/smallScreen.php');
}
}());
Sourced here.
Display active section of statement in the console:
function checkWidth() {
var windowSize = jQuery(window).width();
if (windowSize <= 667) {
console.log("screen width is less than 667");
jQuery('.mobile #banners').slick({
autoplay: true,
infinite: true,
dots: false,
arrows: false
});
}
else if (windowSize > 668) {
console.log("screen width is greater than 668");
jQuery('#content #banners').slick({
autoplay: true,
infinite: true,
dots: false,
arrows: false
});
}
}
// Execute on load
checkWidth();
// Bind event listener
jQuery(window).resize(checkWidth);
Sourced here.
