html - Add/remove unordered lists based on screen resolution with jQuery -

i have section need show content in 1 4 columns based on screen resolution. example, if resolution 320 pixels wide, should display 1 ul , resolution of 1200 pixels wide, should display 4 columns.

the problem content have inside it, since have redistribute content equally in each visible column. html have looks this:

<ul class="projectslist">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> <ul class="projectslist">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> <ul class="projectslist">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> <ul class="projectslist">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> 

the css looks this:

.projectslist{     float: left;     margin: 0;     padding: 0 } .projectslist li{     display: block;     width: 100px;     height: 100px;     background: #ccc;     margin: 0 10px 10px 0;     list-style: none; } .mediascreen{     width: 1024px) 

and here's code have far:

var mediascreen = $('.mediascreen').css('width'); var targetcolumns; var movingmosaics; var wrapper = $(".projectslist"); var mosaic = $(".projectslist li"); var callback = false;  function adjustprojects(){     if(mediascreen == '1401px'){         targetcolumns = 4;     }else if(mediascreen == '1024px' || mediascreen == '800px'){         targetcolumns = 3;     }else if(mediascreen == '600px'){         targetcolumns = 2;     }else if(mediascreen == '320px'){         targetcolumns = 1;     }      //when want columns collapse     if (wrapper.not('.empty').length > targetcolumns){         (var = $targetcols; < $currentcols; i++){             movingmosaics = wrapper.eq(i).find('li').addclass('moving');             if(mosaicstomove == wrapper.eq(i).find('.moving').length){                 callback = true;                 wrapper.eq(i).addclass('empty');             }         }          if (callback == true){            for(var j=0; j<movingmosaics.length; j++){                for(var i=0; i<$targetcols; i++){                    if(!wrapper.eq(i).hasclass("last")){                        wrapper.eq(i).append(movingmosaics.eq(0))                        movingmosaics.eq(j).removeclass('moving')                        $(".last").removeclass("last");                        wrapper.eq(1).addclass("last");                        break;                    };                };            };         }      //when want columns expand     }else if(wrapper.not('.empty').length < targetcolumns){         var totaliemstomove = wrapper.find('li').length/targetcolumns;         var itemspercol = wrapper.find('li').length / wrapper.not('.empty').length;         var itemspercoltomove = itemspercol - totaliemstomove;         var indexitems = itemspercol - itemspercoltomove;          for(var = 0; i< wrapper.not('.empty').length; i++){             (var j = indexitems; j <= itemspercol; j++){                 movingmosaics = wrapper.eq(i).find(' li').eq(j).addclass('reassign');                 if(totaliemstomove == $('.reassign').length){                     callback = true;                 }             }         }         if (callback== true){             (var j = wrapper.not('.empty').length; j < targetcolumns; j++){                 (var = 0; < movingmosaics.length*2; i++){                     wrapper.eq(j).append(movingmosaics.eq(i));                         movingmosaics.eq(j).removeclass('reassign');                     }                     if($('.reassign').length == 0){                            wrapper.eq(j).removeclass('empty');                     }                 }             }             callback == false;         }     } 

the script has issues; partially works. if have 12 elements have move them equally number of visible "uls". 4 visible columns there must 3 elements, 3 visible columns there must 4 elements in each column , on... mediascreen class changes based on media query resolution.

i think making script complicated, , have erased , started on again few times without luck. way solve problem?

you don't need javascript code make columns disappear based on screen size. use css:

html

<ul class="projectslist">     <li>main1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> <ul class="projectslist hide-phone">     <li>phone1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> <ul class="projectslist hide-tablet">     <li>tablet1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> <ul class="projectslist hide-desktop">     <li>desktop1</li>     <li>2</li>     <li>3</li>     <li>4</li> </ul> 

css

.projectslist {     float: left;     margin: 0;     padding: 0; } .projectslist li {     display: block;     width: 100px;     height: 100px;     background: #ccc;     margin: 0 10px 10px 0;     list-style: none; } @media (max-width: 800px) {     .hide-desktop {         display: none;     } } @media (max-width: 600px) {     .hide-desktop {         display: none;     }     .hide-tablet {         display: none;     } } @media (max-width: 320px) {     .hide-desktop {         display: none;     }     .hide-tablet {         display: none;     }     .hide-phone {         display: none;     } } 

check out jsfiddle, http://jsfiddle.net/elfkm/.