Question

62

Hiding DIV if using mobile browser

rated 0 times [ 69] [ 7] / answers: 1 / hits: 20775 / 10 Years ago, sat, may 24, 2014, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

juancarlos

Add To Favorites

Follow

Total Points: 580

Total Questions: 105

Total Answers: 103

Location: Grenada

Member since Sun, Dec 20, 2020

4 Years ago

answered 10 Years ago cartersinceren · Accepted Answer

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>