How with document.write, or something like that, display the table with content when we need?

Question

I need display different content when screen width less than 768px and normal.

I tried something like this, but it don't work:

<script>
if(screen.width <= '768') 
{ 
document.write( '<table class="small-tbl"> ... </table>' ); 
} 
else  
{ 
document.write( '<table class="beeg-tbl"> ... </table>' ); 
} 
</script>

What does *"it don't work"* mean? No table shows up at all? Only one or the other shows up? I see no reason why what you provided wouldn't work at all. — cookie monster, Apr 15 '14 at 15:45
This looks fine as it is. Although you might want to consider using InnerHTML rather than trying to put it all in an IF statement. — durbnpoisn, Apr 15 '14 at 15:45
Don't use document.write. See: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Diodeus - James MacFarlane, Apr 15 '14 at 15:45
@user3526229: That comment doesn't make sense. Yes the table shows up, or no it doesn't show up. — cookie monster, Apr 15 '14 at 15:47
@phylax media-query it is not what I need. the content is quite different — user3526229, Apr 15 '14 at 15:48

score 0 · Answer 1 · answered Apr 16 '14 at 09:20

     <script>
    $(document).ready(function(){
     $( ".cart-tbl-small" ).hide();
     $( ".cart-tbl-beeg" ).hide();
     });
         </script>
             <script>
                var windowSize = $(window).width();
     $(document).ready(function(){
     if(windowSize <= '768') 
{ 
$( ".cart-tbl-small" ).show();
} 
else  
{ 
$( ".cart-tbl-beeg" ).show();
} 
     });
     </script>

How with document.write, or something like that, display the table with content when we need?

1 Answers1