Inserting div after and before on window resize

Question

I want to take each div with class of top and insert inside the div with a class of .blurb...Problem is that it adds too many repeated elements and crashes the page..Here is a code below

<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>

<div class="blurb">
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
</div>

<div class="blurb">
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
</div>

<div class="blurb">
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
    <p>Blurb Copy</p>
</div>

function sizeUpdate() {
    var width = $(window).width(); // Get window width
    var height = $(window).height(); // Get window height

    $('.top').each(function(){
        if (width < 993) {        
            $(this).insertAfter('.blurb');
        } else if (width > 992) {
            $(this).insertBefore('.blurb');
        }
    });
};  

$(document).ready(sizeUpdate); // When the page first loads
$(window).resize(sizeUpdate); // When the browser changes size

I would guess 3, but it would be nice if OP would give an example of expected result — Seth McClaine, May 22 '15 at 21:57
Yes, my biggest confusion is if he's trying to add all three tops to each blurb or just wants one each. Kind of hard to predict since it's not exactly a real world problem. — Lawrence Johnson, May 22 '15 at 22:01
http://stackoverflow.com/questions/16578129/before-after-resize-event — AmmarCSE, May 22 '15 at 22:16

score 1 · Accepted Answer · answered May 22 '15 at 22:05

1

I suppose you are trying to achieve this:

    $('.top').each(function(index){
    if (width < 993) {        
        $(this).insertAfter($('.blurb')[index]);
    } else if (width > 992) {
        $(this).insertBefore($('.blurb')[index]);
    }
});

answered May 22 '15 at 22:05

Vitaliy Gorbenko

490
4
14

score 0 · Answer 2 · answered May 22 '15 at 22:04

0

var canInsert = true;

 $('.top').each(function(){
        if (width < 993 && canInsert) {        
            $(this).insertAfter('.blurb');
            canInsert=false;
        } else if (width > 992 && canInsert) {
            $(this).insertBefore('.blurb');
            canInsert=false;
        }

        setTimeout(function(){
            canInsert = true;
        }, 500);
    });

answered May 22 '15 at 22:04

stackoverfloweth

6,669
5
38
69

This would theoretically prevented from inserting unless at least 500 milliseconds have gone by – stackoverfloweth May 22 '15 at 22:05

Lawrence Johnson · Answer 3 · 2015-05-22T22:16:13.310

Assuming all three tops to each blurb, you could do this:

$('.blurb .top').remove();
$('.top').each(function() {
    var __top = $(this);
   if (width < 993) {        
        $(this).clone(true).insertAfter('.blurb');
    } else if (width > 992) {
        $(this).clone(true).insertBefore('.blurb');
    }
});

Basically, just clear the blurb tops before adding them. I also added the clone property, because assuming you want to add these and not just move them, you'll need duplicates of the original.

Inserting div after and before on window resize

3 Answers3