Javascript is a programming or scripting language primarily used for client-sided programming in web browsers. It can also be used as a server-side programming language but this is generally used less often. Javascript was originally created by Netscape for their browser Netscape Navigator, and is now an implementation of the ECMAScript standard. It is typically used in web browsers for form validation, floating navigation, AJAX and other nifty things to make web pages more interactive.
A little while back I posted how to set cookies with jQuery and was asked about the domain setting and how setting the domain affects sub domains. This post explains how cookies and domains work, and covers some tests I did to check my assumptions were correct.
XHTML Strict does not allow opening links in a new window using target=””_blank”” so instead you can use jQuery to add the target attribute to all <a> tags after the page has loaded and still have the page validate as XHTML strict. (But refer to my updated note at the end of the article regarding the base tag and the un-deprecation of the target attribute).
Simply add the following piece of code into your $(document).ready(function() { } section of code (more about that in my jQuery’s document ready initialization post):
$(""a"").filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).attr('target', '_blank');
What this does is to add target=’_blank’ to all <a> tags in the current webpage that do not link to the domain you are currently on.
Therefore on my blog, applying the jQuery code above would make the following open in the same window:
<a href=""/jquery-open-offsite-links-new-window/""> ... </a> <a href=""https://electrictoolbox.com/jquery-open-offsite-links-new-window/""> ... </a>
and the following in a new window:
<a href=""http://www.google.com""> ... </a> <a href=""http://www.yahoo.com""> ... </a>
It’s then possible to replace attr() with other functions to do things to external links on a page. The next post shows how to add one of those offsite link images after the link with jQuery.
With HTML5, the W3C has un-deprecated the target attribute so you can add target attributes to <a> and <form> tags and have the document still validate. Using jQuery as shown above can still be useful if you have a lot of pages and don’t wish to have to manually update all the links.
My last post looked at how to run Javascript functions after Disqus has loaded using their undocumented callback functions. The
I was asked this morning how to go about opening a jQuery Facebox when the page loads; while I normally find dialogs that open in this way somewhat annoying they do have their uses when trying to show some form of disclaimer. This post shows how to do this.
Download the Facebox plugin and associated files from http://defunkt.io/facebox/ There are a number of examples on that page but here I present a full HTML skeleton for you to start with.
Download jQuery from http://jquery.com/
View the working example here. This opens a new page and as soon as it’s loaded the jQuery Facebox dialog will be displayed without any user intervention.
Here’s the full HTML and Javascript required to achieve this. Obviously you need to subsitute the Javascript and CSS url locations to where you have these located.
<!DOCTYPE html>
<html>
<head>
<title>Facebox on load</title>
<link rel="stylesheet" href="/facebox/facebox.css" />
<script src="/js/jquery-1.4.2.min.js"></script>
<script src="/facebox/facebox.js"></script>
<script>
$(document).ready(function() {
.facebox.settings.opacity = 0.5;
$.facebox('This will display after the page has finished loading');
});
</script>
</head>
<body>
</body>
</html>After the page loads, the dialog will display with the text “This will display after the page has finished loading”.
To get the content from an Ajax request instead of it being hard coded into the HTML/JS, change this line:
$.facebox('This will display after the page has finished loading');
to this, changing the /path/to/remote.html to the URL of your content:
$.get('/path/to/remote.html', function(html) {
$.facebox(html);
});
Javascript 1.6 introduced the Array.indexOf() function. Javascript 1.6 is available in Firefox from version 1.5 and current versions of Chrome, Safari and Opera; importantly, it is not in any versions of Internet Explorer at all (as at the time of this post).
Browsers that do not support indexOf() can easily have it added using the following function which extends the Array prototype.
I found the function in numerous sources on the Internet most of whichattribute it to the Mozilla Foundation, but I could not find theultimate source of the function. If anyone knows please let me know inthe comments at the end of this post and I can link to the originalsource.
//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}Note the “if (!Array.prototype.indexOf)” line means that the prototype will only be added if it doesn’t already exist. This means browsers which already have the function natively defined will use their own internal function instead of the one defined in the code above.
You can then do something like this:
var a = new Array("a", "b", "c", "d");
alert(a.indexOf("c"));
which would alert “2” in a dialog box.
My last jQuery post looked at the Superfish plug-in showing how easy it is to turn an HTML unordered list into a flyout menu. The only downside with it is if the menu structure is very big there’s quite a large overhead in your HTML template with the menu. I present a simple solution in this post which involves caching the menu structure as a Javascript variable in a separate .js file.
The menu in the HTML template only needs to contain the top level menu, and needs to be surrounded by a containing <div>. For example:
<div id="menu"> <ul class="sf-menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </div>
The Javascript file contains the entire menu as a variable. For example (and using the same menu as used in the previous post):
var menu = ' <ul class="sf-menu"> <li><a href="#">Item 1</a> <ul> <li><a href="#">Subitem 1.1</a> <ul> <li><a href="#">Subitem 1.1.1</a></li> <li><a href="#">Subitem 1.1.2</a></li> <li><a href="#">Subitem 1.1.3</a></li> </ul> </li> <li><a href="#">Subitem 1.2</a></li> <li><a href="#">Subitem 1.3</a></li> <li><a href="#">Subitem 1.4</a></li> </ul> </li> <li><a href="#">Item 2</a> <ul> <li><a href="#">Subitem 2.1</a></li> <li><a href="#">Subitem 2.2</a></li> <li><a href="#">Subitem 2.3</a></li> <li><a href="#">Subitem 2.4</a></li> </ul> </li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Subitem 3.1</a></li> <li><a href="#">Subitem 3.2</a></li> <li><a href="#">Subitem 3.3</a></li> <li><a href="#">Subitem 3.4</a></li> </ul> </li> </ul> ';
Note in the above example the allows line breaks to be contained in the Javascript. I have only done this for legibility because in my own code there are no line breaks for this Javascript variable.
When the page has finished loading, use jQuery to replace the HTML within the “menu” <div> with the HTML from the “menu” variable, and then call the .superfish() function to initialise the menu like so:
$(document).ready(function(){
$("#menu").html(menu);
$("#menu ul.sf-menu").superfish();
});
The following would then be present in the <head> section of your HTML template, where X.Y.Z are the appropriate version numbers and /path/to is replaced with the actual paths to the files, and “menu.js” is the file containing the menu variable (although you could consolidate it with other data and/or Javascript code in another file):
<script language="javascript" src="/path/to/jquery-X.Y.Z.min.js"></script>
<script language="javascript" src="/path/to/menu.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/superfish.css" />
<script language="javascript" src="/path/to/superfish.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#menu").html(menu);
$("#menu ul.sf-menu").superfish();
});
</script>
It’s really easy to make flyout menus with the Superfish jQuery plug-in. It’s also very easy to cache the menu structure into a separate Javascript file, as shown in this post, so it doesn’t add extra weight to the webpages as they are served. The Javascript file containing the meun will be cached which helps to speed up page load.
In a later post I’ll show how I’ve styled the Superfish plug-in to match a different template; I’ve been using it in the new version of the healthy.co.nz website which is due to go into production in a few weeks.
In the meantime, be sure to check out the Superfish website for more examples and full documentation for the effects possible. The plug-in can be downloadedhere from the jQuery website.
A few months ago I posted how to make the web page behind a jQuery Facebox inline popup grey out using an opaque layer that would show and hide before and after the facebox dialog. A reader recently emailed me to let me know there’s an easier way to do this using the undocumented opacity setting which I will show how to do in this post.
I came across a rather interesting problem with the Javascript parseInt() function a couple of days ago; if the value is a zero padded string and is ’08’ or ’09’ then parseInt() will return 0. This post looks at why 0 is returned and how to solve the problem.
The leading zero in the string tells the Javascript engine that it is an octal number. Because 8 and 9 are not valid numbers in octal, parseInt returns 0. This is expected behaviour because they are not valid octal integers and parseInt returns 0 because the first valid number encountered is a zero.
After a quick bit of research when I had this problem, I discovered the parseInt function has an optional ‘radix’ parameter which specifies the base to use. By passing 10 as the base it solves the leading 0 issue, for example:
alert( parseInt('08', 10) );will show the number 8 in an alert dialog, whereas:
alert( parseInt('08') );
would display 0.
To be on the safe side it’s probably always a good idea to pass the radix parameter to the parseInt function to ensure the values returned are what you expect them to be, especially if they might contain leading zeroes.
<
HTML5 saw the introduction of the very useful placeholder attribute for input elements, but it’s not supported in Internet Explorer before version 10. There are still a number of people out there with version 8 & 9 but fortunately there are some ways to support placeholders in these older browsers with Javascript.
My friends over at elated.com have recently released the 3rd edition of their "Master Mobile Web Apps with jQuery Mobile" e-book. I had a brief read of one of the earlier editions and it’s a great book and I’ll be using it as a reference at some point in the future. In the meantime, here’s some info about the book and where to buy it from.
