Solved

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

Posted on 2008-10-26
6
3,584 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

707 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