Scroll Page on Page Load

On loading a web page scroll to the top of a form.

I had a web page with a form, part of a sequence of pages. Rather than the user scrolling down to the start of the form, I scrolled the page to the start of the form on page load.

Or more specifically to scroll to just above the top of the form on page load. Giving a degree of orientation reference within the page.

Above the form I added a div with an id:

<div id=”FormTop”></div>

Within the header (or separate JavaScript file if preferred) add the entry to scroll the page.

  $('html, body').animate({scrollTop: $('#FormTop').offset().top}, 'slow');

Shown above is the animation, associated with either html or body. Here the scrollTop function moves the page to the FormTop ident, at a speed set as slow. Once the page has completed loading and is ready.

Perhaps the scroll isn’t to your liking. Both the speed and the flow (easing) of the scroll can be changed.

Other speeds can be used, try experimenting with these (in milliseconds):

$(‘html, body’).animate({scrollTop: $(‘#FormTop’).offset().top}, ‘500’);

The easing effects used for the animation can also be added, for example:

$(‘html, body’).animate({scrollTop: $(‘#FormTop’).offset().top}, ‘slow’, ‘swing’);

Linear is an alternative. This specifies how the path of the animation flows. There are more available by incorporating the jQuery UI script.

No doubt when you implement this you’ll add the single action line along with the rest of your items within $(document).ready(function(), not give its own distinct wrapper.



Changing Browser Window Location

JavaScript can be used to change the current browser window location, using window.location.href.

Using JavaScript we are able to change the URL referenced in our browser. This may be used for creating onclick actions for images, form buttons, or perhaps as a redirect on a page which is no longer in use.

Using JavaScript the location for the current browser is set using

window.location.href = url(‘newpagelocation.html’)

As an example, within the head of the html page add

<script type="text/javascript">
function redirect() {
  window.location = ''

and in the body of the page add

<form id="Form1">
  <input onclick="redirect()" type="button" value="Next" ID="Button1" NAME="Button1">

If the aim is to reload the current page, then there is a simpler specific method.


A full reference will be required to the new URL otherwise the page will be taken to be relative to the current domain.

Redirecting the browser using JavaScript may be blocked by in-browser security add-ons. There’s a Google web page listing redirection methods and HTML5 security.

Browser History

JavaScript can access the history of the web browser through the history object.

The history object holds information about the URLs which have been visited both before and after the current one.

Using the history object the current page can be changed, single stepping backwards and forwards through this list, and jump to any point.

History Object Properties

The table below lists the history object properties of interest.

Property Description
history.length keeps track of the length of the history list.
history.current is the value of the current history entry. is the next entry in the list. This is equivalent to pressing the forward button on the browser. It is therefore quire likely that it will have no value.
history.previous is the page before, equivalent to pressing the back button on the browser.

The history list may also be treated as an array. So we can access history[0].


To step one page backwards in the history

Similarly to step forward a page


History Object Methods

History object methods allow actions to be taken, similar to pushing the browser forward or backward buttons a number of times.

Method Description
history.forward the same as
history.back the same as history.previous
history.go the equivalent to pushing either the forward or back button a number of times. For example history.go(-3) is equivalent to pressing the back button 3 times.


Change Image on Mouse Over

stick man
Adding a change of image for image mouseover image changes can be used to confirm the mouse over and to indicate content available by following the link.

The original image, without the mouse over effects, is given as:
<img src=”stickman-orange.png” border=”0″  />

I have also set a size for the border of 0, ensuring that the default image border is removed.

Producing the image change effects when a mouse moves over an image are implemented with the addition of an onMouseOver and onMouseOut parameter to the <img> tag surrounding the image.

The image of the orange stick man with the blue replacement for the mouse over is shown below:

And the associated code below:

  border=”0″  />

Take care when using the above code not to miss the use of single quotes around the image name, inside the onMouseover and onMouseOut event handlers.

onMouseover defines the action when the mouse hovers over the image. onMouseOut provides the action handling for the mouse moving away from the image.

As can be seen the two actions onMouseOver and onMouseOut both change the src reference of the image. this is a special reference to the item itself.

An alternative is to change the image based on mousing over, for example a hyperlink. To do this a name is given to the image, to provide a unique reference, this will not work when referencing a different item on the page. The image src is now referenced using document.menu5.src, Document is the root node of the page.

To make these actions work an additional parameter is added to the image. Naming the image provides a reference for the mouse actions.

<a href=""
<img src="stickman-orange.png" border="0" name="menu5 alt="stick man" /">

The image of the orange stick man with the blue replacement for the mouse over is shown below. Hover over the word home below to change the image.


Simple E-mail Address Validation

A simple e-mail address validation function, testing for character positions, without using regular expressions.

The function tests for the presence of the characters @ and the full stop, returning either true or false.

For the full stop check it looks for its presence after the 3rd character in the string.

The @ symbol, is tested to ensure it exists.

The position test of both of these characters could be readily changed.

If both of these characters exist then the function returns true, otherwise false.

function isValidEmail(str) {
  return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);

str is the string passed to the function isValidEmail for testing.

The single line has the two tests, combining their results with && and returning the result.

On the left str.indexOf(“.”) > 2) tests for the full stop and on the right (str.indexOf(“@”) > 0) checks to ensure that the @ symbol is present.

For the function to return true both parts of the test must be valid.

JQuery Page Scroll on Load

JQuery can be used to smoothly re-position the web page With an onload I positioned the page at the top of a form.

I began by adding links to reposition the page back to the top and then extended this to incorporate the JQuery onload to set the top of the page.

A point is required on the page which the browser will orientate to, scrolling the page up or down, so that it is at the top of the browser window.

A hyperlink anchor is created, I called the reference FormTop.

<a id=”FormTop”>

and added a little above the form on the page.

A return to top link can be added further down the page using a simple hyperlink.

<a href=”#” class=”FormTop”>Top</a>

or with an image

<a href=”#” class=”FormTop“><img src=”/images/top.gif” alt=”Top” width=”50″ height=”20″></a>
However, I was creating a back to top for a DotNetNuke skin. In this situation the above was converted to:
<a href=”<%= SkinPath%>#top”><img src=”/images/top.gif” alt=”Top” width=”50″ height=”20″></a>

I therefore needed to implement the back to page top using a different method. JavaScript can be used to define a move to a specific coordinate, for example 0,0.

<img onClick=”javascript:scroll(0,0)” onmouseover=”’pointer'” src=”/images/top.gif” alt=”Scroll to top of form” />

By using JavaScript to achieve the Top of Page function enabled me to build this into a DotNetNuke skin. It also means that the page repositioning did not require a page refresh and a call back to the server. The function is dependant upon the client browser having JavaScript enabled for the website.

The JQuery to scroll to the top of the form on page load is

<script type="text/javascript">
$('html, body').animate({scrollTop: $('#Formtop').offset().top}, 'slow');
return false;

and the JQuery to perform the scoll to the top of the form on page load is

<script type="text/javascript">
$('html, body').animate({scrollTop: $('#Formtop').offset().top}, 'slow');

On Page Load Popup Window

Using JavaScript onLoad to pop-up a second window when a page loads.

To create the pop-up window when the page is loaded the <body> tag will be modified and the onLoad() parameter added.  For clarity, and to permit easy expansion of the code in the future, a JavaScript function called thisIsOnload() will be used.

Firstly modify the <body> tag:

<body onLoad=”thisIsOnload()”>

Now add the following into the <head></head> part of the page, before the closing tag.

<script type="text/javascript">
  function thisIsOnLoad() {'/popup.html','popup','')

In the above I have assumed that our pop-up window page is located in the root directory of our website and that its name is popup.html.

We can improve the opening of our pop-up window by setting the size, turning off the decoration of the window. To do this change we shall change our JavaScript code:

<script type="text/javascript">
  function thisIsOnLoad() {'/popup.html','popup','width=600,height=530,resizable=yes,scrollbars=1')

One last nicety to add to the popup window.  Add the word close, which when clicked will close the pop-up window.  For this add the following at the bottom of the page.

<p align=”center”><a href=”” onClick=”self.close()”>Close</a></p>

Internet Explorer Image Transition Effects

Internet Explorer supports its own custom transition effects. These can be used when changing the source of an image, for example on mouse over.

An image on an html page, is represented by the HTML code

<img id=”imgFruit” src=”/images/apples.jpg”>

To change this using JavaScript the src parameter is re-assigned to a different iamge reference:


The Internet Explorer transitions can be a simple fade between the two images or effects such as swipes and blinds.

JavaScript is used to set the relevant parameters and to trigger the effect.

The example below shows the image tag with its onmouseover and onmouseout actions.

<img src="/images/fruit.png"
// JavaScript function to enact transition effects
// dependant upon browser type
function imageTrans(item,newImage) {
// Get browser name
var browserName=navigator.appName;
// If the browser is Internet Explorer do transition effect
if (browserName=="Microsoft Internet Explorer") {"blendTrans(duration=5)";"blendTrans(duration=20)";
// Replace the image
if (document.getElementById){

The table below shows the Internet Explorer effects and their codes.

Effect MSIE Transition # MSIE Effect
None 0 Box in
Box in 0 Box in
Box out 1 Box out
No PPT equiv. 2 Circle in
No PPT equiv. 3 Circle out
Wipe up 4 Wipe up
Wipe down 5 Wipe down
Wipe right 6 Wipe right
Wipe left 7 Wipe left
Vertical blindss 8 Vertical blinds
Horizontal blinds 9 Horizontal blinds
Checkerboard across 10 Checkerboard across
Checkerboard down 11 Checkerboard down
 Random dissolve 12 Random dissolve
Split vertical in 13 Split vertical in
Split vertical out 14 Split vertical out
Split horizontal in 15 Split horizontal in
Split horizontal out 16 Split horizontal out
Strips left down 17 Strips left down
Strips left up 18 Strips left up
Strips right down 19 Strips right down
Strips right up 20 Strips right up
Random bars horizontal 21 Random bars horizontal
Random bars vertical 22 Random bars vertical
Random 23 Random

Using History to Create a Back Button

Using JavaScript‘s history object a back button can be added to the web page, passing the browser back to the previous page.

The action may either be implemented in a form, or with the use of a hyperlink.

The example given below shows the form implementation. An onclick has been added to the form button type input. The value of the onclick is set to the history object value.

<input type=”button” value=”Go Back” onclick=”history.go(-1)”>

The hyperlink implementation uses the same history object. In this instance it is defined as the hyperlink, no onclick is included.

<a href=”javascript:history.go(-1)”>Back</a>

Writing to the Browser Status Bar

The browser status bar property window.status can be modified using JavaScript.

Thus to put a website welcome message in the status bar:

window.status = ‘Welcome to our website’;

If this action is to be repeated a function may be used.

In the example below the function setStatus takes the parameter strStatus, a text variable. The browser status bar is set to this value and then the function returns the value true.

<script type='text/javascript'>
function setStatus(strStatus) {
  window.status = strStatus;
  return true;

It was once common to add information to the browser status bar. It was also an obvious bar at the foot of the browser. Much of the information is now spread across the browser.

The current w3Scools Windows Status Property reference shows that only Opera continues to support this feature.