Grabbing a body class element and turning it into a PHP variable
Question
I am theming a new site using Responsive Design techniques and mostly using CSS Media Queries and this has worked really well. However in some cases I need to get the width of the browser and I do that by adding an <html> class with this nifty bit fo JQuery:
(function($) {
//add drupal 7 specific code
Drupal.behaviors.getWidthTheme = {
attach: function(context, settings) {
//end drupal calls
var w, html = $('html'), _window = $(window);
_window.resize(onResize);
function onResize() {
w = _window.width();
if (w >= 310 && w < 480 ) html.addClass('mobile-320').removeClass('mobile-768').removeClass('desktop').removeClass('mobile-480');
else if (w >= 481 && w < 768 ) html.addClass('mobile-480').removeClass('mobile-768').removeClass('desktop').removeClass('mobile-320');
else if ( w >= 768 && w < 960 ) html.addClass('mobile-768').removeClass('mobile-480').removeClass('desktop').removeClass('mobile-320');
else html.addClass('desktop').removeClass('mobile-480').removeClass('mobile-768').removeClass('mobile-320');
}
onResize();
}}})(jQuery);
The code above injects a class into the <html> element, eg <html class="mobile-320"> etc... depending on the width of the browser or device.
What I'd like to do is grab that class and somehow convert it into a PHP variable so I can switch off some code. Ideally it would be something like this:
<?php if ($mobile-320): ?>
<!--do something-->
<?php else : ?>
<?php if ($mobile-480 || $mobile-768 || $desktop): ?>
<!-- do some other thing -->
<?php endif; ?>
Ideally these classes are grabbed from the HTML class that's been rendered. However, I am not sure this can work as PHP needs to render on the server whereas I am injecting the HTML class via JQuery. I am basically open to any way of doing this, not set on what I have above but hopefully you get the idea.
2 answers
solution1
1 2012-02-25 00:21:33
I am not quite sure I understand, but maybe you can set off another ajax request, sending the name of the class you just inserted. the response of the php could be json-data to control what you need to execute next, or it could be html/javascript directly. it would help to see more of your html/javascript.
$.getJSON('getDeviceActions.php',
{ className: $('html').attr('class') },
function(phpResult){
if( phpResult.switchOffA == true ) $('.divsel').hide(); //or what not
}
});
Why cant you do your switch-statement directly in javascript, without asking the server, and what is it going to do with the information afterwards?
solution2
1 2012-02-25 00:26:07
You can put all classes in an array and pass that array in data :
var classes = $('html').attr('class').match(/\w+/g);
$.ajax({
type: 'post',
url: 'url.php',
data: {
classes: classes
}
success: function() {
// Blabla
}
});
Btw, your first piece of code can be reduced if you only have those classes in $('html') :
if (w >= 310 && w < 480 ) { html.removeClass().addClass('mobile-320'); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.