Possible fadein bug?

Hi guys,

I've worked with Jquery for a while now so I'm quite confident with the ins and outs. However I've come across something that's got me stumped. I'm in the process of creating a website for a record label, and have designed the site in such a way that there is only one actual page and that each individual "page" is simply a div that fades in and out along with its own individual background. The problem that I've come across is that upon first arriving at the site the front "page" fades in as expected, clicking the link for a new page works fine, the previous div fades out and the new one fades in (I can see the new div fades in as it has a border), however the content inside the new div (text, images, everything) is nowhere to be seen! I'm completely baffled, I've tinkered for a day or two now and made things as verbose as possible to identify the problem, but no, I'm stuck! I hope someone on here can find this bugger of a problem!

Here's the Jquery and HTML. I'll give you guys a link to a live version when I get in from work (not hosted yet so it'll be a home server jobbie).

$(document).ready(function() {

$("#content-home").fadeOut("fast");

$("#content-artists").fadeOut("fast");

$("#content-studio").fadeOut("fast");

$("#content-contact").fadeOut("fast");

$("#content-lafolie").fadeOut("fast");

$("#background-lafolie").fadeOut("fast");

$("#content-home").fadeIn("fast");

$('a.panel').click(function () {

$('a.panel').removeClass('selected');

$(this).addClass('selected');

target = $('a.selected').attr('href');

content = '#content-'+target

background = '#background-'+target

$("#content-home").fadeOut("fast");

$("#content-artists").fadeOut("fast");

$("#content-studio").fadeOut("fast");

$("#content-contact").fadeOut("fast");

$("#content-lafolie").fadeOut("fast");

$("#background-lafolie").fadeOut("fast");

$(background).fadeIn("fast");

$(content).fadeIn("fast");

return false;

});

});

And a small sample of the HTML:

<div id="background-lafolie" class="background"></div>

<div id="background"></div>





<div id="bannerstretch"></div>

<div id="bannerwrapper">

  <div id="bannercentre">

   <div id="navmenu">

   <div id="navartists"><a href="artists" id="artists" class="panel">Artists</a></div> / <div id="navstudio"><a href="studio" id="studio" class="panel">Studio</a></div> / <div id="navcontact"><a href="contact" id="contact" class="panel">Contact</a></div> / <div id="navstudio"<a href="http://tuftyrecords.bigcartel.com" target="_BLANK" id="store">Store</a></div></div>

   <div id="tuftysmall"><a href="home" id="home" class="panel"><img id="tuftysmallimg" src="images/tuftysmall.png"><img id="invertimg" src="images/tuftysmallinvert.png"></a></div>

   <div class="artistsdropdown"><a href="lafolie" class="panel">La Folie</a></div>

  </div>

</div>



<body>

<div id="contentwrapper">



<div id="content-home" class="content">

  <div class="innerwrapper">

   <div class="left">

   <div class="flexcroll">

   <h1>Latest News</h1>

   <?php

   $time=mktime();

   $newsarray=mysql_query("SELECT * FROM `news` ORDER BY `time` DESC LIMIT 10");

   while($news = mysql_fetch_array($newsarray)) {

   $timestamp = $news['time'];

   $time = gmdate("F j, Y, g:i a", $timestamp);

   echo "<div class=\"wrdLatest\" id=".$news['id'].">";

   echo "<h2>".$news['subject'] . "</h2>";

   echo "<p>".$news['body'] . " </p>";

   echo "<p><h3>Posted by <b>".$news['by'] . "</b> on $time</p></h3>";

   echo "<br/><br/>";

   echo "</div>";

   }

   ?>

   </div>

   </div>

   <div class="topright">

   <div class="flexcroll">

   <h2>New Releases</h2>

   <a href="http://itunes.apple.com/us/album/risus-sardonicus/id315358312" target="_BLANK">

   <img class="sleevethumb" src="images/risussardonicus.jpg" width="75" height="75"/>

   </a>

   <a href="http://itunes.apple.com/us/album/interlopers/id315351204" target="_BLANK">

   <img class="sleevethumb" src="images/interlopers.jpg" width="75" height="75"/>

   </a>

   </div>

   </div>

   <div class="bottomright">

   <div class="flexcroll">

   <?php

   $time=mktime();

   $newsarray=mysql_query("SELECT * FROM `news` ORDER BY `time` DESC LIMIT 10");

   while($news = mysql_fetch_array($newsarray)) {

   $timestamp = $news['time'];

   $time = gmdate("F j, Y, g:i a", $timestamp);

   echo "<h2>".$news['subject'] . "</h2>";

   echo "<p>".$news['body'] . " </p>";

   echo "<p><h3>Posted by <b>".$news['by'] . "</b> on $time</p></h3>";

   echo "<br/><br/>";

   }

   ?>

   </div>

   </div>

  </div>

</div>





<div id="content-artists" class="content">

  <div class="innerwrapper">

   <div class="left">

   <div class="flexcroll">

   <h2>Tufty Records</h2>

   <a href="lafolie" class="panel">

   <div class="portrait">

   <img src="images/lafolieportrait.jpg" alt="La Fole" title="La Folie" width="100px" height="100px"/>

   <div class="details">

   <h3>La Folie</h3>

   </div>

   </div>

   </a>

   </div>

   </div>

   <div class="right">

   <div class="flexcroll">

   <h2>Bands in the Studio</h2>

   <p>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu est id dui placerat commodo. Duis non est ipsum, imperdiet imperdiet orci. Aliquam sit amet neque diam. Nullam vel felis at nunc pharetra volutpat. Pellentesque luctus, nulla at aliquam scelerisque, ante ante suscipit sem, non venenatis elit metus sit amet dui. Duis mollis nulla fermentum enim feugiat a semper purus consequat. Aliquam id nunc est. Vestibulum ut enim massa, non fringilla arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eget pharetra tortor. Ut et velit sem.

   </p>

   <p>

   Nullam lobortis aliquet suscipit. Proin in fermentum nisl. Phasellus at tortor nec elit rutrum pretium at eget ipsum. Cras vel varius ante. Aenean rutrum ligula a quam tincidunt euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam laoreet gravida tellus, in mattis leo faucibus non. Aenean vulputate mattis interdum. Curabitur tincidunt urna in sem hendrerit auctor. Duis eu velit augue, ac commodo massa. In sed orci a enim fermentum adipiscing. Phasellus sollicitudin congue ipsum, eget blandit mauris congue eu. Duis magna purus, interdum at egestas eu, lacinia vel mauris. Mauris mattis elementum eros et viverra. Nam semper condimentum viverra. Nulla imperdiet odio et ipsum mattis aliquet.

   </p>

   <p>

   Aliquam id dui quis mauris ullamcorper aliquet ac eu velit. Phasellus ut leo enim, eget viverra nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac nibh nibh, vitae viverra justo. In hac habitasse platea dictumst. Curabitur sem elit, laoreet in aliquet sed, gravida vel neque. Ut pulvinar, justo sed eleifend gravida, risus odio molestie nulla, et porttitor justo odio at eros. Etiam sollicitudin congue nunc, id adipiscing nunc elementum iaculis. Cras commodo accumsan urna ac iaculis. Praesent nec sapien quis felis viverra tincidunt a nec ligula. Quisque cursus leo non velit scelerisque vel mollis sapien pharetra. Maecenas dictum risus eu est ullamcorper id ultrices nibh pulvinar. Nullam accumsan pharetra sapien, sed bibendum eros fringilla ultricies. Morbi at nulla velit, sit amet scelerisque nisi. Phasellus sed felis vel justo interdum dictum.

   </p>

   <p>

   Nullam malesuada aliquet tortor, vel porttitor ligula ornare eget. Praesent sed nisi nunc. Aenean eleifend est lorem, sit amet vestibulum dolor. Nulla et diam quam. Morbi ac ipsum et nisl vestibulum ornare sit amet sed nunc. Quisque laoreet, nibh id lobortis mollis, quam elit sollicitudin risus, sed pretium velit risus ullamcorper libero. Sed felis diam, molestie sed mattis eu, pretium ut diam. Nunc ac ornare risus. In malesuada porta placerat. Suspendisse vitae elit vitae enim lacinia eleifend. Suspendisse ut ipsum vel diam scelerisque blandit nec et nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

   </p>

   </div>

   </div>

  </div>

</div>

If anyone can provide any information on this problem I will be most grateful! I'm assuming its something to do with how fadein() and fadeout() handle the CSS "display" value, since the Develop Console on Safari shows that the content divs are given "display:none", but to be quite honest I think I've stared at it for far too long and have lost the plot!

Thanks in advance,

Matt Shimwell

matt@tuftyrecords.com

Topic Participants
matt

Possible fadein bug?

Possible fadein bug?

Topic Participants

matt