Webistrate - Draw Your Own Conclusions

jQuery: Padding a Variable or String with a Specific Character

Posted by Jamie Munro | January 30, 2012 | Tags:

Every so often you will receive data from a database or potentially user input, but a specific number of characters might be required to format or display the data properly.  As an example, you may wish to ensure that a number less than 9 is prefixed with a 0 where numbers that are 10 or more do not need the padding.  By extending jQuery, two functions can be created to either prefix or postfix a specific value to a DOM element using a jQuery selector.

See the solution »

Share


jQuery: Creating Your Own Selector

Posted by Jamie Munro | January 16, 2012 | Tags:

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.

See the solution »

Share


jQuery: Checking if an element exists

Posted by Jamie Munro | January 2, 2012 | Tags:

You want to do some conditional processing depending on if an item or items exist in your DOM (Document Object Model).

See the solution »

Share


jQuery: Implementing a callback

Posted by Jamie Munro | December 19, 2011 | Tags:

As we move into a more and more interactive era of website development, more of the JavaScript 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.

See the solution »

Share


jQuery: Global AJAX Events for Start, Stop, Complete, or Error

Posted by Jamie Munro | December 12, 2011 | Tags:

Your website contains a lot of AJAX requests using jQuery and you want to add a global event at the start or finish of the AJAX request, e.g. add a spinning icon, or handle all AJAX errors in a particular fashion.

See the solution »

Share


jQuery: Splitting an unordered list into multiple columns

Posted by Jamie Munro | November 21, 2011 | Tags:

I was recently answering some questions on Stackoverflow and an intriguing question came up.  How do I split an unordered list into a multiple lists to turn them into columns?

E.g.

  • Test 1
  • Test 2
  • Test 3

Becomes:

  • Test 1
  •  Test 2
  •  Test 3

One of the keys of course is speed and not duplicating/cloning the DOM elements because it will be extremely inefficient.

See the solution »

Share


jQuery: Manipulating an array of HTML elements with $.map()

Posted by Jamie Munro | November 14, 2011 | Tags:

jQuery’s $.map() function is a pretty neat function.  It accepts an array as a parameter and then will iterate through each item in the array allowing you to further manipulate and build a new array with that data.  This article will explore how to use it while providing a useful example.

See the solution »

Share


CSS: Fixed Position Content

Posted by Jamie Munro | October 3, 2011 | Tags: ,

I truly believe that Facebook is attempting to shape the Internet.  Every time a changed is made, there is always massive uproar – both positive and negative.  A recent change that I noticed was how they began using previously “unused” content spacing.  This is done intelligently and only when you have a screen resolution greater than 1280 pixels wide.  It’s an extremely simple process to add using the most basic CSS and some basic jQuery resize detection.

See the solution »

Share


CakePHP: Using the jQuery Sortable Plugin and Saving to the Database

Posted by Jamie Munro | September 26, 2011 | Tags: ,

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 Sortable Plugin, you will be able to provide a simple, but effective drag-and-drop ordering solution for just about any type of data!

See the solution »

Share


jQuery: Organizing data with the Sortable plugin

Posted by Jamie Munro | September 22, 2011 | Tags:

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, you will never have to write such a poor system again!

See the solution »

Share


Page 1 of 212

Buy one of my books