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

  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 01:07 PM. Reason: Added code tags

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,868

    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.

  3. #3
    Join Date
    Sep 2012
    Posts
    2

    Post 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.

  4. #4
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,868

    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
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center