ASP.NET Samples

Saturday, September 29, 2012

Page Loading Message.

JavaScript
A main concept of this program is Onload() function.
This Onload() function trigger after the element completly load.
whether its a page or iframe or any other html elements.

Using this javascript function we can hide the iframe content at page loading time and show the iframe content at page load completly. by using page onload() function.

Html Content below...

Page Navigations

Stylesheet

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

<script type="text/javascript" language="javascript">
    function getpage(val)
    {
        hideFrame();
        var mframe;
        mframe=document.getElementById("MyFrame");
        mframe.src=val;
        mframe.onload=function()
        {
             document.getElementById("MyFrame").style.display="block";
             document.getElementById("loadingDiv").style.display="none";
        }
    }
    function hideFrame()
    {
        document.getElementById("MyFrame").style.display="none";
        document.getElementById("loadingDiv").style.display="block";
    }
    function showFrame()
    {
        document.getElementById("MyFrame").style.display="block";
        document.getElementById("loadingDiv").style.display="none";
    }
    function showdiv()
    {
        document.getElementById("loadingDiv").style.display="block";
    }
    function changeHome(val)
    {
        window.location=val;
    }
    </script>

<style type="text/css">
        body
        {
            width: 100%;
            height: 100%;
            border: 0px;
            padding: 0px;
            margin: 0px;
            font: Verdana, Geneva, Arial, Helvetica, sans-serif;
            padding-bottom: 0px;
            font-size: 10pt;
            background-color: #f0f8ff;
        }
        .mas_tbl
        {
            width: 100%;
            height: 100%;
        }
        .mas_header
        {
            background-color: #018ccd;
            height: 80px;
            width: 100%;
            font-weight: bold;
            text-shadow: 1px 1px 5px #ffffff;
            font-size: 18pt;
            color: White;
            padding-left: 20px;
        }
        .mas_footer
        {
            background-color: #018ccd;
            height: 30px;
            width: 100%;
            font-weight: bold;
            text-shadow: 0px 0px 0px #ffffff;
            font-size: 10pt;
            color: White;
            text-align: center;
            letter-spacing: 0.2cm;
        }
        .mas_menu
        {
            height: 20px;
            width: 100%;
        }
        .con_tbl
        {
            width: 100%;
        }
        .iframe
        {
            width: 100%;
            height: 100%;
            border: 0;
        }
        /*--------Menu----------------*/.menu_div
        {
            background-color: Gray;
            border: 1px solid #91918b;
            border-radius: 5px;
            -moz-border-radius: 5px;
            color: White;
            cursor: pointer;
            width: 100px;
            text-align: center;
        }
        .loadingDiv
        {
            border: 1px solid silver;
            border-radius: 15px;
            -moz-border-radius: 15px;
            height: 100px;
            width: 300px;
            opacity: 0.5;
            filter: Alpha(opacity=50);
            background-color: #335c33;
            color: White;
            cursor: progress;
        }
    </style>
</head>
<body>
    <form id="form1">
    <table class="mas_tbl" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td class="mas_header">
                MyWebsite
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <td>
                            <div class="menu_div" onclick="getpage('http://www.aspnetsample.blogspot.in')">
                                Page1
                            </div>
                        </td>
                        <td>
                            <div class="menu_div" onclick="getpage('http://www.w3schools.com/css/default.asp')">
                                Page2
                            </div>
                        </td>
                        <td>
                            <div class="menu_div" onclick="getpage('page2.aspx')">
                                Page3
                            </div>
                        </td>
                        <td>
                            <div class="menu_div" onclick="changeHome('page3.aspx')">
                                Page4
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" style="width: 100%; height: 100%;">
                <iframe class="iframe" id="MyFrame" src="http://www.w3schools.com" onprerender="javascript:showdiv()"
                    onload="javascript:showFrame()" style="display: none;"></iframe>
                <div id="loadingDiv" class="loadingDiv">
                    <table style="width: 100%; height: 100%;">
                        <tr>
                            <td align="center" valign="middle">
                                Page is Loading...
                            </td>
                        </tr>
                    </table>
                </div>
                
            </td>
        </tr>
        <tr>
            <td class="mas_footer">
                Footer Msg.
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

1 comment:

shajilDecember 20, 2012 at 12:41 AM
Thank you very much sir , i am face this problem around 1 week , using your logic its working .
ReplyDelete
Replies

Subscribe to: Post Comments (Atom)