-
September 15th, 2012, 05:40 AM
#1
Not able to set loading img at middle of i frame while image is work in separate page
I have created an html page LoadingImage.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#centerdiv
{
position:absolute;
left:50%;
top:50%;
width:48px;
height:48px;
}
#imgid
{
position:absolute;
width:48;
height:48;
}
</style>
<script type="text/javascript">
var theWidth, theHeight;
function setSize()
{
getSize();
document.getElementById("centerdiv").style.position = "absolute";
document.getElementById("centerdiv").style.left= theWidth/2-24;
document.getElementById("centerdiv").style.top= theHeight/2-24;
//alert("You have resize the browser.")
}
function getSize()
{
// Window dimensions:
if (window.innerWidth)
{
theWidth=window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
theWidth=document.documentElement.clientWidth;
}
else if (document.body)
{
theWidth=document.body.clientWidth;
}
if (window.innerHeight)
{
theHeight=window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
theHeight=document.documentElement.clientHeight;
}
else if (document.body)
{
theHeight=document.body.clientHeight;
}
}
</script>
</head>
<body onload="setSize()" onresize="setSize()">
<div id="centerdiv">
<img src="load.gif" id="imgid"/>
</div>
</body>
</html>
Note: Separate page means when we are not using i frame
I want to show an image(48x48) at the middle of window.
I have used <div> with id = 'centerdiv' as image container.
I have written the script function 'getSize()' to find the height and width of window.
Then I adjust the position of my image (load.gif) using script function 'setSize()' to the middle of window.
I have called the script function 'setSize()' onLoad and onResize of page.
Code is working for almost every browser but in seprate window.
Problem : But when I add this code inside a panel(Iframe), image is not showing at the middle of window.
LoadingImageIframe.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<body>
<iframe src="LoadingImage.html"></iframe>
</body>
</html>
I have tried so many things but nothing worked for me.
I think I am missing something.
Please suggest me how can I overcome from this problem.I am sharing code with you.So that you can easily understand the approch.
It is very critical issue.Please help us to resolve.
I will be really thankful
Last edited by PeejAvery; September 15th, 2012 at 01:07 PM.
Reason: Added code tags
-
September 15th, 2012, 01:12 PM
#2
Re: Not able to set loading img at middle of i frame while image is work in separate
As it stands, you need to define the CSS for the iframe as well.
However, using an iframe in today's web standards is a rather poor implementation...especially since you're only showing an image. Adding a frame within a page is not smart.
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
September 16th, 2012, 11:38 PM
#3
Re: Not able to set loading img at middle of i frame while image is work in separate
Can you provide me snippet of code so that easily I can understand because I have tried so many ways to implement.Bot not getting exact.
I will be thankful to you.
-
September 17th, 2012, 04:38 PM
#4
Re: Not able to set loading img at middle of i frame while image is work in separate
That depends on if you're going to take my suggestion and ditch the whole <iframe> in the middle of a page. So inefficient.
If you are, first attempt, then post back again.
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|