Fade out page on click, render new page (using JQuery.

Hi everyone,

One of your colleagues (Sh0e) was nice enough to provide me with a starting point while learning JQuery for the first time. It is great and works almost perfectly though I am having a hard time trying to modify it to fit my needs.

Be warned, this is probably a very n00b question and more than likely a simple fix.

I am using the code below to fade out my page when a visitor clicks any of my links, once fadeout is complete, the visitor will be taken to the page they selected. Pretty easy?

The problem I am having is trying to modify the script below to only fade out my main content wrapper (DIV: #contentwrapper) and not the entire page as it takes away my body background image which creates a flashing effect momentarily.

The second problem with the same script is that it targets any <a href> on my page which is problematic as I have some tab pages etc. So the second modification I am hoping for help with is to make the script be targeted by links individually. For example: <a href="#" onclick="points-to-script">test</a> and <a href="#">test2</a> behaves like a normal link

Any assistance on this would be hugely appreciated.

Richard
<script type="text/javascript">
$(document).ready(function(){
        jQuery('a').click(function(){
        jQuery(document.body).fadeOut();
        setTimeout("nav('"+this.href+"')",2000);
        return false;
    });
});
 
function nav(href){
 location.href=href;
}
</script>

Open in new window

LVL 1
RichardMassAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

slinkygnPresidentCommented:
Should just be
$("#contentwrapper").fadeOut();

shouldn't it?
0
sh0eCommented:
It is indeed as slinkygn says.  Add it into $(document).ready.

Just so you realize, jQuery and $ are the same thing, but you will want to use jQuery if you need compatibility (with Prototype for example), as they both use $.  This is a compatibility feature.
The below will only target links with a certain "class".
<script type="text/javascript">
$(document).ready(function(){
        jQuery('a.fademe').click(function(){
          jQuery(document.body).fadeOut();
          setTimeout("nav('"+this.href+"')",2000);
          return false;
    });
});
 
function nav(href){
 location.href=href;
}
</script>
<a href="test" class="fademe">fade link</a>

Open in new window

0
sh0eCommented:
Modified it to fit your page.  I am using jQuery instead of $, in case you still want to use Prototype+Scriptaculous.  This is one of the big pluses of jQuery.
<script type="text/javascript">
jQuery(document).ready(function(){
          jQuery('a.fademe').click(function(){
          jQuery('DivLayout-Fadewrapper').fadeOut();
          setTimeout("nav('"+this.href+"')",2000);
          return false;
    });
});
 
function nav(href){
 location.href=href;
}
</script>
<a href="test" class="fademe">fade link</a>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

slinkygnPresidentCommented:
A quick note:

The second looks good; of course, the 'DivLayout-Fadewrapper' in line 4 would be your '#contentwrapper'.

If I understood correctly, I don't think you'll want to use the first.  It still applies the fade to the body, which will give you the flicker problem you were getting originally.
0
sh0eCommented:
Forgot something.  BTW slinkygn I'm doing this based on the information from another thread.
FYI: http://www.richardmassey.com.au
<script type="text/javascript">
jQuery(document).ready(function(){
          jQuery('a.fademe').click(function(){
          jQuery('#DivLayout-Fadewrapper').fadeOut();
          setTimeout("nav('"+this.href+"')",2000);
          return false;
    });
});
 
function nav(href){
 location.href=href;
}
</script>
<a href="test" class="fademe">fade link</a>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RichardMassAuthor Commented:
Thank you so much guys... Should hopefully be the last time I have to bug you all for issues on JQuery (at least regarding this onload / fade issues).

I apologise for not mentioning the previous thread, it would have certainly helped Slinkygn to have known the background story as well so I am very sorry.

I hope no one is concerned at the separating of points awarded, I have only provided the majority to Sh0e as he spent the time on getting the code into mine which is n no way should seem like I under estimate the assistance by Slinkygn.

Thank you again to both of you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.