JavaScript Not able to set loading img at middle of i frame while image is work in separate page
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 4 of 4

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

Threaded View

  1. #1
    Join Date
    Sep 2012
    Posts
    2

    Post 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 02:07 PM. Reason: Added code 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
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center