Click here to Skip to main content
15,893,594 members
Articles / Web Development / XHTML

Lock ASP.NET Page and Show Animated Image While Waiting for a Long Post-Back

Rate me:
Please Sign up or sign in to vote.
4.83/5 (35 votes)
9 Apr 2009CPOL4 min read 266K   11.1K   119  
Lock page while post back
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
/* Set the cursor to busy when we are doing something */
.yui-busy {
    cursor: wait !important;
}
.yui-toolbar-container fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}
.yui-toolbar-container legend {
    display: none;
}
/* Setup the container with some padding and zoom it for IE's hasLayout */
.yui-toolbar-container .yui-toolbar-subcont {
    padding: .25em 0;
    zoom: 1;
}
/* When collapsed set the toolbars container to display none */
.yui-toolbar-container-collapsed .yui-toolbar-subcont {
    display: none;
}
/* Setup the :after so that compliant browsers don't loose the bounding box */
.yui-toolbar-container .yui-toolbar-subcont:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}

/* Drag handle for the toolbar's draggable property */
.yui-toolbar-container span.yui-toolbar-draghandle {
    cursor: move;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    overflow: hidden;
    text-indent: 77777px;
    width: 2px;
    height: 20px;
    display: block;
    clear: none;
    float: left;
    margin: 0 0 0 .2em;
}
/* If the titlebar is draggable, the set the cursor */
.yui-toolbar-container .yui-toolbar-titlebar.draggable {
    cursor: move;
}
/* Set the titlebar to relative so we can position the collapse button */
.yui-toolbar-container .yui-toolbar-titlebar {
    position: relative;
}
/* Toolbar's titlebar styles */
.yui-toolbar-container .yui-toolbar-titlebar h2 {
    font-weight: bold;
    letter-spacing: 0;
    border: none;
    color: #000;
    margin: 0;
    padding: .2em;
}
.yui-toolbar-container .yui-toolbar-titlebar h2 a {
    text-decoration: none;
    color: #000;
    cursor: default;
}
/* If the toolbar is grouped the draghandle needs to be bigger */
.yui-toolbar-container.yui-toolbar-grouped span.yui-toolbar-draghandle {
    height: 40px;
}

/* Float the groups so they position nicely and zoom them for IE */
.yui-toolbar-container .yui-toolbar-group {
    float: left;
    margin-right: .5em;
    zoom: 1;
}
/* Setup the :after so that compliant browsers don't loose the bounding box */
.yui-toolbar-container .yui-toolbar-group:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
/* Grouped title styles */
.yui-toolbar-container .yui-toolbar-group h3 {
    font-size: 75%;
    padding: 0 0 0 .25em;
    margin: 0;
}
/* Style the separators with a left border */
.yui-toolbar-container span.yui-toolbar-separator {
    width: 2px;
    padding: 0;
    height: 18px;
    margin: .2em 0 .2em .1em;
    display: none;
    float: left;

}
/* Set the height of a grouped separator to a little bit bigger */
.yui-toolbar-container.yui-toolbar-grouped span.yui-toolbar-separator {
    height: 45px;
    *height: 50px;
}

/* Reset the height of a separator inside of a group */
.yui-toolbar-container.yui-toolbar-grouped .yui-toolbar-group span.yui-toolbar-separator {
    height: 18px;
    display: block;
}

/* Kill the default styles of the list */
.yui-toolbar-container ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* Hide the group labels when the .yui-toolbar-nogrouplabels class is applied */
.yui-toolbar-container .yui-toolbar-nogrouplabels h3 {
    display: none;
}

/* Setup the default style of a button in the toolbar */
.yui-toolbar-container .yui-push-button,
.yui-toolbar-container .yui-color-button,
.yui-toolbar-container .yui-menu-button {
/*.yui-toolbar-container .yui-button {*/
    position: relative;
    cursor: pointer;
}

/* setup the default style of the A inside of the toolbar button */
.yui-toolbar-container .yui-button .first-child, .yui-toolbar-container .yui-button .first-child a {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 0px;
}

/* Setup the disabled state of a button */
.yui-toolbar-container .yui-button-disabled {
    cursor: default;
}
/* Disable the icon too */
.yui-toolbar-container .yui-button-disabled .yui-toolbar-icon {
    opacity: .5;
    filter: alpha(opacity=50);
}
/*Disabled Spin button arrows*/
.yui-toolbar-container .yui-button-disabled .up,
.yui-toolbar-container .yui-button-disabled .down {
    opacity: .5;
    filter: alpha(opacity=50);
}
/* remove any padding from the A */
.yui-toolbar-container .yui-button a {
    overflow: hidden;
}

