$.browser is undefined

Following the update of WordPress perhaps a feature in one of the plugins has stopped.

Reviewing the page errors with the browser inspector shows the error

$.browser is undefined

I have also encountered the $.browser is undefined error when I took over a website and updated the jQuery references as a part of my initial actions.

With the introduction of jQuery version 1.9 jQuery browser was no longer supported.

To our rescue is a set of scripts called jquery-migrate. The aim of which is to add back in those missing functions. Allowing more time for the changes to jQuery to be incorporated.

To add migration support add

<script src=”http://code.jquery.com/jquery-migrate-1.0.0.js”></script>

to the web page. Take care in its position on the page to get the sequencing right.

$.browser was used to determine which browser was in use, visiting the web page.


jQuery Core 1.9 Upgrade Guide – jQuery.browser() removed

Github jQuery Migrate


Add Scroll Top Image

When the web page has scrolled down an offset distance show a scroll to top image.

When redesigning the VNTweb website, thinking about the longer article pages, I chose to add one of these.

Scrolling the page down shows on image in a fixed location. Clicking on this image shall scroll the page back to the top of the page, or a named div.

I wanted my scrolltop image to appear once the page had scrolled down by a measure.

Here’s what I used

  if ($VNTweb(this).scrollTop() > 100) { 
  } else { 

Once the page has scrolled down by 100 pixels then the scroll image becomes visible.

And for the image onClick scroll action I used the scroll from my article JQuery Page Scroll on Load, a few weeks ago.

  $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
  return false; 

You may wish to experiment with the distance scrolled before showing the image. Perhaps 100 pixels is too soon.

Another idea would be to hide and show the image at different values.

For example show the scroll to top image when the page has scrolled down a distance of 400 pixels, but hide once more when the distance reaches 300.

If you are looking for suitable images take a look at Font Awesome or Glyphicons.

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.


jQuery API: animate

W3Schools: jQuery animate

jQuery UI: Easing

Bootstrap3 Removing Parent Menu onClick

Using the Bootstrap menu clicking on a parent menu item reveals the child items. The parent page isn’t opened in the traditional menu way.

This is by design.

In summary, clicking on the parent menu item shows child menu items as drop down
Hovering over the parent page has no effect.

The result which I wanted was:

Hover over parent menu item to show child menu items in a drop down
Click on parent to change page, showing parent page.

The onclick of the parent menu item causes a drop down to appear and not to move forward to view the parent item

Changes to be made

  • onclick to open parent item
  • hover to show dropdown

To implement the changes I removed the data-toggle attribute and added a hover function emulating the click action but adding the open class.

I added the following to the header.php file of the WordPress child theme.

<script type="text/javascript">
var $vntweb =jQuery.noConflict();
$vntweb(document).ready(function ($vntweb) {
	$vntweb('a').removeAttr( 'data-toggle');
	$vntweb('.dropdown').hover(function() {

A better place to add this would be an included JavaScript file.

I like to add my own variable $vntweb with a noConflict, rather than simply the use of $. Usually this keeps me out of trouble, avoiding conflicts with other uses of $ as a variable

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>

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

    if ($VNTweb(this).scrollTop() > 100) { 
    } else { 
    var p=$VNTweb(".puzzle-piece-tile").position();
    if($VNTweb(this).scrollTop() > p.top+100 && !frontpagetileOnce){
    $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'

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.

history.lengthkeeps track of the length of the history list.
history.currentis the value of the current history entry.
history.nextis 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.previousis 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.

history.forwardthe same as history.next
history.backthe same as history.previous
history.gothe 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="https://www.vntweb.co.uk/"
<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=”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">
$('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');