Databases
StackOverflow2013
Postsdbo
POjquery load() is hiding an unrelated background image in another DOM element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery load() is hiding an unrelated background image in another DOM element
    primarykey
    data
    text
    <p>I have a div on my site ("button_form") that has a jquery .on("click") function assigned to it, such that when clicked another div ("popup_box") appears in the middle of the screen when clicked. I am using load() to populate the content of popup_box from another html source. The problem is that when the load() function is executed, it hides a completely unrelated background image on the site ("banner") </p> <p>I've tried removing the one line of the jquery (marked below as PROBLEM LINE!) and the "popup" div works perfectly, and the background image is not hidden... so I know it's load() that is the problem.</p> <p>How can I dynamically load content into my popup_box and not affect my banner background image?</p> <p>Note: the whole thing works as planned on my local machine, but when I upload it to the web, it no longer works - that is, the banner background image disappears when the button_form is clicked. Nothing has changed, the code is exactly identical, and I'm using the exact same browser.</p> <p>Thanks for your help!</p> <p>index.html</p> <pre><code>&lt;html&gt; &lt;head&gt;...&lt;/head&gt; &lt;body&gt; &lt;div id="overlay"&gt;&lt;/div&gt; &lt;div id="popup_box"&gt;&lt;/div&gt; &lt;div id="banner"&gt;&lt;/div&gt; .... &lt;div id="button_form"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>bannerSwap.js</p> <pre><code>// art var art = new Array(); art[0] = "_img/banner_database.jpg"; art[1] = "_img/banner_cloud.jpg"; art[2] = "_img/banner_trends2.jpg"; art[3] = "_img/banner_team.jpg"; var img = 1; // starting slides var qty = 4; // total number of slides function newBanner(){ //this function is executed every 4 seconds document.getElementById('banner').style.backgroundImage="url('" + art[img-1] + "')"; // set the next image in the queue if(img&lt;qty){ img++; }else{ img=1; } } </code></pre> <p>jQuery code: </p> <pre><code>$(document).ready(function(){ $('#button_form').on("click", function(){ $("#overlay").show(0); $("#overlay").fadeTo(500,0.5); $("#popup_box").show(0); $("#popup_box").animate({ height:'700px', width: '500px', margin:'125px 0 0 -250px'}, 500, // duration: // ***** PROBLEM LINE: ****** function(){$(this).load('_includes/form.html')} ); }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USp1xelarchitect
    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
    1. This table or related slice is empty.
    1. COIs there any new css files included by the `_includes/form.html` page? One problem could it is overriding the existing styles. Check the content loaded by the load and inspect the styles applied to banner using the browsers developer tools
      singulars
      1. POjquery load() is hiding an unrelated background image in another DOM element
      1. USArun P Johny
    2. COwow. you're right! i was loading a css file in the form.html which was already loaded into index.html... i removed it, and now it works! THANK YOU!
      singulars
      1. POjquery load() is hiding an unrelated background image in another DOM element
      1. USp1xelarchitect
    3. COhow do i give you credit for this?
      singulars
      1. POjquery load() is hiding an unrelated background image in another DOM element
      1. USp1xelarchitect
 

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