Solved

Cross Browser Page Fade-In on load and Fade-out on click to new page

Posted on 2010-08-26
5
1,177 Views
Last Modified: 2012-08-13
I need a page to load as solid black, and then fade to reveal the page content.

When a link to another page on the site is clicked, I need the current page to fade out to black. The new page should also load as solid black and fade to reveal the page content.

I have tried a few jQuery snippets, without success.

The solution must work with Firefox, Safari, and IE. Opera would be nice.

I'd appreciate your ideas.
0
Comment
Question by:birwin
  • 3
  • 2
5 Comments
 
LVL 40

Accepted Solution

by:
RQuadling earned 500 total points
Comment Utility

document.observe
      (
      'dom:loaded',
      function()
            {
            document.body.show();
            
            document.observe
                  (
                  'unload',
                  function()
                        {
                        document.body.fade();
                        }
                  );
            }
      );

You will need to have ...



for this to work, otherwise no fade in.

0
 
LVL 40

Expert Comment

by:RQuadling
Comment Utility
0
 
LVL 40

Expert Comment

by:RQuadling
Comment Utility
0
 
LVL 6

Author Comment

by:birwin
Comment Utility
I would far prefer to use a jQuery function, but I haven't found one that will work on the full page.
I already have jQuery running on the page. I am using the Dynamic Drive Fade In Slideshow. (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm) and any attempt that I have made to fade the page, either by trying to fade the body tag or a div wrapper, has not been successful. The image fades in, but the menu elements and other elements on the page don't fade, even when enclosed in a div.
 
 
0
 
LVL 6

Author Closing Comment

by:birwin
Comment Utility
This particular page was loaded with other JavaScript and jQuery code, and was never able to get a page transition to work on it, but your code does work on a normal HTML page.

Thanks for the code.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

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 …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

772 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

9 Experts available now in Live!

Get 1:1 Help Now