Solved

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

Posted on 2008-10-26
6
3,511 Views
Last Modified: 2013-11-11
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
Comment
Question by:RichardMass
  • 3
  • 2
6 Comments
 
LVL 6

Assisted Solution

by:slinkygn
slinkygn earned 100 total points
ID: 22810252
Should just be
$("#contentwrapper").fadeOut();

shouldn't it?
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22810312
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
 
LVL 16

Expert Comment

by:sh0e
ID: 22810316
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 6

Expert Comment

by:slinkygn
ID: 22810340
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
 
LVL 16

Accepted Solution

by:
sh0e earned 400 total points
ID: 22810357
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
 
LVL 1

Author Comment

by:RichardMass
ID: 22810406
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now