I'm trying to detect mobile browsers on a webpage I'm building. Those on a desktop will see a "sticky" menu, while those on mobile devices will not.
But I have very basic skills that don't really extend beyond HTML and CSS, making it understandably difficult for me to get this to work. I'm hoping that someone can point out whatever the obvious things I'm getting wrong by don't realize...
I'm using 51Degrees PHP mobile device detector (http://sourceforge.net/projects/fiftyone/).
In my main web files, I'm following the directions here: http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/ to incorporate a sticky menu into the page using jQuery.
So what I want to do is only apply the sticky menu CSS changes if the user is NOT on a mobile device, using the value returned from the PHP mobile detector.
The PHP section:
<?php
session_start();
include_once('51Degrees/core/51Degrees.php');
include_once('51Degrees/core/51Degrees.usage.php');
?>
According to the documentation that gives the variable $_51d[‘IsMobile’] a value of True or False depending on the user's browser.
Based on what I've read, the PHP value can be passed to jQuery since the two are both in the same file. What I found suggested using something like this: var mobile = <?php echo ($_51d[‘IsMobile’]); ?>;. Then I would want to check if mobile was true or false, and only continue with the rest of the script if it was False. But I'm not sure exactly how to go about it, or whether my syntax is correct. Either way, I'm not getting the result I want.
<script type="text/javascript">
//<![CDATA[
$(function(){ // document ready
var mobile = <?php echo ($_51d[‘IsMobile’]); ?>;
if (mobile == 'false') {
if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('.sticky').css({ position: 'fixed', top: 0 });
}
else {
$('.sticky').css('position','static');
}
});
}
}
});
//]]>
</script>
I'm betting that it's something really obvious and stupid that I'm missing here, but with my lack of background it's just not occurring to me. Any help would be appreciated.
EDIT:
Thanks for all your input. After playing around with some of the suggestions it seems like my main issue is getting the value of the variable from PHP into jQuery (on the same page).
There is something wrong with var mobile = <?php echo ($_51d[‘IsMobile’]); ?>;. The value just does not get passed into jQuery. All I see in the Page Source is var mobile = ; and I've tried various different ways of writing it to accommodate the alternate PHP methods.
Does anyone spot what's wrong?