/* Override the default Button style for select menu*/
.yui-toolbar-container .yui-toolbar-select .first-child a {
    cursor: pointer;
}

/* Font Family Menu Style - This styles the menu items and the selected menu item */
.yui-toolbar-fontname-arial { font-family: Arial; }
.yui-toolbar-fontname-arial-black { font-family: Arial Black; }
.yui-toolbar-fontname-comic-sans-ms { font-family: Comic Sans MS; }
.yui-toolbar-fontname-courier-new { font-family: Courier New; }
.yui-toolbar-fontname-times-new-roman { font-family: Times New Roman; }
.yui-toolbar-fontname-verdana { font-family: Verdana; }
.yui-toolbar-fontname-impact { font-family: Impact; }
.yui-toolbar-fontname-lucida-console { font-family: Lucida Console; }
.yui-toolbar-fontname-tahoma { font-family: Tahoma; }
.yui-toolbar-fontname-trebuchet-ms { font-family: Trebuchet MS; }

/* Spin Button */
.yui-toolbar-container .yui-toolbar-spinbutton {
    position: relative;
}

/* Setup the default style for the A */
.yui-toolbar-container .yui-toolbar-spinbutton .first-child a {
    z-index: 0;
    opacity: 1;
}

/* Setup the position and style for the up and down arrows */
.yui-toolbar-container .yui-toolbar-spinbutton a.up, .yui-toolbar-container .yui-toolbar-spinbutton a.down {
    position: absolute;
    display: block
    right: 0;
    cursor: pointer;
    z-index: 1;
    padding: 0;
    margin: 0;
}
/* Position all panels/overlays as absolute by default */
.yui-toolbar-container .yui-overlay {
    position: absolute;
}
/* Smash the default style for lists */
.yui-toolbar-container .yui-overlay ul li {
    margin: 0;
    list-style-type: none;
}

/* Reset the z-index of the toolbar container so that menu's appear over the iframe in IE and Safari */
.yui-toolbar-container {
    z-index: 1;
}

/* The div around the iFrame */
.yui-editor-container .yui-editor-editable-container {
    position: relative;
    z-index: 0;
    width: 100%;
}
/* The disbled state of the Editor */
.yui-editor-container .yui-editor-masked {
    background-color: #CCC;
}
/* Style the editable iframe to hide it */
.yui-editor-container iframe {
    border: 0px;
    padding: 0;
    margin: 0;
    zoom: 1;
    display: block;
}
/* Reset some padding on the editable iframes container */
.yui-editor-container .yui-editor-editable {
    padding: 0;
    margin: 0;
}
/* Style the dom path box at the bottom of the editor */
.yui-editor-container .dompath {
    font-size: 85%;
}
/* Header styles for the Property Editor */
.yui-editor-panel .hd {
    text-align: left;
    position: relative;
}
/* Setup some padding around the h3 */
.yui-editor-panel .hd h3 {
    font-weight: bold;
    padding: 0.25em 0pt 0.25em 0.25em;
    margin: 0;
}

/* set it to relative so we can position the close button - Zoom it for IE */
.yui-editor-panel .bd {
    width: 100%;
    zoom: 1;
    position: relative;
}
/* Setup some padding for the body container - Zoom it for IE */
.yui-editor-panel .bd div.yui-editor-body-cont {
    padding: .25em .1em;
    zoom: 1;
}
/* Get the caret back in Geckp */
.yui-editor-panel .bd .gecko form {
    overflow: auto;
}

/* Setup the :after so that compliant browsers don't loose the bounding box */
.yui-editor-panel .bd div.yui-editor-body-cont:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}

/* style the footer of the property editor */
.yui-editor-panel .ft {
    text-align: right;
    width: 99%;
    float: left;
    clear: both;
}

/* Style the "tip" icon */
.yui-editor-panel .ft span.tip {
    display: block;
    position: relative;
    padding: .5em .5em .5em 23px;
    text-align:left;
    zoom: 1;
}


