Easy stuff, In the following script, I'm adding the class "mobile" to the element.
Target of the script is that of providing responsiveness feature to my theme through require.js based on screen resolution.
It should be almost self-explanatory, but I don't understand why it just gets inserted on the homepage: if I open whatever other page the mobile class isn't there.
(function($) {
var htmlCache = { desktop: null, mobile: null };
var reload_page = function(mobile) {
var bodyHtml = '';
if(mobile && htmlCache.mobile)
bodyHtml = htmlCache.mobile;
else if(!mobile && htmlCache.desktop)
bodyHtml = htmlCache.desktop;
else
$.ajax(location.href, {
type: 'POST',
async: false,
data: {
ajax: 1,
force_mobile: mobile ? 1 : null
},
success: function(data)
{
if(mobile) {
htmlCache.mobile = data;
}
else
htmlCache.desktop = data;
bodyHtml = data;
},
dataType: 'html'
});
$('body').html(bodyHtml);
};
$(function() {
// Be responsive only on desktop
if($('body').hasClass('mobile')) {
return;
} else {
htmlCache.desktop = $('body').html();
enquire.register('screen and (max-width:1080px)', {
match: function() {
reload_page(true);
$('body').addClass('mobile');
$('<link />', {
rel: 'stylesheet',
id: 'mobile-css',
href: 'http://dev.andreapuiatti.com/dev0/wp-content/themes/spk/mobile.css?ver=3.6',
media: 'all'
}).appendTo('head');
},
});
enquire.register('screen and (min-width:1081px)', {
match: function() {
reload_page(false);
$('body').removeClass('mobile');
$('#mobile-css').remove();
},
});
}
});
})(jQuery);