Happy Monday everyone

 

I have a small issue with .wrapAll on window resize. Hope someone can let me know where I am going wrong

 

What I need to do is:

- wrap different number of items in a container div, for example wrap 2 items on screen resolution smaller than 480px, wrap 4 items on resolution smaller than 600, etc. and update them on window resize so the right number of items are wrapped, if that makes sense?

 

Here is my code:

 

HTML

<div class="my-item"></div>
<div class="my-item"></div>
<div class="my-item"></div>
<div class="my-item"></div>
<div class="my-item"></div>
<div class="my-item"></div>
<div class="my-item"></div>
...etc...

jQuery

$(document).ready(function(){      
  function wrapItems(){
		var windowWidth = $(window).width();
		var items = $('.my-item');
		if(windowWidth < 1025 && windowWidth > 701){
			for(var i = 0; i < items.length; i+=6) {
				items.slice(i, i+6).wrapAll('<div class="parent"></div>');
			}
		} else if(windowWidth < 701 && windowWidth > 481) {
			for(var i = 0; i < items.length; i+=4) {
				items.slice(i, i+4).wrapAll('<div class="parent"></div>');
			}
		} else if(windowWidth < 481) {
			for(var i = 0; i < items.length; i+=2) {
				items.slice(i, i+2).wrapAll('<div class="parent"></div>');
			}
		} else {
			for( var i = 0; i < items.length; i+=8 ) {
				items.slice(i, i+.wrapAll('<div class="parent"></div>');
			}
		}
	}
	wrapItems(); //fire on document ready
        $(window).resize(wrapItems); //also fire on window resize
}):

So what happens on window resize is the function fires twice and adds more containers, which I don't need.

I gather this happens because I also call the function on document ready - I need to keep that.

I tried to unwrap the items first, but that doesn't work, for example:

for( var i = 0; i < items.length; i+=8 ) {
    $('.parent').contents().unwrap();
    items.slice(i, i+.wrapAll('<div class="parent"></div>');
}

I have been reading about .bind, .unbind, but can't get it right either.

 

I would say the best way to do this would be at server side, but I am not sure how to get screen resolution with PHP as it's server side? I have been looking at http://mobiledetect.net/ - is that a good way of doing it?

 

If not, what am I doing wrong with my function above?

Edited March 30, 201511 yr by teodora

No, it would have been so much easier if I can just do it with PHP or media queries...

 

It's because the number of items the parent div should contain on different resolutions should be different, if that makes sense?

Edited March 30, 201511 yr by teodora
typo

Hmm, that would remove everything inside the parent container and basically I need to remove only the parent container but leave the items, then just "re-arrange" it to wrap different number of items, if that makes sense? Not sure if I am explaining correctly

Edited March 30, 201511 yr by teodora

Thank you NOCK I need to think about it and see if there's a better way.

You can just unwrap them. Try changing your resize function to:

$(window).resize(function(){
	$('.my-item').unwrap();
	wrapItems();
});

That will unwrap them before running the function again.

Edited March 30, 201511 yr by Mikec1uk

Thanks Mike, this didn't do the trick though, my items unwrap but fail to wrap.

Might be something else in my js interfering.

Not sure if this is what your after, but..

 

http://jsfiddle.net/Lafugxaw/

 

I refactored your code slightly, to get rid of the for loops, and the $.function should be re-usable should you need it again.

That's fantastic, thank you Wynn - just what I had in mind