/* setup some form fields */
.yui-editor-panel label {
    clear: both;
    float: left;
    padding: 0;
    width: 100%;
    text-align: left;
    zoom: 1;
}
/* This fixes the caret issue in Firefox */
.yui-editor-panel .gecko label {
    overflow: auto; 
}
/* more form fields */
.yui-editor-panel label strong {
    float: left;
    width: 6em;
}

/* The remove link in the Link Property Editor */
.yui-editor-panel .removeLink {
    width: 80%;
    text-align: right;
}

/* More form styling */
.yui-editor-panel label input {
    margin-left: .25em;
    float: left;
}

.yui-editor-panel .yui-toolbar-group {
    margin-bottom: 0.75em;
}

/* Image Padding in the Property Editor */
.yui-editor-panel .yui-toolbar-group-padding {
}

/* Image Border in the Property Editor */
.yui-editor-panel .yui-toolbar-group-border {
}

/* Image Text Flow in the Property Editor */
.yui-editor-panel .yui-toolbar-group-textflow {
}

/* Image Height/Width in the Property Editor */
.yui-editor-panel .height-width {
    float: left;
}
/* Image Height/Width title */
.yui-editor-panel .height-width h3 {
}
/* Image Height/Width container */
.yui-editor-panel .height-width span {
    font-style: italic;
    display: block;
    float: left;
    overflow: visible;
}
/* Image Height/Width original info container */
.yui-editor-panel .height-width span.info {
    font-size: 70%;
    margin-top: 3px;
}

/* Border Size/Type button widths */
.yui-editor-panel .yui-toolbar-bordersize, .yui-editor-panel .yui-toolbar-bordertype {
    font-size: 75%;
}

/* Kill the separators in the Property Editor */
.yui-editor-panel .yui-toolbar-container span.yui-toolbar-separator {
    border: none;
}

/* Border Type solid */
.yui-editor-panel .yui-toolbar-bordersize span a span,
.yui-editor-panel .yui-toolbar-bordertype span a span {
    display: block;
    height: 8px;
    left: 4px;
    position: absolute;
    top: 3px;
    _top: -5px;
    width: 24px;
    text-indent: 52px;
    font-size: 0%;
}
/* Border Type solid */
.yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-solid {
    border-bottom: 1px solid black;
}
/* Border Type dotted */
.yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-dotted {
    border-bottom: 1px dotted black;
}
/* Border Type dashed */
.yui-editor-panel .yui-toolbar-bordertype span a span.yui-toolbar-bordertype-dashed {
    border-bottom: 1px dashed black;
}
/* Border Size 0 */
.yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-0 {
    *top: 0px;
    text-indent: 0px;
    font-size: 75%;
}
/* Border Size 1 */
.yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-1 {
    border-bottom: 1px solid black;
}
/* Border Size 2 */
.yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-2 {
    border-bottom: 2px solid black;
}
/* Border Size 3 */
.yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-3 {
    top: 2px;
    *top: -5px;
    border-bottom: 3px solid black;
}
/* Border Size 4 */
.yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-4 {
    top: 1px;
    *top: -5px;
    border-bottom: 4px solid black;
}
/* Border Size 5 */
.yui-editor-panel .yui-toolbar-bordersize span a span.yui-toolbar-bordersize-5 {
    top: 1px;
    *top: -5px;
    border-bottom: 5px solid black;
}

/* Border Size menu size */
.yui-toolbar-container .yui-toolbar-bordersize-menu,
.yui-toolbar-container .yui-toolbar-bordertype-menu {
    width: 95px !important;
}
/* Border Size menu styles */
.yui-toolbar-bordersize-menu .yuimenuitemlabel, .yui-toolbar-bordertype-menu .yuimenuitemlabel, 
.yui-toolbar-bordersize-menu .yuimenuitemlabel, .yui-toolbar-bordertype-menu .yuimenuitemlabel:hover {
    margin:0px 3px 7px 17px;
}
/* Border Size menu styles - Checked */
.yui-toolbar-bordersize-menu .yuimenuitemlabel .checkedindicator, .yui-toolbar-bordertype-menu .yuimenuitemlabel .checkedindicator {
    position: absolute;
    left: -12px;
    *top: 14px;
    *left: 0px;
}

/* Border Size 1 - Menu Item */
.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-1 a {
    border-bottom: 1px solid black;
    height: 14px;
}
/* Border Size 2 - Menu Item */
.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-2 a {
    border-bottom: 2px solid black;
    height: 14px;
}
/* Border Size 3 - Menu Item */
.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-3 a {
    border-bottom: 3px solid black;
    height: 14px;
}
/* Border Size 4 - Menu Item */
.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-4 a {
    border-bottom: 4px solid black;
    height: 14px;
}
/* Border Size 5 - Menu Item */
.yui-toolbar-bordersize-menu li.yui-toolbar-bordersize-5 a {
    border-bottom: 5px solid black;
    height: 14px;
}


/* Border Type Solid - Menu Item */
.yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-solid a {
    border-bottom: 1px solid black;
    height: 14px;
}
/* Border Type Dashed - Menu Item */
.yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-dashed a {
    border-bottom: 1px dashed black;
    height: 14px;
}
/* Border Type Dotted - Menu Item */
.yui-toolbar-bordertype-menu li.yui-toolbar-bordertype-dotted a {
    border-bottom: 1px dotted black;
    height: 14px;
}

/* Hidden Headers for Accessibility */
h2.yui-editor-skipheader, h3.yui-editor-skipheader {
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    width: 0;
    overflow: hidden;
    position: absolute;
}

/* Setup the default look of a color menu and Zoom it for IE */
.yui-toolbar-colors {
    width: 133px;
    zoom: 1;
    display: none;
    z-index: 100;
    overflow: hidden;
}

/* Setup the :after so that compliant browsers don't loose the bounding box */
.yui-toolbar-colors:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
/* Style all of the A's so the float properly */
.yui-toolbar-colors a {
    height: 9px;
    width: 9px;
    float: left;
    display: block;
    overflow: hidden;
    text-indent: 999px;
    margin: 0;
    cursor: pointer;
    border: 1px solid #F6F7EE;
}
/* Put a little border around one that is hovered over */
.yui-toolbar-colors a:hover {
    border: 1px solid black;
}

/* Smash the inhertited Menu style */
.yui-color-button-menu {
    overflow: visible;
    background-color: transparent;
}

/* This is the preview box at the bottom of the menu - Zoom it for IE */
.yui-toolbar-colors span {
    position: relative;
    display: block;
    padding: 3px;
    overflow: hidden;
    float: left;
    width: 100%;
    zoom: 1;
}
/* Setup the :after so that compliant browsers don't loose the bounding box */
.yui-toolbar-colors span:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}

/* This is the box with the color preview in it */
.yui-toolbar-colors span em {
    height: 35px;
    width: 30px;
    float: left;
    display: block;
    overflow: hidden;
    text-indent: 999px;
    margin: 0.75px;
    border: 1px solid black;
}

/* The container for the name and hex code */
.yui-toolbar-colors span strong {
    font-weight: normal;
    padding-left: 3px;
    display: block;
    font-size: 85%;
    float: left;
    width: 65%;
}


.yui-toolbar-group-undoredo h3,
.yui-toolbar-group-insertitem h3,
.yui-toolbar-group-indentlist h3 {
    width: 68px;
}
.yui-toolbar-group-indentlist2 h3 {
    width: 122px;
}
.yui-toolbar-group-alignment h3 {
    width: 130px;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer TrafficTech
Canada Canada
Have technical skills that can be demonstrated and an ability to resolve complex problems quickly while working in a demanding, high pressure environment

Designs, plans, and coordinates software development work teams

Provides technical mentorship to project team members

Handles complex application features and technical designs for the development of new applications.

Write articles about ASP.net:
http://www.codeproject.com/KB/aspnet/SQLHelper20.aspx http://www.codeproject.com/KB/aspnet/DateAndTimePicker.aspx http://www.codeproject.com/KB/aspnet/SQLHelper20.aspx http://www.codeproject.com/KB/aspnet/WaitImageBoxWhilePagePost.aspx

Designs and implements the components, frameworks and layers required for complex application features

Understands and participate in all aspects of the Software Development Life Cycle

Relies on experience and judgment to plan and accomplish goals.

Ability to perform various programming activities (coding, testing, debugging, documenting, maintaining and supporting).

Ability to work independently with minimal supervision.

10 years’ experience in web software design and development.

SpecialtiesASP.net
SQL 2005
AJAX 1.0
Linq
C# 3.5
Microsoft Application Blocks
Java Script
Reporting Services
SQL SSIS
XML
Classic ASP

Comments and Discussions