CODEWITHSUNDEEP
javascriptjqueryappendwindow-resize
APAD1
APAD1

Reputation: 13666

How to append/remove elements on resize without duplicating them

UPDATE This is why I am not using media queries: The site is a parallax site which has about 60-70 individual images that animate within each div. Originally I coded the site using straight media queries but that ended up not working because the site would load extremely slow on 3G connection. Now what I am doing is I have created 5 screenshots with all of the elements in their final positions and I am setting those as the background images for the divs by default. Then if it is detected that the screen width is above 1100px(assuming faster internet connection) it will remove the background images and append all of the individual assets within the divs. (let me know if there is a better way to accomplish this).

I have a parallax site which is using jQuery to append elements into the slide divs if the browser width is 1100px or greater and another function to empty those divs if the window is resized smaller than 1100px. I am trying to set this up so that the elements will append and empty automatically as the browser is resized. Here is an example of the append function:

function appendElements() {
    //swap in desktop content
    if (window.matchMedia("(min-width: 1100px)").matches) {
    jQuery("#bg_container").append("\
        <div id='BG' class='bg_images' data-stellar-ratio='.5'>\
            <img src='img/bg/bg1.png'/>\
        </div>\
    ");
}
appendElements();

And here is an example of the empty function:

function emptyContainers() {
    if (window.matchMedia("(max-width: 1099px)").matches) {
        jQuery("#bg_container").empty();
    }   
}

I added the emptyContainers function to a resize event:

jQuery(window).resize(function(){
    emptyContainers();   
});

This works as it should, if I start out with my browser at a width of 1100+ px, it correctly shows the appended assets and then if I resize the browser below 1100 it removes the assets from the containers. The problem is going back the other way. If I try to resize from below 1100 back up to above 1100 the elements are not re-appended.

I tried adding the appendElements function to the resize event as well, but this caused all of the elements to duplicate so that there were multiple instances of each element on the page.

Any ideas? Thanks in advance!

Upvotes: 0

Views: 4392

Answers (3)

DutGRIFF
DutGRIFF

Reputation: 5223

Try adding a line to your code to check if the element exists. If is doesn't then add it. If it does then do nothing. 

function appendElements() {
//swap in desktop content
if (window.matchMedia("(min-width: 1100px)").matches) {

  if($("#BG").length == 0){

    jQuery("#bg_container").append("\
      <div id='BG' class='bg_images' data-stellar-ratio='.5'>\
          <img src='img/bg/bg1.png'/>\
      </div>\
    ");

  }

}
appendElements();

Media Queries are the obvious answer here but he made a comment about avoiding media queries.

Upvotes: 2

Dan Baker
Dan Baker

Reputation: 1827

Like Doorknob says the best way might be with pure media queries. Don't change the dom at all just choose how many you display based on screen width.

something like 

#bg_container bg_images {
    display: none;
  }

@media all and (min-width: 1100px) {
  #bg_container bg_images {
    display: block;
  }
}

Even better you can select how many you show based on size with

#bg_container bg_images {
    display: none;
  }
@media all and (min-width: 500px) {
  #bg_container bg_images:nth-child(-n+2){ // change 2 to howevermany you want
    display: block;
  }
}    
@media all and (min-width: 1100px) {
  #bg_container bg_images {
    display: block;
  }
}

Upvotes: 0

Wyatt
Wyatt

Reputation: 2519

When you remove the containers, set a boolean flag to true, and false when you add them back. While the below will work as you asked, I would strongly recommend pure media queries where feasible. They are a much cleaner solution.

var containersRemoved = False;

jQuery(window).resize(function(){
  if (window.matchMedia("(min-width: 1100px)").matchescontainersRemoved) {
    if(containersRemoved){
      appendElements();
      containersRemoved = False;
    }
  }else{
     if(!containersRemoved){
       emptyContainers();
       containersRemoved = True;
     }
  }   
});

function appendElements() {
  jQuery("#bg_container").append("\
    <div id='BG' class='bg_images' data-stellar-ratio='.5'>\
      <img src='img/bg/bg1.png'/>\
    </div>\
  ");
}

function emptyContainers() {
  jQuery("#bg_container").empty();  
}

Upvotes: 1

Related Questions