Opinion on how to setup an intro page that acts like a screensaver.

[nelsonm]

Hi all,

I'm not asking for code, i'm just asking for guidance or an opinion on how to approach this request.

First the back story.
I have a charities web page where the upper half is a form that allows visitors to select various options in order to display a list (table) of charities from a MySQL database table on the lower half of the page.

What I'd like
I would like to have an intro page that acts like a screen saver when the charities page is inactive for some minutes. As soon as the visitor clicks a picture on the intro screen saver page, the screen saver page is replaced with the charities page.

The problem
Jumping from the intro page to the charities page on mouse click is no problem...

I just don't know how i would determine inactivity on the charities page so it can jump back to the intro page. I know that there is a meta tag i can use to refresh (reload) the page after some time interval, but that's as far as i have gotten.

1. How would i go about setting up a timeout function?
2. would this be a candidate for a frame page?

Any help would be appreciated.

[milosevic]

Hi nelsonm,

1. Use JavaScript - the entire functionality of this should be created with JS. Anything else would involve reloading pages. With JS you could add all this functionality and not have the page physically reload at all

2. Frames = bad, and it wouldn't be a candidate even if they weren't.

What I'd say though, is this a good idea? Websites turning into a screensaver isn't expected behaviour. Say someone lands on your page and gets a phone call, comes back 5 mins later, Your website as they saw it before is gone, they think the new thing is a pop-up and close it. Remember that many people browse with multiple tabs open and may open new pages in a tab in the background to look at later too.

[nelsonm]

This screen saver page is for a special internal web application at a museum and not for external use.

[londrum]

you could do a <div> overlay. do position:absolute at the top left corner, and make it appear with ajax. all you'd have to do to make it appear is change one of the CSS styles on the overlay from display:none to display:block

[milosevic]

@londrum that would be a decent implementation, I'm not sure that classes as AJAX though unless data is retrieved asynchronously from the server

[nelsonm]

I found this code by Guyon Roche on the internet.com site: [webreference.com...]

The third page has a demo link. It works but seems a bit complicated and i'm still not sure on how to alter it to fit my needs.

In any case, using the <div> w/ display:none/block might work as i remember using something like it on another project years ago. I'll have to dig it up to see.