PDA

View Full Version : Refresh DIV w/o Flash



rjromero
01-30-2011, 10:29 PM
Hi there, I'm working on a presentation and I'm going to store each page into a ".html"

So in example, I have...
"1.html"
"2.html"
"3.html"

Each number goes to each slide accordingly.

The way I was working the presentation out was having users load a webpage via mobile phone which contains an iframe. I'll change the src of the iframe to the desired slide; and the META refresh will handle displaying it to the user.

Now, here's the problem. It flashes on some browsers, like Blackberries.

I'd like for the content being refreshed to not flash, but appear naturally. That way, the user doesn't have to attempt to read flashing text (which gets -REALLY annoying)
------------------------------------
TLDR; I need some code to refresh a page/div without flashing the content on ALL if not MOST browsers. Thanks.
------------------------------------
I think I know how I'd solve this issue; but I'm not too sure how to "integrate it"

Perhaps, have a Javascript code keep the current "look" of the page static until "X" seconds. So, this would happen.

Page refresh -> Javascript holds page for 5 seconds -> Page finishes loading -> Original page revealed

It'd act kind of like a cover-up.

venegal
01-31-2011, 01:32 AM
There is no "holding the page". When you go from one site to another in your browser, it won't stay on the first one until the second one is fully loaded, it will just go there. And an iframe basically is a little disguised browser window, so it will do just the same.

What you can do is use another hidden iframe where you load the new page, and once it's there, swap them.

Of course, once you start using this sort of trickery, you'll probably want to have more control, and you'll want to change your iframes to divs and AJAX.

rjromero
01-31-2011, 02:09 AM
The reason I'm using iFrames instead of Divs is too embed data. I don't feel like copying & pasting all the text from each slide. I'd rather refer & change them as "1" "2" etc...

If there's a way to embed data w/ Div's that's widely supported, please, do tell.

venegal
01-31-2011, 09:30 AM
Like I said: AJAX. Should you decide to go that way, there are hundreds of premade slideshow scripts out there that will give you smooth transitions (and a preloader, so you won't have to wait when changing slides, and some loading animation, so you know what's going on if you do have to wait, and other stuff you might not have thought of).
Just google around a bit, and I'm sure you'll find what you need.

hdewantara
01-31-2011, 10:51 PM
Perhaps that would work using additional <iframe> as an overlay or cover-up,
but jitters are hard to be avoided, especially when the iframe sources are complex pages, like shown below.

The sequence is Yahoo first, then Bing, followed By Google, and back to Yaho again...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>animated iframes</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style type="text/css">
iframe{
display: block;
width: 640px;
height: 480px;
border-width: 0px;
}
#front{
position: absolute;
margin-top: -480px;
}
</style>
<script type="text/javascript">
var
anim_frame = 0,
curr_front = 1,
arr_frame = new Array(
"http://www.google.com/",
"http://www.yahoo.com/",
"http://www.bing.com/"),
timer2 = null,
timer = setInterval(
function(){
var el = document.getElementById("front");
if (el){
clearInterval(timer);
timer = setInterval(
function(){
if (curr_front < arr_frame.length-1){
curr_front++;
}
else{
curr_front = 0;
}
document.getElementById("back").src = document.getElementById("front").src;
},30000);
}
},1000);

function onload_back(){
var el_front = document.getElementById("front");
el_front.style.opacity = 0.0;
el_front.src = arr_frame[curr_front];
}

function onload_front(){
anim_frame = 0;
timer2 = setInterval(
function(){
anim_frame++;
document.getElementById("front").style.opacity = anim_frame / 10;
if (anim_frame >= 10){
clearInterval(timer2);
}
},50);
}

</script>
</head>

<body>
<iframe id="back" src="http://www.google.com/" onload="onload_back()">framing unsupported</iframe>
<iframe id="front" src="http://news.yahoo.com/" onload="onload_front()">framing unsupported</iframe>
</body>

</html>