Databases
StackOverflow2013
Postsdbo
POHow to append/remove elements on resize without duplicating them
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to append/remove elements on resize without duplicating them
    primarykey
    data
    text
    <p><strong>UPDATE</strong> 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).</p> <p>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:</p> <pre><code>function appendElements() { //swap in desktop content if (window.matchMedia("(min-width: 1100px)").matches) { jQuery("#bg_container").append("\ &lt;div id='BG' class='bg_images' data-stellar-ratio='.5'&gt;\ &lt;img src='img/bg/bg1.png'/&gt;\ &lt;/div&gt;\ "); } appendElements(); </code></pre> <p>And here is an example of the empty function:</p> <pre><code>function emptyContainers() { if (window.matchMedia("(max-width: 1099px)").matches) { jQuery("#bg_container").empty(); } } </code></pre> <p>I added the emptyContainers function to a resize event:</p> <pre><code>jQuery(window).resize(function(){ emptyContainers(); }); </code></pre> <p>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.</p> <p>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.</p> <p>Any ideas? Thanks in advance!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAPAD1
    1. USAPAD1
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COcouldn't you just use media queries with pure CSS?
      singulars
      1. POHow to append/remove elements on resize without duplicating them
      1. USDoorknob
    2. CONo, because there are too many elements that need to be loaded on the page, I want the mobile version to only load 5 images of the elements in their final position and set those as background images for each div instead of loading all the elements and then hiding them.
      singulars
      1. POHow to append/remove elements on resize without duplicating them
      1. USAPAD1
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload