Change the jQuery UI button icon based on the buttons state (i.e. checked/unchecked)

I really enjoy working with jQuery UI, however in some case the UI is not as intuitive. Here is an example: Let’s say you have a radio input set where you’re asking your users to select one of the options.

Read More»

Add close button to dynamically added jQuery UI tabs

When working with jQuery UI tabs it is really easy to dynamically add tabs. You just use tabs  ”add” method as specified in the documentation: .tabs( ‘add’ , url , label , [index] ). But there is no method for dynamically adding a close

Read More»

Progressive Enhancement: Anchor Links to Side Tabs

Here is an example of progressive enhancementtechnique using jQuery to turn anchor links into side tabs. Anchor Links Example Assumption here is that the links are inside an unordered list with ID “services” services assigned to it. <ul id=”services”> <li><a

Read More»

Progressive enhancement: Accordion Style FAQ’s with jQuery

Condense a lengthy FAQ page with accordion style navigation, making your answers only appear when the questions of interest are clicked. To use it: Add this script to the FAQ page Assign class “question” to every question Assign class “answer”

Read More»

jQuery UI: Highlight multiple dates in jquery datepicker

The events are stored as UNIX timestamps in a MySQL table. We’ll be getting those events from the database via AJAX and highlight them in the jQuery UI datepicker widget. HTML Javascript $.ajax({ url: “dates.php”, data: “action=showdates”, dataType: “json”, success:

Read More»

Progressive enhancement: AJAX navigation menu with jQuery

Progressive enhancement allows everyone to access the basic content and functionality of a given web site using any browser or Internet connection, while also providing those with a more advanced browsers an enhanced version of the site. Here is an

Read More»

Create simple cross-browser textarea editor

This tutorial will help you create simple cross-browser textarea editor you can use on any of your HTML forms. View the sample. UPDATED Dec/2010! Added support for latest versions of: Chrome Safari FireFox Opera IE9 The main DHTML methods used

Read More»

Create a Scrolling Text Box using JavaScript

This can be easily done using jQuery or similar JavaScript libraries. But sometimes you may choose not to load the whole library for a simple task like scrolling text. Javascript scrolling text function Create a javascript function and place it

Read More»

Dynamicaly generate a Web Safe Color palette with JavaScript

When working with jQuery UI tabs it is really easy to dynamically add tabs. You just use UI’s “add” method as specified in the documentation: .tabs( ‘add’ , url , label , [index] ). But there is no method for dynamically adding a close

Read More»

Javascript location Object explained

Javascript scripts can manipulate the Web pages and it’s contents using a hierarchy of parent and child objects called the DOM (Document Object Model). Those objects are organized into a tree-like structure and represent all of the components of a web

Read More»
© Copyright Emir Plicanic