PDA

View Full Version : i want show loading.gif with #iframe in ajax tab.



kenphan19
04-21-2008, 02:04 AM
1) Script Title: Ajax Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem: Tab Content Script (v 2.2) is a cool content, but i want it show loading.gif with rel="#iframe". Please help me,
thank so much before

ddadmin
04-21-2008, 07:27 AM
Hmm there's no easy way to do this unfortunately. There's no way for JavaScript to know when pages inside the IFRAME are fully loaded (unless there are all within your own domain), and hence know when to dismiss the "loading" gif. Even if the pages loaded are within your own domain, there are other issues to contend with.

davorelli
05-01-2008, 05:26 PM
Hmm there's no easy way to do this unfortunately. There's no way for JavaScript to know when pages inside the IFRAME are fully loaded (unless there are all within your own domain), and hence know when to dismiss the "loading" gif. Even if the pages loaded are within your own domain, there are other issues to contend with.

:) I found John's script (below) which resolves the issue you mentioned (above). I've tried to work it in and couldn't get it displaying, but maybe it's the lack of skill on my part.
Resolving it would be a great help, cause without 'loading message' the user is staring into a blank container, while the external page is loading via iframe.

Thank you,

davorelli


Here's a working example of what I was talking about:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Iframe Loading Notice - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#holder, #holder iframe {
position:relative;
width:500px;
height:400px
}
#loading {
height:50px;
width:125px;
padding:1ex;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-63px;
display:none;
border:2px groove gray;
background-color:#cccccc;
color:#333333;
}
</style>
<script type="text/javascript">
var loadit=function(){
var f=document.getElementById('myframe'), l=document.getElementById('loading').style;
l.display='block';
if(f.onload==null){
f.onload=function(){l.display='none'};
if(window.attachEvent)
f.attachEvent('onload', f.onload);
}
return true;
}

</script>
</head>
<body>
<div id="holder">
<iframe id="myframe" name="myframe" src="about:blank" scrolling="auto" frameborder="1"></iframe>
<div id="loading">Loading . . .</div>
</div>
<a href="http://www.google.com/" target="myframe" onclick="return loadit();">Google</a><br>
<a href="http://www.dynamicdrive.com/" target="myframe" onclick="return loadit();">Dynamic Drive</a>
</body>
</html>