javascript - Hiding DIV if using mobile browser

Question

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|windowssce|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!

Answer 1

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|windowssce|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>