Saturday, July 21

Load Different Pages dynamically using jquery and javascript function with displaying progress bar

Here is my Design View:-

Here is my ProgressBar Image:-

Here is my SourceCode:-

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="Demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <title>Om namah shivaya</title>
    <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        function LoadPage(page) {
            $(document).ready(function () {
                $('#data_middle').load(page, function () {


        $(document).ready(function () {

            $('#shibashish').click(function () {
                window.setTimeout('LoadPage("somefolder/shibashish.aspx")', 1000);

            $("#NewPage").click(function (e) {

                // $('#Newpage').removeClass(" Newpage ");
                //$('# Newpage ').addClass(" Newpage_active");
                window.setTimeout('LoadPage("somefolder/anotherfolder/NewPage.aspx")', 1000);



    <style type="text/css">
            z-index: 1;
            left: 589px;
            top: 278px;
            position: absolute;
    <form id="form1" runat="server">
        Shibashish mohanty</h1>
    <div id="shibashish" style="background-color: Blue; color: White;">
        Click To View Shibashish page</div>
    <div id="NewPage" style="background-color: Green; color: White;">
        Click to view another page</div>
    <div id="data_middle">
        <img id="imgProg" alt="Progress" class="centered" src="images1/progressbar.gif" />

Thanks Shibashish Mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

shibashish mohanty