I’ve recently come up with a need to allow users to view a list of options from which to choose. Do to screen restraints and readability, I opted to use the tabbing functionality I wrote about previously. In the process, however, I wrote some javascript that allows me to add the ‘pick and choose’ functionality to any pair of lists, or single list, I choose.
Single List Mode: This is real simple. The user has a list of items to select from. When the select the item, the ‘selected’ class is added to that item. When they de-select the item, the ‘selected’ class is removed. This is tracked with a hidden input element with the id ‘ls_update_list_array’.
Dual List Mode: When the user views ‘Categories Selected’ (in this case, shown by default), they will see a list of categories currently selected. Under ‘All Available Categories’, they get a complete list of categories to selected from (in this case, minus those categories already selected). We want the user to be able to either add to the list of ‘Currently Selected’ by clicking on the ‘All Categories’ list, or remove items by clicking on them under ‘Currently Selected’. When they click on an item in either list, it is moved from list to the other. This is tracked with a hidden input element with the id ‘ls_update_list_array’.
ls_update_list_array: This is provided simply to allow for an easy form post action. Rather than having Javascript determine when the form is posted and then grabbing the list as an array and blah, blah, blah, you get the list automatically on post.
View Source
As usual, I always need something special in jQuery. I’m always able to find plugins out there, but they never everything I want, the way I want it done. Each always falls short somewhere. It either limits my design flexibility, is buggy or is just flat-out bloated with way more code than is necessary.
I’ve written a tabs script for jQuery that is short and to the point while still allowing for design flexibility and ease. There’s nothing to it. Simply establish the tabs settings with your appropriate IDs and classes and you’re good to go. I’ve used on a few occasions and it has yet to fail me.
As usual, however, let me know if you have problems. I’ve supplied complete code for HTML, CSS and, of course, the jQuery/JavaScript.
View Source
So you have a design and you have decided you want to use a jQuery accordion. You start to layout your design and implement the accordion only to find out that your design is going to cause problems with the standard accordion plug-ins.
The problem with the standard accordion is that they require the child and header elements to be nested within a parent.
View Source
With this script, you can easily load multiple JavaScript files in one call. The main purpose behind this is to simply cut down on the clutter in your source code.
The function can be called from anywhere and the files are specified in an array
View Source
This is a jQuery script for displaying “characters remaining” for input fields.
It will look for any input element with the class “input” (or whatever you specify) and use the element’s maxlength attribute as the value to count against and update the “fieldName-counter” element.
This is a very useful script for those occasions when you want to limit the character entry for an input field.
View Source
