Javascript - most recent to oldest updated
Example scripts and howtos for Javascript
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.
Post sort order: Post Date (Newest First) | Post Date (Oldest First) | Alphabetical | Date Updated
Target links to _top with jQuery
Posted July 21st, 2010 in Javascript
Amazingly some people still use <frameset> and <frame> tags around the web, as I discovered the other day when someone linked my Running Calendar website into their frameset website. A common approach to this problem is to detect if the page is in a frameset and to bust out of it; in this post I offer an alternative which is to change the target for all links to _top where a target is not already set.
jQuery: set title of anchor tags to the href for offsite links
Posted July 6th, 2010 in Javascript
Over a year ago I posted how to use jQuery to make all offsite links open in a new window. I recently received a comment on that page asking how to make the title attribute of all anchor tags on a page for offsite links be the same as the href. This post shows how to do this with jQuery, but also leaves any <a> tags with a title as-is.
Write content into a dynamic Javascript popup from FCKEditor
Posted July 2nd, 2010 in FCKEditor and Javascript
In response to a question asked on my "Count the words in an FCKeditor instance with Javascript" post about how to get the content from an FCKEditor instance and load it into a popup window, I posted "Write content into a dynamic Javascript popup" to show how to do this for any content. In this post I now show how to do this specifically for an FCKEditor instance.
Write content into a dynamic Javascript popup
Posted July 1st, 2010 in Javascript
I've posted a few articles about the Facebox lightbox dialog recently but sometimes a quick and dirty post of content into a regular window.open popup is all that is required. This post shows how to open a Javascript window and write content into it without having to load another page.
jQuery: hide text when the page is loaded and show it later
Posted June 21st, 2010 in HTML and CSS and Javascript
This post is a response to a question asked on my "Show and hide an element with jQuery - Part 1 of 2" article about how to hide text when the page loads and then show it with a button (or some other method to reveal the text at a later time).
Facebook Connect and Disqus Comments
Posted June 8th, 2010 in Javascript
I currently use Disqus for using comments on this blog. Disqus allows a number of ways for users to log in when placing comments such as with Facebook Connect, Twitter, OpenID and Yahoo. A little while ago I posted how a change seemed to have happened with Facebook which meant all pages were being loaded multiple times with ?fbc_channel=1 at the end of the URL which was inflating pageviews (and some commenters reported it crashing some visitor's browsers). This post looks at the reason for the issue and the solution.
Make jQuery Facebox dialog modal
Posted June 7th, 2010 in Javascript
The jQuery Facebox lightbox can be closed by clicking the close button, clicking anywhere outside the dialog or using the escape key. This post shows how to make the dialog modal so that the only way to close it is by clicking the close button. You could alternatively add a link etc into the content of the dialog which would close it, link to another page etc.
jQuery Facebox: setting the width
Posted June 4th, 2010 in Javascript
I've been looking at the jQuery Facebox plugin recently which is a Facebook style lightbox for loading remote content, images, local content etc. In this post I look at how to change the width of the Facebox dialog with CSS or programatically using Javascript.
jQuery Facebox window with full height with scrollbar
Posted June 1st, 2010 in Javascript
I've been using the jQuery Facebox plugin a fair bit on various websites to show stuff in "inline" windows. On my New Zealand Running Calendar website I make the dialog the full height of the window with a scroll bar if the content is longer than the height of the window. This post shows how to do this.
Using Javascript's setTimeout() with variable parameters
Posted March 9th, 2010 in Javascript (Updated May 28th, 2010)
Javascript's setTimeout function executes code after a specified amount of time but can only handle constant parameters. This post looks at how to pass variable parameters to setTimeout.
Scroll to the top of a webpage with jQuery
Posted September 1st, 2009 in Javascript (Updated May 24th, 2010)
This post shows a simple way to make anchor tags with e.g. href="#top" scroll to the top of the webpage when clicked using jQuery.
Cookies and domains
Posted May 24th, 2010 in Javascript and PHP
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.
Open a jQuery Facebox dialog programatically
Posted May 20th, 2010 in Javascript
A few days ago I showed a basic example using the jQuery Facebox plugin to open dialog windows where particular links are made to open in a Facebox dialog. I was then asked in a comment how to open a dialog without making it opened from a link; this is covered with a brief example on the Facebox page but I've covered this a little more comprehensively in this post.
Vertically center a jQuery Facebox dialog
Posted May 18th, 2010 in Javascript
Some time back I posted a fix for the Facebox jQuery plugin so it centers horizontally correctly and was subsequently asked in the page comments how to center the box vertically. This post shows how to center it vertically but the caveat is that it will still load initially in the regular place and will then center vertically after the content has loaded.
jQuery: Get the vertical mid point of the browser's window
Posted May 17th, 2010 in Javascript
jQuery's $(window).height() and $(window).scrollTop() can be used to calculate the vertical mid point of a browser's window. This quick post shows how to do this and then tomorrow's post will look at vertically centering a Facebox dialog in the middle of the window using this method.
jQuery Plug-ins
Posted December 8th, 2009 in Javascript (Updated May 14th, 2010)
I use a number of jQuery plug-ins and have been posting about how to use some of them recently, and these posts have proved to be quite popular. This post is a summary of my jQuery plugin posts and I'll keep it updated as I add additional articles and howtos for them.
jQuery Facebox Basic Example
Posted May 14th, 2010 in Javascript
The jQuery Facebox plugin creates a Facebook like lightbox which can be used to load external pages, images or put in any content you want. It's not perfect but it works pretty well. This post shows a basic example and the html for a page skeleton which uses Facebox. I'm posting this now because I'll have some additional posts in the next few days using Facebox (and also some older ones here here and here).
jQuery: performance of show and hide
Posted May 8th, 2010 in Javascript
Josh Powell at Learning jQuery posted an interesting post a couple of days back looking at the performance of show and hide in jQuery along with some alternatives: toggle, addClass, removeClass and setting the CSS directly.
Troubleshooting errors with Yahoo's YUI Compressor
Posted April 30th, 2010 in Javascript
I use Yahoo's YUI Compressor to minify Javascript and CSS files. Recently I got an error message when attempting to minify a Javascript file: this post looks at the error message and how to use it to work out where the error occurs.
How to get and set form element values with jQuery
Posted November 13th, 2008 in Javascript (Updated April 22nd, 2010)
jQuery is a Javascript framework which can simplify coding Javascript for a website and removes a lot of cross browser compatibility issues. This post looks at how to get and set the values of HTML form elements with jQuery.
Demos for getting and setting form values with jQuery
Posted April 22nd, 2010 in Javascript
Some time back I posted how to get and set form element values with jQuery just showing the HTML and Javascript needed to do so but without an actual demo. Someone asked for some demos of these yesterday so I present these here.
Google Analytics Asynchronous Tracking - Additional Pageviews
Posted April 20th, 2010 in Javascript
Google released asynchronous tracking for Google Analytics earlier this year and I posted an example HTML page showing how to insert the code. On my just released New Zealand Running Calendar website I use jQuery Facebox popups to render a lot of content and wanted those to get tracked as additional pageviews. This post therefore shows how to track additional pageviews when using Google Analytics asynchronous tracking.
Google Analytics Asynchronous Tracking
Posted January 30th, 2010 in HTML and CSS and Javascript (Updated April 19th, 2010)
Google recently released updated tracking code for Google Analytics which allows for asynchronous tracking. This means the analytics tracking can be done at the same time as rendering other content and therefore won't delay other page content from rendering. This results in what appears to be faster rendering pages.
jQuery: Changing the default text value on focus, and showing plain text in a password field Part 1
Posted January 5th, 2010 in Javascript (Updated March 31st, 2010)
Last year I posted a couple of jQuery articles about how to change the default text value on focus and show plain text in a password field and then make it a regular password field on focus, with examples in the pages about how to do it. I did not post a full standalone working example which someone requested a couple of days ago, so follow those posts up here with a full standalone example.
jQuery: show plain text in a password field and then make it a regular password field on focus - Part 2
Posted March 30th, 2010 in Javascript
Almost a year ago I showed how to have a password field show plain text with a default plain-text value but then be an actual password field when the user clicks into it, implementing this with jQuery. Just recently someone asked in the comments on that page how to do the same thing if you cannot modify the HTML itself, so show how to do that in this post.
Find the index of an item in a Javascript array
Posted March 23rd, 2010 in Javascript
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).
Remove an item from a Javascript array
Posted March 19th, 2010 in Javascript
I recently needed to remove an item from a Javascript array based on the index and while it's easy enough to do this using slice etc there's no inbuilt function to do so.
jQuery JSON Ajax requests and caching
Posted March 12th, 2010 in Javascript (Updated March 16th, 2010)
Last week I wrote how to load JSON data with jQuery, PHP and MySQL, noting at the end that there can be some caching issues which may or may not be a problem depending on your implementation. I look at this here and a possible solution.
jQuery Superfish Menus Plug-in and Caching the menu
Posted August 18th, 2009 in Javascript (Updated March 16th, 2010)
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.
Pad a number with leading zeroes in Javascript - Improved
Posted May 1st, 2009 in Javascript (Updated March 16th, 2010)
A couple of weeks back I posted how to pad a number with leading zeroes in Javascript as a lead-in to a post about how to format a date time in Javascript in database format. The original post used a while() loop to add zeroes on to the string but as pointed out to me by Greg Jorgensen it's not very efficient so I present his solution here.
Get an element's position with Javascript
Posted March 16th, 2010 in Javascript
Last month I posted how to get an element's position relative to the document with jQuery and in this post show how to do the same thing but with native Javascript without the use of a 3rd party library.
Load JSON data with jQuery, PHP and MySQL
Posted March 2nd, 2010 in Javascript, MySql and PHP (Updated March 12th, 2010)
This post shows how to populate a select box based on the value of the another, by getting JSON data with jQuery from a PHP script that gets the data from a MySQL database.
Internet Explorer 7 issues with jQuery animation and position:relative
Posted March 5th, 2010 in Javascript
Internet Explorer 7 can have issues with rendering jQuery animations if some of the properties that are to be animated have not already been set with CSS, and the containing block has the position property set to "relative".
jQuery's Facebox and Google Maps
Posted February 27th, 2010 in Javascript (Updated March 4th, 2010)
On my soon to be launched New Zealand Running Calendar, I have the location map of the running event on a Google Map. This map can be viewed either on a regular page or via an AJAX call in a jQuery Facebox popup window. However I had issues with the map displaying in the popup as shown in this post along with the solution.
Load JSON data with jQuery
Posted February 23rd, 2010 in Javascript (Updated March 2nd, 2010)
JSON data can be retrieved using AJAX from a server either using jQuery's .ajax() function or the shorthand $.getJSON() function. If you have retrieved a JSON string without having jQuery decode it automatically using one of these functions, the string can also be parsed into a regular data array using the $.parseJSON() function.
parseInt('08') returns 0 with Javascript
Posted February 19th, 2010 in Javascript
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.
Get an element's position relative to the document with jQuery
Posted February 9th, 2010 in Javascript (Updated February 17th, 2010)
jQuery's .offset() method returns an offset containing the top and left co-ordinates of the element top-left position relative to the document as a whole. There's is also a .position() method which is supposed to return the offset relative to the offset parent but for me it always returns the same co-ordinates as .offset(). Maybe I'm doing something wrong with .position()...
Dynamically load a Javascript file with jQuery
Posted February 16th, 2010 in Javascript
jQuery's $.getScript() function is a shorthand wrapper to $.ajax() which easily allows remote Javascript to be loaded into the current page.
Browser feature detection with jQuery $.support
Posted February 5th, 2010 in Javascript
Rather than working out the engine and version with Javascript for doing stuff that may work differently in different browsers, it's better to use feature detection instead. jQuery has the $.support property which has a number of flags to indicate the presence of various features or bugs. I'll look at a couple of the more useful flags here, but be sure to read the documentation for full details about all the properties.
Add a new option to a select with jQuery
Posted January 26th, 2010 in Javascript (Updated February 4th, 2010)
My last jQuery post looked at how to count the number of options in a select and then clear all options from the select. This post looks at how to add a new option to a select with jQuery.
Detecting the browser engine and version with jQuery
Posted February 2nd, 2010 in Javascript
While you ideally shouldn't use browser detection to choose whether or not to render something in a particular fashion, jQuery does provide the capability to work out which browser renderingengine and version is being used with $.browser. There is also $.support which provides information about what the rendering engine supports and I will look at that in a later post.
Iterate through an associative array the jQuery way
Posted January 29th, 2010 in Javascript
A few months ago I posted how to loop through key value pairs from an associative array with Javascript. I do a lot of work with jQuery these days so in this post look at how to do the same but using jQuery's each function.
Syntax Highlighting with SyntaxHighlighter
Posted January 22nd, 2010 in Javascript
Alex Gorbatchev's SyntaxHighlighter is a Javascript plug-in to easily highlight programming code syntax in web pages. It supports a wide variety of programming and markup languagesincluding PHP, Javascript, HTML, CSS, SQL and more.
Content-type for Javascript with Apache
Posted January 19th, 2010 in Apache and Javascript
I was making some changes to an Apache configuration this morning to ensure mod_deflate was compressing CSS and Javascript files and discovered I'd either documented the content-type for Javascript incorrectly, or the Apache version and Linux distro I used at the time served Javascript differently.
jQuery 1.4 released
Posted January 15th, 2010 in Javascript
jQuery 1.4 has been released. There is a lot of extended functionality and improvements including reducing the complexity of a number of popular methods.
Get the number of options in a select with jQuery
Posted January 15th, 2010 in Javascript
This post looks at how to get the number of options that are in a select drop down box with jQuery, and also how to remove all current options from the drop down box. My next jQuery post will look at how to add new options to the select.
Multiple variable assignment with Javascript
Posted January 12th, 2010 in Javascript
About a month ago I posted how it is possible to assign multiple variables with the same value in PHP and have since learned that this is also possible to do with Javascript. This can be useful if initializing multiple variables with the same initial value or if needing to make multiple copies of a value and then manipulate each separately.
jQuery's toggleClass function
Posted January 8th, 2010 in Javascript
While looking up something else in the jQuery documentation just now I discovered a useful function "toggleClass" to toggle a CSS class on and off.This post doesn't really offer anything more than what is in the jQuery documentation ( the toggleClass manual page is here) but simply serves to draw your attention to this very useful function.
Changing the default text value on focus with jQuery
Posted May 29th, 2009 in Javascript (Updated January 5th, 2010)
You've seen those cool search boxes or login fields on websites which have some default value (like e.g. "Enter keywords here") and when you click into the field the default text disappears but is then restored if you click out of the box without typing anything. This post shows how to change the default value of an HTML text field on focus and blur with jQuery.
jQuery: show plain text in a password field and then make it a regular password field on focus
Posted June 2nd, 2009 in Javascript (Updated January 5th, 2010)
My last Javascript post looked at how to change the default text value on focus with jQuery and this takes it a step further by showing how to have a password form field which shows "Password" and when the user clicks into it it then becomes a regular password field with obscured text.
jQuery Form Selectors
Posted January 1st, 2010 in Javascript
There are a number of different <input> types in HTML and jQuery makes it simple to select the different types of input elements, such as all the text fields, all the radio buttons, all the submit buttons and so on. Full information and examples can be found on the selectors page of the jQuery document; this post gives some examples and a summary of the possible selectors.
Specify multiple selectors with jQuery
Posted December 26th, 2009 in Javascript
Today's jQuery post is a quick tip for writing more concise code, which is to specify multiple selectors using commas if the same function should be applied to multiple elements.
Make an entire table row clickable with jQuery
Posted December 22nd, 2009 in HTML and CSS and Javascript
If an HTML table row contains only one <a> link it can be useful to make the entire row clickable and make it activate that link. This post shows how to make the entire row clickable with jQuery so that clicking anywhere in the row is the same as clicking that link.
Get the number of days in a month with Javascript
Posted December 18th, 2009 in Javascript
This post shows how to get the number of days in a month using Javascript by passing the month and year to a function.
Set multiple attributes at once with jQuery
Posted December 15th, 2009 in Javascript
This post shows how to set multiple attributes of an element with jQuery with one call to the attr() function. The example used shows how to set the src, width and height of an image element.
Modify right-click menu behavior with jQuery
Posted December 11th, 2009 in Javascript
This post shows how to modify the right-click menu with jQuery - it's possible to either completely disable right-click context senstive menus or replace them with a custom dialog which is applicable to the application. This can be done to the page as a whole or just a specific element.
Using ellipsis with HTML and CSS
Posted December 5th, 2009 in HTML and CSS and Javascript
If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there's more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn't work for Firefox but there's a workaround that can be done with jQuery.
Pad a number with Javascript by Hans Pufal
Posted December 3rd, 2009 in Javascript
In the past I've posted three ways to pad a number in Javascript with leading zeros, none of which dealt with negative numbers. Recently Hans Pufal emailed me a suggested alternative which approaches the padding in a different way and also preserves the sign if the number is negative.
Setting default values for missing parameters in a Javascript function
Posted November 24th, 2009 in Javascript (Updated December 2nd, 2009)
Javascript functions can be passed as few or as many parameters as you like - the exact number of parameters specified in the function declaration is not exactly what must be passed in. This post shows how to set a default value for a parameter if it's not passed in.
Pad a number to two digits with Javascript
Posted April 21st, 2009 in Javascript (Updated December 2nd, 2009)
On Sunday I looked at how to pad a number with leading zeroes in Javascript and in this post look at a simpler function to pad a number to just two digits as if required for days and months, and hours, minutes and seconds.
Assign and remove a click handler from an element with jQuery
Posted December 1st, 2009 in Javascript
Click handlers can be assigned to elements easily with jQuery so when the element is clicked some particular action is run. This post looks at how to add a click handler to an element, explains how adding multiple click handlers will fire all of them, and then how to remove the click events.
How to preserve comments with the YUI Compressor
Posted November 28th, 2009 in HTML and CSS and Javascript
I use the YUI Compressor to minify Javascript and CSS files. By default it will remove all comments from the files but there is a simple solution to retaining comments in files, which is often necessary for example when preserving copyright and license terms of use etc.
Loop through parameters passed to a Javascript function
Posted November 27th, 2009 in Javascript
I looked at how to set default values for parameters in a Javascript function the other day and in this post look at the arguments object which can be used to work out how many parameters were passed to a function and also to loop through each of them.
Post a form to a popup window with Javascript and jQuery
Posted November 20th, 2009 in Javascript
I recently needed to post an HTML form into a popup window instead of targeted to the current document or an existing window. The Javascript for doing this is very simple and in this post I show how to post the form into a popup window with regular Javascript and then with jQuery.
Change the cursor with Javascript
Posted November 12th, 2009 in Javascript
This post shows how to change the cursor on a web page with Javascript by assigning a value to the document.body.style.cursor property.
Javascript: reference the parent window from a popup
Posted November 4th, 2009 in Javascript
If a window has been opened with the Javascript window.open function, that window can be referenced using window.opener. This post shows some examples about how to do this.
jQuery: Mouse co-ordinates within the element when mouseover or click an element
Posted October 28th, 2009 in Javascript
Following up a couple of earlier posts about get the mouse co-ordinates with jQuery and how to get the co-ordinates when an element is clicked, this post looks at how to do both of these but with co-ordinates relative to the element itself so i.e. the top left co-ordinate is 0, 0 instead of some other value relative to the page.
Get the mouse co-ordinates with jQuery when an element is clicked
Posted October 9th, 2009 in Javascript
My last jQuery post looked at how to get the mouse co-ordinates with jQuery as the mouse moves around the page or over a particular element. This post looks at how to get the mouse co-ordinates when an element is clicked.
Get the mouse co-ordinates with jQuery
Posted October 6th, 2009 in Javascript
jQuery's mousemove function can be used to track the mouse x and y co-ordinates either for an entire document or just when mousing over a particular element.
Use jQuery's select() function to automatically select text in an input field
Posted October 2nd, 2009 in Javascript
By default, when a user clicks a text input field in an HTML form the cursor is positioned in the text input but the text is not selected. Using jQuery's select() function it's easy to make the text be selected when clicking into the field.
How to use static variables in a Javascript function
Posted September 29th, 2009 in Javascript
There may be times when a static variable is needed in a Javascript function; static variables maintain their value between function calls and are tidier than using a global variable because they cannot be modified outside of the function.
Minify Javascript and CSS with YUI Compressor
Posted September 25th, 2009 in HTML and CSS and Javascript
I've previously posted about minifying Javascript using a PHP port of Douglas Crockford's JSMin Javascript minifier but learned today of the YUI Compressor which does an even better job of minifying by replacing local symbols with 1 letter symbol names and other optimizations. It is also able to compress CSS files.
jQuery Facebox dialog with greyed out background
Posted June 27th, 2009 in Javascript (Updated September 22nd, 2009)
Yesterday I posted how to grey out a web page which is useful when showing a Javascript dialog box and in this post show how to do the same when using the jQuery Facebox plugin. The Facebox plugin makes dialog boxes that look like the ones in Facebook.
jQuery Facebox dialog with opaque background
Posted September 22nd, 2009 in Javascript
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.
How to tell if an element is visible with jQuery
Posted September 18th, 2009 in Javascript
jQuery makes it easy to determine if an element is visible or hidden with the is() function. This post shows some examples of how to do this and also how to loop through each of the visible or hidden elements.
Upper and lower case strings with Javascript
Posted September 15th, 2009 in Javascript
I needed to convert a string to lower case the other day with Javascript and wasn't sure of the exact function name, so turned to my blog but was surprised I didn't have a post about how to do this... so here it is now.
Calling $(document).ready multiple times with jQuery
Posted September 11th, 2009 in Javascript
jQuery's $(document).ready() function runs the code within that function after the DOM is loaded (I've written about this previously here). Something I haven't needed to do before, but was wondering if it's possible, is to use $(document).ready() more than once.
jQuery Animated Information Box
Posted September 8th, 2009 in Javascript
This post shows how to have a animated information box with jQuery. There are a series of links and when the user either clicks the link or moves their mouse over it, the content in the box next to it changes. This can be useful when showing features of a software product, web hosting etc.
Kidzstuff reskinned and uses jQuery Superfish Menus plug-in
Posted September 4th, 2009 in Case Studies and Javascript
I've reskinned the Kidzstuff website again (this is the 4th different design I've used now) and am much happier with the result this time. (A screenshot of the version 3 design can be seen here and the versions 1 and 2 here). This new design utilises the jQuery Superfish Menus plug-in which is the main purpose of this post.
Relatively moving a div left or right with jQuery
Posted August 28th, 2009 in Javascript
jQuery's animate() function can do a lot of useful animation effects (see here for some more examples and documentation on the jQuery website). Something I found useful the other day is that it's possible to move a div relatively left or right using the animate function, e.g. you can move it50px to the right from its current position, instead of to an absolute position.
Running a function with jQuery when the window is resized
Posted August 25th, 2009 in Javascript (Updated August 26th, 2009)
Although it should be avoided where possible, there may be times when something on a web page needs to be adjusted if the window size is changed. This can be done quite easily with jQuery but it needs to be done with caution as I show in this post how different browsers react to $(window).resize()
jQuery Superfish Menus Plug-in
Posted August 14th, 2009 in Javascript (Updated August 18th, 2009)
The Superfish jQuery plug-in creates Suckerfish style flyout menus from HTML unordered lists and is very easy to use. It can work entirely with CSS alone but the jQuery bits add some enhancements. This post demonstrates how simple it is to use and in the next jQuery post I show how I cache the parts of the menu that are initially hidden with Javascript so they don't need to be downloaded with every page load. This latter aspect is very useful if it's a large menu structure.
Rounding numbers with Javascript
Posted May 5th, 2009 in Javascript (Updated August 11th, 2009)
The Javascript Math object has various mathematical functions and constants including .round() for rounding, ceil() for rounding numbers up and floor() for rounding numbers down.
Fixed number of digits after the decimal place with Javascript
Posted August 11th, 2009 in Javascript
As well as supporting various rounding functions, Javascript has the toFixed() method to have a specific number of digits after the decimal place. This function works in all browsers including Internet Explorer from 5.5+.
Substrings in Javascript with substr()
Posted July 21st, 2009 in Javascript (Updated July 24th, 2009)
There are two ways to get substrings using Javascript using the string object's substr() and substring() functions. You could also extract a string using a regular expression but I'll cover that in another post.
Substrings in Javascript with substring()
Posted July 24th, 2009 in Javascript
There are two ways to get substrings using Javascript using the string object's substr() (deprecated, and covered in an earlier post) and substring() functions. You could also extract a string using a regular expression but I'll cover that in another post.
Combine and minify Javascript files with PHP
Posted July 16th, 2009 in Javascript and PHP
If you're using a Javascript library like jQuery it's likely you'll end up with many Javascript files that need to be included in each page request. Ideally these should be combined into a single file and minified to cut down on page load time. This post shows how to use jsmin-phpto combine multiple Javascript files into a single minified file.
Add an FCKeditor with Javascript only
Posted July 12th, 2009 in FCKEditor and Javascript
I normally embed the FCKeditor HTML editor into my forms on the server-side using PHP but it's also possible to do using Javascript alone, as I worked out when writing last week's FCKEditor post about getting the word count when I needed to embed an example with Javascript.
Get a string's length with Javascript
Posted July 10th, 2009 in Javascript
This is one of those posts that looks at a really basic function: how to get the length of a string with Javascript. Yes this is a really basic function, but I found myself reaching for my O'Reilly Javascript book the other day because I couldn't remember if it really was as simple as String.length... In writing this post I know I will never forget it again!
Use jQuery's data() method to store data in the DOM
Posted July 7th, 2009 in Javascript
jQuery has a .data() method for storing data in the DOM should you need to for one reason or other. This is preferable to storing data in some other attribute such as "rel" or "alt" which is often seen in tutorials and examples on blogs.
Count the words in an FCKeditor instance with Javascript
Posted July 5th, 2009 in FCKEditor and Javascript
A couple of days ago I looked at how to count the words in a textarea or input with jQuery and in this post look at how to do the same but for an FCKeditor instance. FCKeditor is an in-browser HTML editor. The code for counting the words uses regular Javascript and does not require jQuery.
Count the words in a textarea or input with jQuery
Posted July 3rd, 2009 in Javascript
This post shows how to get a word count from an HTML textarea or text input using jQuery and display it on the page. The word count is updated as the user types.
Make jQuery Facebox loading screen auto-center
Posted June 30th, 2009 in Javascript
I've been using the jQuery Facebox dialog plugin in a couple of my projects and one thing that annoys me by default is the loading screen appears at an arbitrary position on the page and then becomes centered after the content has loaded; it's the moving after load I find messy. This post has a simple change that needs to be made to the Facebox code so it auto-centers the loading dialog.
Grey out a webpage
Posted June 26th, 2009 in HTML and CSS and Javascript
When showing an inline popup in a webpage (as opposed to a popup window) it is nice to grey out the background a little to highlight that the user should now interact with the popup rather than the webpage. This post shows how to do the necessary HTML and CSS to achieve this and tomorrow's post will look at implementing the greyed out background with the jQuery Facebox plug-in.
Accessing form elements by name with jQuery
Posted June 23rd, 2009 in Javascript
There are a variety of ways to access elements with jQuery including by the name property of form elements (the name="" part of <input name="foo">). This can be useful so you don't have to assign an id to each and every form element as well as a name which is needed to pass the form value to the next page.
Clear a form with Javascript
Posted May 22nd, 2009 in Javascript (Updated June 19th, 2009)
An HTML form can be reset using a reset button but this resets the form back to its original state, whereas you may want to be able to clear all the fields in the form. This post shows how to do this with Javascript.
Clear a form with jQuery
Posted June 19th, 2009 in Javascript
A few weeks ago I posted how to clear a form with Javascript and in this post look at how to do the same thing but using jQuery, which makes the code required to do it much more condensed.
Trimming strings with Javascript
Posted June 16th, 2009 in Javascript
Javascript does not have built-in functions to trim strings so they need to be defined either by using a Javascript framework/library such as jQuery which includes a trim function or to define trim functions yourself. This post shows how to create trim() ltrim() and rtrim() functions.
Get all cookies with Javascript
Posted June 12th, 2009 in Javascript
In my last jQuery post I looked at how to set, get and clear cookies with jQuery and now look at how to get a list of all the cookies that have been set. This is not jQuery specific and will work with just regular Javascript.
Setting cookies with jQuery
Posted June 9th, 2009 in Javascript
Setting and clearing cookies with jQuery is really easy (especially when compared with regular Javascript) but it's not includedin the jQuery core and requires a plug-in. This post shows how to set, get the value of and clear cookies with jQuery.
Use append() to add text/html to an element with jQuery
Posted June 5th, 2009 in Javascript
jQuery's function append() can be used to add text or html to an element. It's very easy to use and this post shows some example code and has a working example where you can type in some text that will be appended to a div.
Multi line strings with Javascript
Posted May 26th, 2009 in Javascript
This post shows how to do multi line strings with Javascript.
Find the index of the element that was clicked with jQuery
Posted May 19th, 2009 in Javascript
There may be times when you need to know the index of the element that is clicked from within a group of elements e.g. a group of divs inside another div. This can be done easily with jQuery using the index() function.
Get the milliseconds with Javascript and measure time
Posted May 15th, 2009 in Javascript
If you need to measure how long something takes with Javascript you can use the Date() object to get a start timestamp and then compare it later on using a second Date() object. Although I'm sure there are other benchmarking plugins etc available this can be a quick and easy way to benchmark something in Javascript.
Get a UNIX timestamp with Javascript
Posted May 12th, 2009 in Javascript
The Javascript Date object has a number of functions for working with dates and times. The getTime() method returns the millisecond representation of the Date object and this post shows how to convert this to a UNIX timestamp.
Clear upload file input field with jQuery
Posted May 10th, 2009 in Javascript
The value of an HTML file input field cannot be changed or reset (without doing a full form reset) for security reasons. The other day I read Bogdan Gusiev's post about how to clear an upload file input field by resetting the HTML of a containing div to its intial state using Javascript and thought I'd take it one step further by doing this in jQuery and adding a clear button next to any file input field on a web page.
Format a date time in Javascript in database format
Posted April 24th, 2009 in Javascript
In some admin forms for own purposes I needed to have a "now" function to put the current date and time into the text field using Javascript. For various reasons I preferred to do this on the client side with Javascript than on the server side with PHP. The date and time format needed to be in a database YYYY-MM-DD HH:MM:SS format so it could be directly inserted into the database.
Pad a number with leading zeroes in Javascript
Posted April 19th, 2009 in Javascript (Updated April 20th, 2009)
As far as I have been able to tell there isn't a built-in way with Javascript to pad a number with leading zeroes to make it a fixed width like with e.g. sprintf in other programming langages. This post looks at a way to pad a number with zeroes with Javascript.
Loop through selected elements with jQuery (Revised)
Posted April 14th, 2009 in Javascript
Earlier today I posted how to loop through elements in jQuery but as pointed out by Bloid at DZone it wasn't a very good way of doing it. This post is a revision to that earlier post and thanks to Bloid for letting me know a much better (and more jQuery way) of doing this.
Loop through selected elements with jQuery
Posted April 14th, 2009 in Javascript
There may be times when you need to loop through elements in jQuery to collect information, change state or some other nifty trick that can't be done easily using jQuery's various selection etc functions. This post has an example of looping through elements with jQuery by getting all the href attributes from the <a> tags of a selected element.
How to tell if an element exists with jQuery
Posted April 10th, 2009 in Javascript
Last week I looked at how to get the total number of matched elements with jQuery which also showed how to tell if an element exists with jQuery. I've decided to create a second post just showing how to tell if an element exists to make it easier to find this functionality when searching this blog.
Loop through key value pairs from an associative array with Javascript
Posted April 3rd, 2009 in Javascript
This post looks at how to loop through an associate array with Javascript and display the key value pairs from the array. An associative array can contain string based keys instead of zero or one-based numeric keys in a regular array.
Get the total number of matched elements with jQuery
Posted March 31st, 2009 in Javascript
There may be times when you need to work out how many times a particular element appears on a page or within a section with Javascript and this is easy to do with jQuery using the length property. Using the method in this post you can also work out if an element exists on the page with jQuery.
Add an offsite link icon after external links with jQuery
Posted March 28th, 2009 in Javascript
Yesterday I posted how to add an offsite link icon after external links with CSS and in this post look at how to do the same thing but with jQuery instead of CSS. This allows the offsite links to appear in Internet Explorer 6 because the a[href^="http://"] type selector is not supported in IE6.
Use jQuery to make all offsite links open in a new window
Posted March 24th, 2009 in Javascript
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.
Force reload of updated CSS and Javascript files with unique filenames
Posted March 20th, 2009 in Apache, HTML and CSS, Javascript and PHP
When a CSS or Javascript file is changed the visitor's browser needs to get the latest copy of the file to reflect the changes, but it will have been cached and may cause rendering or functionality issues depending on the changes. To force reloading of the CSS and Javascript file the files should be renamed each time they are changed; this can be automated by using PHP to add the timestamp of the file into the filename.
Add options to an HTML select box with Javascript
Posted March 3rd, 2009 in Javascript
This Javascript post was going to be about language selection in FCKEditor from a drop down box as a follow up to the previous FCKEditor post but I've decided to postphone that post until Friday and look at how to add options to an HTML <select> drop down box with Javascript, because the next FCKEditor post will be doing just that.
Show and hide an element with jQuery - Part 2 of 2
Posted March 1st, 2009 in Javascript
This post is the second of a two part post which look at how to show and hide an element with jQuery. The previous post looked at the show() and hide() functions and this post looks at the toggle(), fadeIn() and fadeOut() functions.
Show and hide an element with jQuery - Part 1 of 2
Posted February 27th, 2009 in Javascript
jQuery is a powerful Javascript library which makes adding useful Javascript stuff to your website easy across browsers. This post looks at how to show and hide an element with jQuery using the show(), hide(), toggle(), fadeIn() and fadeOut() functions.
Attaching an event to an element with jQuery
Posted February 24th, 2009 in Javascript
My last jQuery post looked at jQuery's document ready initialization function which you can use to do stuff to prepare your web page, including things such as attaching an event to an element which I will look at how to do in this post.
jQuery's document ready initialization
Posted February 20th, 2009 in Javascript
jQuery has a $(document).ready() function which is invoked after the DOM is loaded and before the page contents are loaded. It means you don't have to have body onload events and can completely remove all Javascript from your HTML by attaching events to elements independent of the HTML after the DOM has loaded.
How to get the timezone offset with Javascript
Posted February 17th, 2009 in Javascript
There may be times when you want to work out what the difference in timezone is between the web browser client and the web server. This is possible using the Javascript Date object's getTimezoneOffset() function.
Replacing text with Javascript
Posted February 10th, 2009 in Javascript
Javascript has the .replace method for strings which allows for replacement of strings within strings using regular expressions. This post has some examples of replacing text with Javascript.
Loading content with jQuery AJAX and dealing with failures
Posted February 6th, 2009 in Javascript
Some of the last few jQuery posts on this blog have looked at loading content with jQuery AJAX, selecting the element to inject and using a loading image. In these posts I incorrectly noted that the .load() method does not allow for error reporting and therefore you cannot deal with failures so another method would be required. Having had a better read of the jQuery docmentation I now know youcan deal with failures when using .load() so this post looks at how to do this.
Loading content with jQuery AJAX - using a loading image
Posted February 3rd, 2009 in Javascript
A couple of weeks back I looked at how to load remote content with jQuery and AJAX using the jQuery .load() function. This post expands the functionality by looking at how to put a loading image as a placeholder where the new content will go while it is still downloading.
Using setTimeout() with Javascript
Posted January 27th, 2009 in Javascript
The Javascript setTimeout() function allows code to be executed a set time after some trigger, such as when the page has loaded or a button is pressed. This post looks at how to trigger events after a set time with Javascript and alsp how to clear the timeout.
@name selector is deprected in jQuery, removed in jQuery 1.3
Posted January 23rd, 2009 in Javascript
In my how to check and uncheck a checkbox with jQuery and how to get and set form element values with jQuery posts I used @name= selectors for some of the form elements but have since discovered the use of the @ was already deprecated and has been removed in jQuery 1.3.
Loading content with jQuery AJAX - selecting the element to inject
Posted January 18th, 2009 in Javascript
On Wednesday I looked at how to load content with jQuery via AJAX using the .load() function. This is the second part of that post which looks at how to just select a portion of the content loaded and inject just that part into the current webpage.
Loading content with jQuery AJAX
Posted January 14th, 2009 in Javascript
With jQuery it is simple to load content with AJAX and inject it into the current web page using the .load() function. This post shows a basic example doing this. Future posts will look at some other ways of loading content and making AJAX requests with jQuery.
Dynamically get and set an elements content with jQuery
Posted January 11th, 2009 in Javascript
This is the first post in a long series of how to do stuff with jQuery. They will start with some basic stuff and get more complex as the year goes by. New jQuery and Javascript posts are made on this blog on Sundays and Wednesdays; subscribe to my blog at the end of this post so you don't miss out. This first post looks at how to get and set the HTML of an HTML element with jQuery.
Adding, removing and checking if an element has a CSS class with jQuery
Posted December 16th, 2008 in Javascript
jQuery is a useful Javascript framework which simplifies cross browser Javascript development. This post looks at how to check what CSS class an element has with jQuery, and how to add and remove CSS classes from elements.
Find the index of a string within a string with Javascript
Posted November 28th, 2008 in Javascript
This post looks at how to find the position of a character or a string within a string with Javascript using the indexOf function.
Opening a new window with Javascript
Posted November 22nd, 2008 in Javascript
On the odd occasion when I need to open a popup window with Javascript I always have to reach for my O'Reilly Javascript book,
How to check and uncheck a checkbox with jQuery
Posted November 14th, 2008 in Javascript
jQuery is a Javascript framework which can simplify coding Javascript for a website and removes a lot of cross browser compatibility issues. Yesterday I looked at how to get and set form element values with jQuery but didn't deal with checkboxes. Today's post looks at how to tell if an HTML form checkbox is checked or not checked with jQuery and then how to change it to be un/checked.
Chrome Javascript date bug
Posted October 3rd, 2008 in Applications and Javascript (Updated October 24th, 2008)
There is a bug in Google Chrome which causes it to get the date and time wrong in Javascript in some timezones, apparantly only in the southern hemisphere.This post looks at the issue and how I became aware of it only because of using Gmail.
Work out the Webkit version with Javascript
Posted September 21st, 2008 in Javascript
This post looks at how to extract the Safari and/or Webkit version number from the web browser's user agent string using Javascript so you can do different things depending on the Webkit version used.
Javascript getYear fix
Posted August 13th, 2008 in Javascript
The Javascript Date object method getYear() will return a 2, 3 or 4 digit value depending on the actual year specified and the browser version used. This post looks at two solutions for this Javascript getYear() issue.
Style an HTML form input with CSS and jQuery
Posted July 26th, 2008 in HTML and CSS and Javascript
It's possible with CSS to style a particular form input type without having to assign a class to each one with the special style. For example you may want to add a margin before radio buttons in a form but not all the other input elements. Unfortunately this doesn't work in Internert Explorer 6 (which still has about 25% market share as at the writing of this post) but there is a way around this using Javascript. In this post I'll look at both the CSS way of doing this and then also using the jQuery Javascript library.
How to disable Javascript in Mozilla Firefox
Posted July 19th, 2008 in Applications and Javascript
Forms on websites are typically validated using Javascript on the client side to prevent additional round trips to the server if a form hasn't been completed correctly, and are then also validated on the server side. When testing a website you need to be able to test both so need to disable Javascript in your web browser to test the server side validation. This post looks at how to disable Javascript in the Mozilla Firefox web browser. The specific version the screenshots come from are Firefox 3 but it should be the same for earlier versions.
How to check if a Javascript function exists
Posted July 5th, 2008 in Javascript
Sometimes you might want to call a function in Javascript but check if the function exists before calling it. This is very simple and is covered in this post.
Clearing the default value of text input with Javascript
Posted June 17th, 2008 in Javascript
Often in a web form you will put a default value into a text box which explains what the box is for and when the user clicks into the box clear the value. An example of this is a sidewide search box where you might want to put the instructions (e.g. "enter your keywords here") in the box instead of as a title for the text input. This post looks at how to clear the value only if it is set to the default value with Javascript.
Use normal href if Javascript is disabled
Posted June 12th, 2008 in Javascript
I saw a post on a bulletin board somewhere recently where the poster asked how to make the href work normally on a link like this <a href="javascript:;" onclick="dosomething()"> if Javascript is not enabled. It's actually quite simple and I will look at how to do this in this post.
Which browsers support which versions of Javascript
Posted June 7th, 2008 in Javascript
As well as putting "javascript" as the language or type element of the <script> tag you can specify a version, for example javascript1.5. What this means is that browsers that do not support that version of Javascript will not run the code in that <script> block. I was interested to find out if this meant a simple way of determine which browser was being run with Javascript but as my findings in this post show it's not...
swfobject "t has no properties" error
Posted May 28th, 2008 in Javascript
I used swfobject 2.0 to insert a flash movie into a customer's website and it all worked nicely. I then moved the page it was on and it stopped working. This post looks at the error message I found ("t has no properties"), what I did wrong and what the solution was.
Using Javascript to focus a form element onload
Posted January 5th, 2008 in Javascript
The Personalised Plates website has a big input box on every page for searching for available personalised plates. The page template uses the Javascript form element focus() function to set the focus on this text box when the page loads so the user can start to type in a personalised plate idea without having to click the box with their mouse.
Assigning values to associative arrays in Javascript
Posted December 30th, 2007 in Javascript
Javascript has zero indexed integer arrays and also associative arrays. They work in a similar manner but there is a useful way to be able to initialise an associative array with both keys and values in one call. This post will look at the way a zero based integer based array can be initialised and then the ways it can be done with associative arrays in Javascript.
Javascript and CSS file timestamps with PHP
Posted November 1st, 2007 in HTML and CSS, Javascript and PHP
Many websites I have worked on have frequently modified CSS style sheets and Javascript library files. In order to prevent Javascript errors or layout and style issues caused by web browsers caching these files, I used to rename the file for each revision, and then modify the name of the CSS or JS file in my PHP header include files. This article looks out how I now do this using the modified timestamp of the file.
Testing if a Javascript variable is defined
Posted October 23rd, 2007 in Javascript (Updated October 23rd, 2007)
Sometimes in Javascript you need to be able to determine if a variable has already been defined before continuing with your script. It is very simple to do this using the typof operator.
RSS Feed
Facebook
Twitter
By Email