if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
$(".desktop1").hide();
$(".mobile_1").show();
}
Untested code!Should work I guess...You can see more solutions here
Question
i had following two div's in my site,
<div class="desktop_1">some desktop site data 1</div>
<div class="desktop_2">some desktop site data 2</div>
what i am asking is, when browse this page any mobile device just disabled above two dives, and display following new div's
<div class="mobile_1">some mobile data 1</div>
<div class="mobile_2">some mobile data 2</div>
if detect mobile devices disble first two dive's then display second two div's... how can i figure it.??? i hope you got what i meant here...
thanks
Solution
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
$(".desktop1").hide();
$(".mobile_1").show();
}
Untested code!Should work I guess...You can see more solutions here
OTHER TIPS
You could try looking at Media Queries which would allow you to have them declared separately like so:
@media only screen
and (min-width : 1024px) {
.desktop_1 {
/* Styles */
}
.desktop_2 {
/* More Styles */
}
}
@media only screen
and (max-width : 320px)
.mobile_1 {
/* Styles */
}
.mobile_2 {
/* More Styles */
}
}
And if both div
s appear in your code and need to be hidden, you can always include the opposite media's declaration in the query for it to make it hidden, like this:
@media only screen
and (min-width : 1024px) {
.desktop_1 {
/* Styles */
}
.desktop_2 {
/* More Styles */
}
/* Hide Mobile on Desktop */
.mobile_1 {
display: none;
visibility: hidden;
}
.mobile_2 {
display: none;
visibility: hidden;
}
}
And vice versa in the mobile declaration.