Iframe page load transition

HTML & CSS
1

I use this to attempt a smooth transition between pages and trying to remove a “white flash” look with page loads in the frame.

<iframe class="main" style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="information.asp" frameBorder="0" name="content"></iframe>

Question: Is this the best method to accomplish a similar “AJAX” type page load look (smooth and seamless) ?

Thank you

2

Hi there javascript7,

no need for javascript, CSS will do this for you…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #eef;
    font: normal 1em / 1.6em sans-serif;
 }
.main {
	display: block;
	width: 100%;
	max-width: 50em;
	margin: auto;
	border: 0;
	animation: fadeIn 10s forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}   
</style>

</head>
<body>

<iframe class="main" src="https://www.example.com"></iframe>

</body>
</html>

coothead

2 Likes
3

Thank you - so essentially, you are using a fadeIn to accomplish the softer look. Is it accurate to say that without the fadeIn you are stuff with a jumpier look?

Thanks

4

I do not understand that. :unhappy:
Bear in mind, though, that I’m well known for my obtuseness. :wonky:

Does the CSS work satisfactorily for your stated problem?

coothead

5

I have worked with you before and you are brilliant!!!

Actually, I had 2 iframes, one a menu and then the main target. I thought that…

helped with the transition too. I also had a fadeIn already in place.

I did try your method which worked fine, but it worked the same as mine since I too had a fadeIn.

What I was looking for without have to use a fadeIN is code (that I couldn’t find anywhere) that would give the appearance that when a page loads, one after another, that it doesn’t “flash” or have that refresh look. From what I have discovered is that the only way to accomplish that is using a fadeIn, but I wanted to check with an expert, such as yourself, to be sure that my research was reasonably accurate. AJAX does accomplish a seamless transition without the need of a fadeIn. They are far too many people that know more than me, so I was looking for a way!!

I hope I have clarified my thoughts and am always interested in knowing your thoughts. And I do appreciate it that you took the time to respond.

Thanks

6

Hi there javascript7,

JavaScript, for me. is always a last resort to use
when all else fails, and even then I would probably
just shelve the idea and move on.

Of course, I don’t expect others to share my views
as they may have entiely different agendas, :winky:

coothead

4 Likes
7

That means that users or devices or bots that don’t have js enabled will get see nothing. Is that a good idea?

Start from a working page and then enhance with JS. Don’t make a page depend on js to work if you can help it.

You can read more here.

2 Likes
8

Paul,

Actually I tried that a few weeks ago and didn’t find it useful. I decided to go with the fadeIn instead which seems to have a better effect.

Thanks

9

The point I was making is that it is bad practice to hide something with css and then reveal it with JS.

Hide it with Js and reveal it with Js and you will do no harm Or just use css as in @coothead version.

2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.