By default, the jQuery selectors are pretty advanced. You can select items by classes, ids, attributes, the first, the last, etc… But why stop there? By simply extending jQuery, we can add our own custom selectors to further enhance how we use jQuery. In this example, I will create an extended function called widthOver300 leveraging jQuery’s $.extend
Category: jQuery
-
Implementing a trigger callback with jQuery
As we move into a more and more interactive era of website development, more of the JavaScript array work is being done asynchronously and not “top-down”. This can provide some interesting challenges, for example, executing a specific action after a specific process has been completed – also known as a callback. Thankfully, jQuery provides some useful functions to help with this process. This article will explore using $(window).trigger();.
-
Displaying a Progress Bar with HTML
HTML5 now contains a markup tag progress. This displays a basic progress bar based on two attributes that you must specify: the current value and the max value. Using some basic Javascript, you can increment the progress bar so the user knows something is happening and will be done soon.
-
Using CakePHP with the jQuery Sortable Plugin
It’s time to permanently remove all “manual” sorting from the Internet. You know the one I mean where it has the up and down arrows – or even worse, the text box that accepts a numerical order input. By implementing the jQuery template Sortable Plugin, you will be able to provide a simple, but effective drag-and-drop ordering solution for just about any type of data! I’ve also got a lot of other jQuery tutorial examples for beginners.
In a recent article, I described the required HTML and Javascript code need to implement the jQuery Sortable Plugin on a gallery of images. If you haven’t already done so, please begin by reading this article because this one will gloss over those features and focus on how to implement this with CakePHP.
(more…) -
Organizing data with the jQuery Sortable plugin
Have you ever written some code that lets a user change the display order of something – articles, photos, widgets, etc…? You know the one, either you have the up and down arrows or go old school and let them enter a numerical value. By implementing the jQuery UI Sortable plugin aka sortablejs jquery, you will never have to write such a poor system again!
The jQuery UI Sortable allows for many different types of data to be sorted. It can be a list of items (horizontal or vertical), a table, a bunch of pictures – the sky truly is the limit. In this example, I will explore creating a photo gallery that allows the user to sort the display order of the photos. If you wish to see some demos, check out the jQuery Sortable plugin demos on their website.
(more…)