CODEWITHSUNDEEP
jqueryresizecss-selectors
Dyck
Dyck

Reputation: 2685

jQuery: changing div placement based on browser width

I have 28 divs, all floated left with a width & height of 200px with 5px margins on the right and bottom of each div. I have successfully figured out how to place other divs after other divs via jquery. I did it like so.

$( '.inner:nth-child(10)' ).after( '<div class="test">');

This works great! But what I would like to do is change the "inner" div classes nth-child position based on browser width and I've managed to get it working, somewhat.

Here is the code I'm using:

var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize > 440) {
     $( '.inner:nth-child(10)' ).after( '<div class="test">');
    }
}

// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

So I'm telling my browser to display the div "inner" after the 10th "test" div when the viewers browser width exceeds 440px. Again, this works, somewhat. It successfully displays the "inner" div in the correct position when the browser width exceeds 440px, and it also doesn't show the div when the browser width is below 440px. But the huge problem is that whenever the window is resized, a whole bunch of divs start to be created. This is very puzzling to me. Here is the jsFiddle to demonstrate my issue:

http://jsfiddle.net/EUqEm/2/

You will see that at a glance it appears to be working fine but if you resize the HTML window within jsfiddle, a bunch of divs start to be created. In actuality, the div should always remain in the correct spot, right after the 10th inner div. Instead, it just creates a bunch of other divs when the window is resized.

If anyone could help me out with a solution to this problem and get this little issue working properly within jsfiddle, it would mean a ton to me! :)

Upvotes: 4

Views: 961

Answers (2)

nowhere
nowhere

Reputation: 1548

Can you try this?

    var $window = $(window);
var resized=false;
function checkWidth() {

    var windowsize = $window.width();
    if (windowsize > 440) {
        //if the window is greater than 440px wide then place the "inner" div after the 10th "test" div
        if(resized==false){
     $( '.inner:nth-child(10)' ).after( '<div class="test">');
            resized=true;
        }
    }
     if (windowsize <= 440) {
         $('.test').remove();
         resized=false;
     }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

Is this what you wanted? In your version the resize function is calling .after() many times, adding a lot of new divs. It should work this way

EDIT: With @pete s suggestion it's easyer to add new colored divs. 

    var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize > 440) {
        //if the window is greater than 440px wide then place the "inner" div after the 10th "test" div
        $('.test').remove();
     $( '.inner:nth-child(10)' ).after( '<div class="test">');
    }else{
        $('.test').remove();
    }
    if (windowsize > 500) {
        //if the window is greater than 440px wide then place the "inner" div after the 10th "test" div
        $('.test1').remove();
     $( '.inner:nth-child(12)' ).after( '<div class="test1">');
    }else{
         $('.test1').remove();
    }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

You just have to add the css rule for the test1 class.

Upvotes: 2

axzr
axzr

Reputation: 682

I think the problem might be that your solution has no state. It does not know if you are transitioning to a sub-440 width or if you are already narrower than that. Consequently, each time the resize triggers you add another div. For this simple use case I'd suggest checking for the existence of your test div before adding it.

Not sure if it's what you intend but it might be worth removing the test div if the width is greater than 440 too.

Upvotes: 0

Related Questions