Menu
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>
354
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) {
}
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.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
