Home arrow HTML arrow Temporary Web Page Processing

Temporary Web Page Processing

You might have a web page which is of interest to the user. You might have a button (or link) around the top of the page which would allow the user to do some temporary processing before coming back to the page. For example, clicking the button might require that the user gives details to let him sign in, or choose certain options that will enable the server to create a web page catering to his interests. This two-part article series will show you how to get it done.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
April 15, 2009
  1. · Temporary Web Page Processing
  2. · The example
  3. · Current method
  4. · Showing the panel in front of other elements

print this article

Temporary Web Page Processing
(Page 1 of 4 )


After clicking the button, some web pages shift the part of the page below the button downward, giving room for a pane that contains the requirements of the details you have to act on (for example, sign in). It is possible for the web designer to develop a window panel that will go in front of the top area of the page without shifting anything downward. When you finish giving the details or acting on the panel, you close the panel. I prefer this approach to the former. I show you how to do this in this article series.

You need basic knowledge of HTML, JavaScript and CSS to understand this short article series. The web pages (HTML files) I used to test the principles in this two-part series are in one zip file called temporaryWebPageProcessing.ZIP. You can download the zip file from here:


You can download the zip file, unzip it, open the files in your web browser, and click the Process Info button to have a feel about the phenomenon before you continue to read the article (many of the files have a button called the Process Info button).

The web page and XHTML

I use XHTML norms for the design. The basic XHTML page in our project is:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<script type="text/javascript">






The above code has the elements: XML, DOCTYPE, HTML, HEAD and BODY.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials