how can i hide some div's from mobile browser.? and display new div's.?

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

Answer 1

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.

Answer 2

 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