Not able to set loading img at middle of i frame while image is work in separate page

**shiv.mymail** · September 15th, 2012, 05:40 AM

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

**PeejAvery** · September 15th, 2012, 01:12 PM

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.

**shiv.mymail** · September 16th, 2012, 11:38 PM

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.

**PeejAvery** · September 17th, 2012, 04:38 PM

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.

Thread: Not able to set loading img at middle of i frame while image is work in separate page

Thread Tools

Display

Not able to set loading img at middle of i frame while image is work in separate page

Re: Not able to set loading img at middle of i frame while image is work in separate

Re: Not able to set loading img at middle of i frame while image is work in separate

Re: Not able to set loading img at middle of i frame while image is work in separate

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions