Click here to Skip to main content
15,885,546 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 265.6K   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
*/
/* .yui-navset defaults to .yui-navset-top */
.yui-skin-sam .yui-navset .yui-nav,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */
    border:solid #2647a0; /* color between tab list and content */
    border-width:0 0 5px;
    zoom:1;
}

.yui-skin-sam .yui-navset .yui-nav li,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav li {
    margin:0 0.16em 0 0; /* space between tabs */
    padding:1px 0 0; /* gecko: make room for overflow */
    zoom:1;
}

.yui-skin-sam .yui-navset .yui-nav .selected,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected { 
    margin:0 0.16em -1px 0; /* for overlap */
}

.yui-skin-sam .yui-navset .yui-nav a,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a {
    background:#d8d8d8 url(../../../../assets/skins/sam/sprite.png) repeat-x; /* tab background */
    border:solid #a3a3a3;
    border-width:0 1px;
    color:#000;
    position:relative;
    text-decoration:none;
}

.yui-skin-sam .yui-navset .yui-nav a em,
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a em {
    border:solid #a3a3a3;
    border-width:1px 0 0;
    cursor:hand;
    padding:0.25em .75em;
    left:0; right: 0; bottom: 0; /* protect from other orientations */
    top:-1px; /* for 1px rounded corners */
    position:relative;
}

.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-skin-sam .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:#2647a0 url(../../../../assets/skins/sam/sprite.png) repeat-x left -1400px; /* selected tab background */
    color:#fff;
}

.yui-skin-sam .yui-navset .yui-nav a:hover,
.yui-skin-sam .yui-navset .yui-nav a:focus {
    background:#bfdaff url(../../../../assets/skins/sam/sprite.png) repeat-x left -1300px; /* selected tab background */
    outline:0;
}

.yui-skin-sam .yui-navset .yui-nav .selected a em {
    padding:0.35em 0.75em; /* raise selected tab */
}

.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a em {
    border-color:#243356; /* selected tab border color */
}

.yui-skin-sam .yui-navset .yui-content {
    background:#edf5ff; /* content background color */
}

.yui-skin-sam .yui-navset .yui-content,
.yui-skin-sam .yui-navset .yui-navset-top .yui-content {
    border:1px solid #808080; /* content border */
    border-top-color:#243356; /* different border color */
    padding:0.25em 0.5em; /* content padding */
}

/* left and right orientations */
.yui-skin-sam .yui-navset-left .yui-nav,
.yui-skin-sam .yui-navset .yui-navset-left .yui-nav,
.yui-skin-sam .yui-navset .yui-navset-right .yui-nav,
.yui-skin-sam .yui-navset-right .yui-nav {
    border-width:0 5px 0 0;
    Xposition:absolute; /* from tabview-core; have to reiterate for skin-sam due to pos:rel on skin-sam yui-nav */
    top:0; bottom:0; /* stretch to fill content height */
}

.yui-skin-sam .yui-navset .yui-navset-right .yui-nav,
.yui-skin-sam .yui-navset-right .yui-nav {
    border-width:0 0 0 5px;
}

.yui-skin-sam .yui-navset-left .yui-nav li,
.yui-skin-sam .yui-navset .yui-navset-left .yui-nav li,
.yui-skin-sam .yui-navset-right .yui-nav li {
    margin:0 0 0.16em; /* space between tabs */
    padding:0 0 0 1px; /* gecko: make room for overflow */
}

.yui-skin-sam .yui-navset-right .yui-nav li {
    padding:0 1px 0 0; /* gecko: make room for overflow */
}

.yui-skin-sam .yui-navset-left .yui-nav .selected,
.yui-skin-sam .yui-navset .yui-navset-left .yui-nav .selected { 
    margin:0 -1px 0.16em 0;
}

.yui-skin-sam .yui-navset-right .yui-nav .selected { 
    margin:0 0 0.16em -1px;
}

.yui-skin-sam .yui-navset-left .yui-nav a,
.yui-skin-sam .yui-navset-right .yui-nav a {
    border-width:1px 0;
}

.yui-skin-sam .yui-navset-left .yui-nav a em,
.yui-skin-sam .yui-navset .yui-navset-left .yui-nav a em,
.yui-skin-sam .yui-navset-right .yui-nav a em {
    border-width:0 0 0 1px;
    padding:0.2em .75em;
    top:auto;
    left:-1px; /* for 1px rounded corners */
}

.yui-skin-sam .yui-navset-right .yui-nav a em {
    border-width:0 1px 0 0;
    left:auto;
    right:-1px; /* for 1px rounded corners */
}

.yui-skin-sam .yui-navset-left .yui-nav a,
.yui-skin-sam .yui-navset-left .yui-nav .selected a,
.yui-skin-sam .yui-navset-left .yui-nav a:hover,
.yui-skin-sam .yui-navset-right .yui-nav a,
.yui-skin-sam .yui-navset-right .yui-nav .selected a,
.yui-skin-sam .yui-navset-right .yui-nav a:hover,
.yui-skin-sam .yui-navset-bottom .yui-nav a,
.yui-skin-sam .yui-navset-bottom .yui-nav .selected a,
.yui-skin-sam .yui-navset-bottom .yui-nav a:hover {
    background-image:none; /* no left-right or bottom-top gradient */
}

.yui-skin-sam .yui-navset-left .yui-content {
    border:1px solid #808080; /* content border */
    border-left-color:#243356; /* different border color */
}

/* bottom orientation */
.yui-skin-sam .yui-navset-bottom .yui-nav,
.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav {
    border-width:5px 0 0; /* color between tab list and content */
}

.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav .selected,
.yui-skin-sam .yui-navset-bottom .yui-nav .selected { 
    margin:-1px 0.16em 0 0; /* for overlap */
}

.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav li,
.yui-skin-sam .yui-navset-bottom .yui-nav li { 
    padding:0 0 1px 0; /* gecko: make room for overflow */
    vertical-align:top;
}

.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav li a,
.yui-skin-sam .yui-navset-bottom .yui-nav li a { 
}

.yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav a em,
.yui-skin-sam .yui-navset-bottom .yui-nav a em {
    border-width:0 0 1px;
    top:auto;
    bottom:-1px; /* for 1px rounded corners */
}

.yui-skin-sam .yui-navset-bottom .yui-content,
.yui-skin-sam .yui-navset .yui-navset-bottom .yui-content {
    border:1px solid #808080; /* content border */
    border-bottom-color:#243356; /* different border color */
}

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