CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ahmed iqbal
Ahmed iqbal

Reputation: 597

how to hide div in smartphone or mobile browser

i want to hide my div if someone visit from smartphone, mobile etc. my javascript code not work for me, please let me know how to fix it?

<html>
<head>
<title>Test</title>
<script type="text/javascript">
    if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     document.getElementById('mybox').style.display = 'none';
     };
</script>
</head>
<body>

<div id="mybox">
Hello world
</div>

</body>
</html>

Upvotes: 5

Views: 7602

Answers (7)

Himanshu
Himanshu

Reputation: 1158

hello my friend try this..

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
{
        #mybox
        {
            display: none;
        }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px)
{
        #mybox
        {
            display: none;
        }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) 
{
        #mybox
        {
            display: none;
        }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
{
        #mybox
        {
            display: none;
        }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{
        #mybox
        {
            display: none;
        }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{
        #mybox
        {
            display: none;
        }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px)
{
        #mybox
        {
            display: block;
        }
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px)
{
        #mybox
        {
            display: block;
        }
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) 
{
        #mybox
        {
            display: none;
        }
}

Upvotes: 1

Ayaz Shah
Ayaz Shah

Reputation: 435

You can hide or show someone on any screen by media queries. 

@media (min-width: 768px) and (max-width: 979px) {
    .div{
        display : block; For big screen
    }
}
@media (min-width: 380px) and (max-width: 420px) {
    .div{
        display : none; For small screen
    }
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Remove semicolon of if condition close block:

if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     document.getElementById('mybox').style.display = 'none';
     }//semicolon is removed

Upvotes: 1

Jaykishan
Jaykishan

Reputation: 1499

You need to use media query to create responsive UI,
For different screen resolution you should have different CSS for all your HTML component(Could be Div/CSS Class etc.)
Search for some good responsive tutorial you'll surely find that interesting
Now a days people using Twitter Bootstrap to make the UI responsive, It has many responsive classes those are more useful to create Rapid responsive UI development. Sample

@media screen and (max-width: 960px) {

}

Upvotes: 3

helder.tavares.silva
helder.tavares.silva

Reputation: 734

You are missing the window.onload

<html>
<head>
<title>Test</title>
<script type="text/javascript">
    if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     window.onload = function (){
         document.getElementById('mybox').style.display = 'none';
     }
   };
</script>
</head>
<body>

<div id="mybox">
Hello world
</div>

</body>
</html>

But the css approach seems cleaner.

Upvotes: 2

Roberto
Roberto

Reputation: 9080

Put your JS code at the end of the page or use an onLoad event.

<html>
<head>
<title>Test</title>
</head>
<body>

<div id="mybox">
Hello world
</div>

<script type="text/javascript">
    if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
     document.getElementById('mybox').style.display = 'none';
     };
</script>
</body>
</html>

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Use media query to hide

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#mybox{
display: none
}

This will hide when screen size below 480px

Upvotes: 2

Related Questions