Advanced Search

Return to Snippet

Revision: 63874
at June 14, 2013 00:08 by jbernus
Updated Code 
var mergeLists = {

	triggerWidth : 768,

	listsContainer : $('.container'),

	init : function(){

		if($(window).width() <= this.triggerWidth){

			this.listsContainer.each(function(i){

				var listFirst = $(this).find('ul:first-child'),
				listSecond = $(this).find('ul:nth-child(2)');

				if(!listSecond.is(':hidden')){

					var list = listSecond.find('li');

					$(list).addClass('second');
					listFirst.append(list);
					listSecond.hide();
				}
			});
		}else{
			this.listsContainer.each(function(i){

				var listFirst = $(this).find('ul:first-child'),
				listSecond = $(this).find('ul:nth-child(2)');

				if(listSecond.is(':hidden')){
					listSecond.append($(this).find('li.second'));
					listSecond.show();
				}
			});
		}
	}
}
mergeLists.init();
$(window).resize(function(){
	mergeLists.init();
});

<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

.container ul{
display: table-cell;
}

Revision: 63873
at June 13, 2013 23:02 by jbernus
Initial Code 
var mergeLists = {

	triggerWidth : 768,

	listsContainer : $('.container'),

	init : function(){

		if($(window).width() <= this.triggerWIdth){

			this.listsContainer.each(function(i){

				var listFirst = $(this).find('ul:first-child'),
				listSecond = $(this).find('ul:nth-child(2)');

				if(!listSecond.is(':hidden')){

					var list = listSecond.find('li');

					$(list).addClass('second');
					listFirst.append(list);
					listSecond.hide();
				}
			});
		}else{
			this.listsContainer.each(function(i){

				var listFirst = $(this).find('ul:first-child'),
				listSecond = $(this).find('ul:nth-child(2)');

				if(listSecond.is(':hidden')){
					listSecond.append($(this).find('li.second'));
					listSecond.show();
				}
			});
		}
	}
}
mergeLists.init();
$(window).resize(function(){
	mergeLists.init();
});

<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

.container ul{
display: table-cell;
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
For side by side ULs that become too wide on small screens/devices.
The following script let you merge or unmerge ULs depending on the size of the screen/device.

Works with jQuery

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Merge or unmerge lists of items depending on window size

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, DOM, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript