Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3627
  • Last Modified:

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

0
RichardMass
Asked:
RichardMass
  • 3
  • 2
2 Solutions
 
slinkygnCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
slinkygnCommented:
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
 
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

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now