To clear the text, textareas, passwords, selects, radios and checkboxes, but leave for instance hidden inputs (and any other form-elements not specified in the code below) alone you can safely use the following jQuery code. You can easily add additional field types to clear those also.
You can use the same jQuery traversal and selection methods for XML that you use for (X)HTML. this makes it very easy to parse an XML file and process it's contents if you already know jQuery.
Here's a quick example of an rss parsing script.
The XML file of course needs to be on the same domain or retrieved via a simple serverside proxy script, because of cross site scripting restrictions in JavaScript:
To see whether an attribute on an html or xml element is actually defined / present, you can do the following:
This code exemplifies how you quickly retrieve the position of your mouse using jQuery
This simple bit of jQuery code allows you to quickly detect and hide all elements containing a specifed text value on a page:
the following shows how you can quickly see what the index of an element is, using the prevAll() method
Yhe following snippet shows one way you can quickly switch the source for your screen stylesheet with jQuery:
One of the things that jQuery makes so much easier in javascript is detecting keyboard events crossbrowser. Here's a simple example detecting the cursor / arrow keys up down left and right:
This little script allows you to sort items in a list or any similar dom-based structure using jQuery.
The following jQuery plugin allows you to handle forms submits via ajax rather than via page (re) loading. Havent built in support for checkboxes and radio yet but that shouldn't be too hard if needed.
It's always quite handy to register something general for handling errors occuring in your script when using Ajax in jQuery:
Somewhere in your jQuey based Ajax handling scripts register a general error handler like so:
Or you can use the live method to bind the keyup handler to future additions to the DOM:
The fact that you can use CSS pseudo selectors to select elements in jQuery makes it much easier to find the element or input with focus inside a document. You can simply use the :focus pseudo selector. This works on all major browsers except ofcourse IE6.
To retrieve a select's selected option value you can use the jquery val() function but if you specifically the text node's contents of the selected option you can use something like the following:
This simple jquery plugin adds the option to get / set the url of the background image of the jQuery selected elements. The main point of this is just simplifying the extraction of the background image's - location in clean url-format from the element's css properties, so it can be used for other images. This is done by a simple regular expression.
There's a lot of vertical align javascript solutions around all using roughly the same mechanisms to vertically align html elements inside their containers. A good example of javascript stepping in where CSS seems to fail miserably. It seems strange that css fails to provide clear specifications for this essential alignment behavior in html lay-out.
Luckily it's quite easy to do with jQuery.
This works well for elements that are block displayed :
This is just one way you can do this with the this placeholder :
The following design pattern was taken from Mike Alsup's article on the website learning jquery and serves as a handy starting point for scripting jquery plugins.
The following jQuery code will load the google Analytics code on dom ready thus preventing any slowdown in the loading of the page. replace the the UA-xxxxxx-x bit with your your google analytics account id:
To scroll to top of the page with jQuery use the following:
If you need a modal box quickly and have jQuery in place:
you can just adjust and paste the following line of code in any eventhandler to quickly flash a message in a modal box for a short period of time on the screen. Adjust the script to your needs:
This jquery plugin takes a container element and wraps in an extra container and creates two links -- one for scrolling it's content to the left and the other for scrolling it to the right.
Download it here or grab the code below
The script has been tested on Safari, IE and FF .
It does require all scrollable items to share the same width -this is something I may change in a later version
Several carousel options are exposed for controlling automated scrolling , lay-out etc.
This can be seen the carousel below that was created with the following call:
This simple javascript is used to add a few social media links to your webpage. You can add any social media you like by extending the socialMedia object that contains the data.
This uses jQuery for selecting the element and appending content to it, but you could easily use document.getElementById('elementId').innerHTML = 'bla' instead if you want to include the media links without the jQuery.
I use this a lot nowadays for keeping clickhandlers organized neatly in a single object where I can quickly find them if neccesary.
If you use this all you have to do is give elements the classname '.linked' and create a corresponding function in the linkhandler lookup table
This is a quick lightweight modal window script with background overlay. It's been tested on Safari 2 and 3, FF 2 and 3 and IE6-8. Needs jQuery to be included
This is triggered as soon as the dom is ready for manipulation
You can use jQuery to access elements in another frame by accessing the jQuery object in that frame. You should always check if it exists (/ has been loaded yet) first.
Although browser detection is going out of fashion fast, I still use it sometimes to quickly deal with bugs in certain browsers .
This is an example of how you can use the browser object in jQuery to target specific browsers and their versions. The code in the below conditional is only executed when Internet Explorer 6 loads the page:
Very lightweight and efficient tab script with fade in / fade out effect.
The following script goes in the head section:
This will make an element with id footer stick to the bottom of the window, but only if the document body height is less than the window height. If it isn't it 'll just follow the normal document flow.
No margin,border or padding should be set on the element, only on its children if need be, for this to work properly:
Execute the function, and what is in between the curly-brackets, for each of the DOM elements that matches the selector. The keyword 'this' refers to the current element the loop is dealing with.
The function specified receives an iterator as argument by default, represented in this example here as 'i'.