Geek Answers Handbook

JQuery: changing div placement based on browser width

I have 28 divs, all floating to the left with a width and 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 through jquery. I did it like that.

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

It works great! But what I would like to do is change the "inner" position of the div to an nth-child position based on the width of the browser, and I managed to work it out a bit.

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’ll tell you how my browser displays the “internal” div after the 10th “test” div, when the browser browser width exceeds 440 pixels. Again, this works, a few. It successfully displays the "inner" div in the correct position when the browser width exceeds 440 pixels, and also does not show the div when the browser width is below 440 pixels. But the huge problem is that whenever a window is resized, a whole bunch of divs start to be created. This is very puzzling to me. Here is jsFiddle to demonstrate my problem:

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

You will see that at first glance it works fine, but if you resize the HTML window in jsfiddle, the creation of the heap div will begin. In fact, the div should always remain in the right place immediately after the 10th inner div. Instead, it simply creates a bunch of other divs when the window is resized.

If someone can help me solve this problem and get this little problem that will work correctly in jsfiddle, this will mean a ton for me! :)

+4
source share
2 answers

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 that what you wanted? In your version, the resize function calls .after () many times, adding many new divs. It should work this way

EDIT: With @pete s suggestion, it's easier to add new color 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 need to add the css rule for class test1.

+2
source

I think the problem may be that your solution has no state. He does not know if you are switching to the width of the sub-440 or if you are already already. Therefore, every time you resize, you add another div. In this simple case, I would suggest checking for the presence of your test div before adding it.

Not sure if this is what you intend, but it might be worth it to remove the test div if the width is greater than 440.

0
source

More articles:


All Articles