Hiding DIV if using mobile browser
css, javascript
Solution
you can alos use this minified jQuery snippet to detect if your user is viewing using a mobile device ; `jQuery.browser.mobile`
- jQuery.browser.mobile will be true if the browser is a mobile device
You can try this code :
<script type="text/javascript">
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("MOBILE DEVICE!!");
$('.navWrap').css('display', 'none'); // OR you can use $('.navWrap').hide();
}
else
{
alert("NOT A MOBILE DEVICE!!");
}
</script>
Problem
I'm having trouble manipulating my code to hide one specific DIV if the browser being used is a mobile device. Backstory: I'm building a custom WordPress template, and I have my design fully responsive, except for one specific DIV that I'm using some hover techniques that just don't look fancy using a touch screen, so I want to just hide that section if the user is using a mobile device. I did some searching and found this little nifty code that can detect if the browser is a mobile device (please feel free to point me towards a better code if one does exist, but nothing gigantic or anything), I currently just have it giving an alert box telling me if it's a mobile browser or not: ``` <script type="text/javascript"> var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if (mobile) { alert("MOBILE DEVICE!!"); } else { alert("NOT A MOBILE DEVICE!!"); } </script> ``` Now all I'm wanting to do is have it essentially say: ``` if (mobile) { .navWrap {display: none;} } ``` I know that's not a functioning code, I did some testing using `getElementById` but couldn't figure out how to accomplish my goal. I did change my .navWrap class to #navWrap so it could be selected by `getElementById` but that didn't work either. So, any of you amazing geniuses out there able to help me out? Thanks!