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 it's 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'.