Solved

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

Posted on 2008-10-26
6
3,545 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

832 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