jQuery Scroll to Page Top

For a long web page it can be nice for your visitor to click on an icon and for the page to scroll back to the top.

None of that frantic skipping of the fingers on a small phone screen!

For a web page with lots of content, it may be helpful to your visitors to add a scroll to page top text and/or icon.

This can be implemented using jQuery.

An icon placed at the bottom of the page content, or the end of sections of text, can action a return to page top by calling a simple piece of jQuery.

For a recent project I chose to use one of the glyphicons as my up arrow at the bottom the page.

Here’s the arrow icon in the footer of the page

<a href=”javascript:void(0);” id=”scroll-top” title=”Scroll to Top” style=”display: none;”>
<span class=”glyphicon glyphicon-circle-arrow-up”></span>
</a>

As an addition to this you may wish to keep the icon hidden, showing it only when the page view reaches the bottom.

As can be seen in the above example its hidden initially.

And here’s the jQuery scroll top

$VNTweb(window).scroll(function(){ 
    if ($VNTweb(this).scrollTop() > 100) { 
        $VNTweb('#scroll-top').fadeIn(); 
    } else { 
        $VNTweb('#scroll-top').fadeOut(); 
    }     
    var p=$VNTweb(".puzzle-piece-tile").position();
    if($VNTweb(this).scrollTop() > p.top+100 && !frontpagetileOnce){
        frontpagetile();
    }
}); 
$VNTweb('#scroll-top').click(function(){ 
    $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
}); 

To avoid conflict I use $VNTweb in my jQuery, declared using:

var $VNTweb = jQuery.noConflict();

As the screen nears the target area the scroll to icon fades into view.

I had looked through the arrow icons available in font awesome but didn’t find what I wanted to use on this occasion. I chose to use one from Glyphicons. I added a reference to the set in the top of the CSS file:

@font-face {font-family: glyphicons;src: url('../fonts/glyphicons-halflings-regular.otf') format('truetype'),url('../fonts/glyphicons-halflings-regular.eot') format('eot'),url('../fonts/glyphicons-halflings-regular.woff') format('woff');}

My CSS for positioning the arrow:

#scroll-top {position:fixed;right:20px;bottom:40px;display:block;z-index:999999;}
#scroll-top span {font-size:48px;color:#fa00ff;text-shadow: 0px 0px 1px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
#scroll-top span:hover {color:#ffc300;text-shadow: 0px 0px 6px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}

As can be seen I also have a transition to take the suddenness out of its appearance/disappearance.

A jQuery scroll to top, which appears in a fixed place, bottom corner, as the page scrolls down. Clicking on the arrow link smoothly scrolls the page back to the top of the page, avoiding lots of mouse or finger movement on the screen.

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 = 'http://www.newpagelocation.com'
}
</script>

and in the body of the page add

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

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

window.location.reload()

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.
history.next 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].

Examples

To step one page backwards in the history
window.history.back();
or
window.history.go(-1);

Similarly to step forward a page

window.history.go(1);

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.next
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:

<img
  src=”http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-orange.png”
  onmouseover=”this.src=’http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-blue.png'”
  onmouseout=”this.src=’http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-orange.png'”
  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="http://www.vntweb.co.uk/"
  onMouseOver="document.menu5.src='stickman-blue.png'"
  onMouseOut="document.menu5.src='stickman-orange.png'">Home</a>
<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.

Home

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=”this.style.cursor=’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">
$(document.ready(function(){
$('.FormTop').click(function(){
$('html, body').animate({scrollTop: $('#Formtop').offset().top}, 'slow');
return false;
});
});
</script>

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

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

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() {
    window.open('/popup.html','popup','')
  }
</script>

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() {
    window.open('/popup.html','popup','width=600,height=530,resizable=yes,scrollbars=1')
  }
</script>

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:

document.getElementById(“imgFruit”).src=’/images/bananas.jpg’;

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”
onmouseover=”replaceImage(this,’fruitO.png’);”
onmouseout=”imageTrans(this,’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”) {
item.style.filter=”blendTrans(duration=5)”;
item.style.filter=”blendTrans(duration=20)”;
item.filters.blendTrans.Apply();
item.filters.blendTrans.Play();
}
// Replace the image
if (document.getElementById){
item.src=newImage;
}
}

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.

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

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;
}
//-->
</script>

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.