Databases
StackOverflow2013
Postsdbo
POChanging page "theme" along with div content
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging page "theme" along with div content
    primarykey
    data
    text
    <p>I'm relatively new to jQuery, and I'm currently having trouble with transitions and AJAX content.</p> <p>There are basically 4 pages, each with their own "theme" (a unique background image with a tinted overlay DIV).</p> <p>I've posted the code below. It <strong><em>looks</em></strong> right to me, in theory. but of course it is not working.</p> <p>The comments in the code explain the process that I would like to see happen.</p> <pre><code> $(document).ready(function() { // begin 'photography' theme transition $('a.photography').click(function() { // 1. these next two lines hide the content containers and their data $('#contentCanvas_A').fadeOut().hide(); $('#contentCanvas_B').fadeOut().hide(); // 2. animate/fade the tint color for the #contentCanvas overlay $('#Window').animate({ backgroundColor: "rgba('67,32,12,0.8')}, "slow"}); // 3. seamless fade swap of the &lt;body&gt; background image possible? $('body').css('background-image','url(bgimage-photography.jpg)').fadeIn("slow"); // 4. Finally, fade in new content from external HTML file $('#contentCanvas_A').stop().load("photography.html").delay(800).fadeIn("slow"); }); </code></pre> <p>... and this is how the HTML link would look:</p> <pre><code>&lt;a class="photography" href="" title="online photo gallery"&gt;Photography&lt;/a&gt; </code></pre> <p>Is this the proper/efficient way of doing it? Trying it using variables and the "#" symbol doesn't seem to work.</p> <p>Some notes:</p> <p>I have attempted to create a separate DIV that has the background image, but I could not get it to fill the entire screen -- it only showed the first 5 pixels or so at the top. Therefore, as shown in the code, I'm trying to change the background image for the actual <em>body</em> element instead.</p> <p>The "photography.html" file (and others similar) contains just the DIVs for its own content layout, nothing else.</p> <p>I would greatly appreciate guidance with this. Thanks all!</p>
    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. USrelativelycoded
    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. COYou need to explain what exactly isn't working. And be sure to use absolute paths when changing background images in JS.
      singulars
      1. POChanging page "theme" along with div content
      1. USmaxedison
    2. COWhen I click on the link, it simply reloads the current page with no changes (no fade, no color change, nothing) instead of running the jquery function as expected. The script itself runs fine; I checked the error console, and my jQuery is syntactically correct. Changed URIs to absolute paths, but it makes no difference.
      singulars
      1. POChanging page "theme" along with div content
      1. USrelativelycoded
 

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