View Full Version : Special Effects upon Page Enter

04-25-2007, 11:37 AM
1) Script Title: Special Effects upon Page Enter

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex3/document2.htm

3) Describe problem: I cannot figure out why this script does not work at my pages: http://members.home.nl/beluisterenswaardig/

There should be a transition now between pagina1 and pagina2.

04-25-2007, 12:27 PM
The defect of this special effect is it is an IE based one.

Are you sure that you've mentioned something like the following in your pages

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=17)">

04-25-2007, 02:12 PM
I am sure that I have mentioned this in de "head" section:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=4.0)"/>

04-25-2007, 02:44 PM
Strange it is working for me.

04-26-2007, 04:20 PM


04-26-2007, 05:23 PM
Not working here. You need to change the order of things in the head:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Microsoft FrontPage 4.0" />
<title>Website Title</title>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=4.0)"/>
<link rel="stylesheet" type="text/css" href="private/style.css" media="screen,projection" />

Nothing, with the possible exception of the title tag should come before meta tags in the head section.

04-27-2007, 09:57 AM
I never knew about that meta tag thing.
It is working now, but it is effecting the page because during the transition, there appears an horizontal line at the top of the page!

Ofcourse now I tried a lot of combinations to order the meta tags, but that line won`t disappear.

Now I suppose I have to forget the transition idea.
Thanks anyway for your worthfull advise.

04-27-2007, 10:03 AM
Is it possible that the line is a problem with your HTML or CSS? I can't test in IE, and so I can't see the blend.

04-27-2007, 12:31 PM
Is it possible that the line is a problem with your HTML or CSS? I can't test in IE, and so I can't see the blend.

That gave me the idea to check in IE and it is actually the page's background.gif image that has the white artifact in it. I converted it to an equivalent PNG image and will attach that in a zip file. It looks the same, is about the same number of bytes, but doesn't have the artifact:


04-28-2007, 03:21 PM
The background certainly got something to do with it.
I used your zipped background.png. Mentioned it into my style.css.
And that white horizontal line was gone.

But a new problem did arise when i "enlarged" my page. (see pagina2)
The background.png exactly takes 1024px and becomes white after that number.
Using it as background.gif solves that problem, but brings back that horizontal line.
Is there a way to deal with that?

04-28-2007, 03:52 PM
From your stylesheet (change in red):

body { background-color: navy; background-image: url('images/background.png');
background-repeat: repeat-x; background-attachment: fixed;
text-align: center; color: #777; font-family: Arial, sans-serif;
font-size: 0.8em; padding: 15px; background-position: top }

You need a fixed background attachment for this. The image isn't tall enough otherwise. I doubt that the .gif would work with that huge page either, with the background attachment of scroll and repeat of repeat-x styles.

Also, I changed the color to navy, left is not a color.

04-29-2007, 11:02 AM
Not only the transition works like a charm but using your background.png also is obvious a step forward.
When I used the .gif image, it was gradient 1024 px en after that it repeated the brightest colour all over the page.

Good job. Thanks for your attention!

04-29-2007, 02:08 PM
I didn't even think about the screen height though. If someone has a screen with a height greater than 1024px and is using it, there will still be a blank area at the bottom. However, if you use background-repeat:repeat; - then at least they will get the gradient starting over, rather than white stuff at the bottom. Most folks (those with 1024 high screens and less) will be unaffected by this change.