Post sort order: Post Date (Newest First) | Post Date (Oldest First) | Alphabetical | Date Updated
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.
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.
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.
Some time back I posted how to show plain text in a password field and make it a regular password field on focus using jQuery, so that it could show some default text (i.e. "password") before anything was entered and then work like a normal password field when the user started typing text into it.
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.
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.
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.
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.
I was asked on my post about showing a loading image when loading AJAX content with jQuery how to disable the button that loads the content while it's loading, and then re-enable it again once the content is fully loaded. This post shows how to do this, and it will work whether it's a link, button or some other action which calls the AJAX loading function.
When assigning a click handler to an anchor tag with jQuery you'll often want to then prevent the browser from clicking through to the actual link. There are two ways I know of to do this with jQuery and these are presented there.
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.
Some time back I posted how to scroll to the top of a page with jQuery and was recently asked how to scroll to the bottom of a page with jQuery. I took a punt on the answer and posted it in the comments without testing it and the commenter said it didn't work, so I tested it out for myself and my solution did work. I present it here along with a link to a full working example which shows scrolling to the bottom and scrolling to the top.
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.
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.
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.
This post is to answer a question asked in the comments section of my "Show and hide an element with jQuery - Part 1 of 2" post from a couple of years ago. It's a pretty simple question, asking how to have an element hidden with CSS at first and then show it with jQuery later. It might be triggered automatically, or when a button is clicked or the mouse hovering over something.
There is a bug in older versions of TinyMCE when using Webkit based browsers (Google Chrome and Apple's Safari) which added and failed to remove hidden divs with the id _mcePaste. This post looks at the problem and offers two solutions: upgrade TinyMCE completely, or just upgrade the paste plugin.
A while back I wrote a series dealing with loading content and JSON data with jQuery and AJAX which culminated in the post "Load JSON data with jQuery, PHP and MySQL" which brought all the techniques together and loaded JSON data into select boxes when the first was changed. I was recently asked how to do this using radio buttons instead, which I show how to do in this post.
I was asked a couple of days ago on my get and set form values with jQuery post how to make a secondary select box appear with jQuery when the first one is changed. The first might contain a list of countries and the second one some cities which changes as the country changes, allowing the user to select both their country and city. This post shows how to do this with several hidden sub-selects, and an earlier post shows how to do it with JSON and AJAX.
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.
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).
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.
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.
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.
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.
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.
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).
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.
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.
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.
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()...
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.