I received a bit of a nasty shock when by sheer chance, one of the project managers updated their machines and got Internet Explorer 9 installed in the process, only to instantly come back to me and announce that the drag and drop features on our web project no longer worked – at all.
If you are using the brilliant jQuery DataTables plugin to present your data in nifty dynamic tables, and are using it in a server-side loading context, you have no doubt encountered the issue when a table with a lot of columns (more than 20) fails to load (in other words stays in “processing” mode) when browsing using Internet Explorer (IE).
jQueryUI’s awesome sortable functionality makes it a breeze to create sortable widget dashboards, allowing you to place little widget panes across a number of columns to your heart’s desire. However, the default is that the entire widget or portlet pane forms part of the sortable interface, making it quite a pain when you have something like a horizontal scrollbar on your widget!
To toggle an element in terms of visibility, like a DIV for example, is pretty easy with jQuery and it’s ultra nifty toggle() function.
Before jQuery’s native live() and delegate() functions came into being, the default for handling binding on late generated DOM elements was to make use of the excellent Brandon Aaron plugin LiveQuery (otherwise known as Live Query). Today we look at how one handles the hover event using a livequery declaration.
So you are the type of person that likes those cheesy moving, animated characters and backgrounds that appear on numerous websites around the Internet. In fact, you love just about anything that moves and hence are absolutely in love with creating Flash animations. But what if Flash wasn’t available to you?
More often than not, your HTML elements will have more than one class assigned to them. Now while it is easy to check if an element belongs to a certain class with jQuery’s built in hasClass function, you’ll be pleased to know it is just as easy to iterate through all of an element’s classes with some basic loop work.
The jQuery UI library is a brilliant collection of official jQuery UI widgets and effects, one of them being the extremely useful Tabs widget.
Tabs allows you to shorten a page by placing bits of a page’s content into their own little “tabs”, which can be access by clicking on the tab header. A brilliant space saving mechanism and one that has become quite commonplace in applications these days.
Sometimes it is nice to remember what tab you currently have open so that when you travel to some other part of a site and then return to your original page, you want it to remember which tab you had currently selected.
To change the selected value, or selected index if you will, of a dropdown list using jQuery is not particularly difficult.
If you have a group of checkboxes on a page, sometimes it is quite nice to give the user some quickfire controls that allows him to select all or select none at a click of a button. Similarly, it is pretty cool to give him the option of inverting his current selection, in other words checking all of those checkboxes currently unchecked, while unchecking all the currently ticked checkboxes.
To return the number of checked or ticked checkboxes on a page using jQuery is in actual fact pretty simple. By making use of the special :checked selector and combining it with the standard length property.
Today’s tip looks at how you can quickly and easily implement a visually helpful hover-based row highlight on any of your datatable objects.
Today’s tip looks at how you can specify what column widths to use in your DataTables implementation, instead of relying on the default auto column widths assigned by the plugin.
As a bonus, the awesome jQuery DataTables plugin (which I religiously use on all my work-related HTML tables nowadays) comes with the option to enable jQuery ThemeRoller styling with a simple switch of an initialisation parameter!
The question for today is how to bind a single function to multiple different elements (in other words, elements with either different classes or IDs) in a single call.
I’ve written on the excellent jQuery Color Picker plugin from eyecon.ro before, but a question was recently raised on how to use its RGB output in code. Well actually it turns out that most browsers return its value as a standard HEX color value, but one browser in particular (and I’m not naming names here but it is the one who everyone who think themselves better than the average home user seems to love) returns the value as a RGB color string.
Today’s quick code tip looks at how one would send all user’s selections made in a multiple select box to a processing script using a jQuery AJAX call.
One of the cool little tricks I stumbled across was the ability to dynamically alter the URL of an iframe loading fancybox implementation and thought it a good idea to share over here.
Craig Lotter is an established web developer and application programmer, with strong creative urges (which keep bursting out at the most inopportune moments) and a seemingly insatiable need to love all things animated. Living in the beautiful coastal town of Gordon's Bay in South Africa, he games, develops, takes in animated fare, trains under whichever martial arts dojo is closest at the time, and for the most part, simply enjoys life with his amazing wife and daughter.
Oh, and he draws ever now and then too.
This is a collection of things that he has managed to find the time to scribble down since 2007.
Looking for Something?
Jump to Category: