Hiding div on mobile devices only

Question

I have a button which acts as a 'copy url' button. This works fine on none mobile devices, however I believe you can't have such a function on mobile devices as they rely on flash. On most mobile sites users must manually copy URLs.

So, I want to remove my 'copy url' button once a mobile device has been detected.

Before you grill me, yes I've read:

Hiding DIV if using mobile browser

I tried the solution mentioned in that thread, however it does not work. Any idea why? Here is my codepen:

http://codepen.io/rjtkoh/pen/dPxKeg

<head>
<script>
     var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
     $('.test').css('display', 'none');
</script>

</head>
<div class= "test">yo test me</div>

Much appreciated.

Another way to have it done is to use the device width such as [bootstrap](http://getbootstrap.com/css/#responsive-utilities) does. — Edwin Dayot, Apr 15 '15 at 17:00

Benjamin Ray · Accepted Answer · 2015-04-15T17:00:43.733

It doesn't look like you're doing anything with the mobile variable. But before you can get any further, you have to address the issue that is preventing your $('.test').css('display', 'none'); from hiding the div:

The DOM element you are referencing does not exist at the time the script is executed. The script should be executed after the DOM element is created, which can be accomplished a couple of ways:

Move the <script> tag to after the element in the HTML. This assumes that the link to jQuery is somewhere before the script, not after.
Use jQuery's document.ready() function to execute the JavaScript only after the DOM is ready. Since you're already using jQuery, this is usually the most convenient way to do it.

E.g.:

<script>
    $(document).ready(function() {
        var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
        $('.test').css('display', 'none');
    });
</script>

score 0 · Answer 2 · answered Apr 15 '15 at 16:51

The reason you're seeing this is because the DOM isn't fully built, so when you're trying to access it using $('.test'), it can't get it. You have to wait until it is fully ready.

Wrap your Javascript code in the ready function provided by jQuery:

$(document).ready(function () {
    // your code goes here
});

This code will only be executed once all the DOM has been loaded. Have a look at the documentation.

score 0 · Answer 3 · answered Apr 15 '15 at 17:01

A simple way to do this is just add class to the html element when match some situation.

And use a selector to hide the elements you want you hide only when the class exist

This allows you to hide element even the <body></body> haven't actully loaded.

Besides, it requires minimal DOM operation. So it won't lag the page when there are too many elements needed to hide.

Just put the codes in the <head></head>

  <script>
    if (navigator.userAgent.search("Some thing") >= 0 ) {
      /*the html element*/
      var root = document.documentElement;
      root.setAttribute( "class", "hide-for-compitibility" );
    }
  </script>
  <style>
    html.hide-for-compitibility .selectors{
      display : none;
    }
  </style>

score 0 · Answer 4 · answered Apr 15 '15 at 17:29

Does anyone look at his codepen? Hey guy,

you did not include Jquery while using it. Put this in your HTML section <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
you put your script in wrong section, move it to JS section.
the mobile variable you obtained should be used in an IF statement. Example,

if (mobile) $('.test').css('display', 'none'); else $('.test').html('This ELSE leg should be removed');

Finally, getting the opinion of other answers that you should wrap your code inside a $(document).ready() function.

Here is an example and it do work. http://codepen.io/anon/pen/QweBgq

Another way that does not use Javascript is that you use CSS. Try below code in CSS section.

.test { display: none; } @media (min-width: 768px) { .test{ width: 200px; height: 50px; background: red; display: block; } }

Hiding div on mobile devices only

4 Answers4