As a user of the Internet, I enjoy slick looking features that help make my experience look cool and seem fast or seamless. A nice trick to include this type of functionality is to perform a transition of new content using jQuery’s $.animate() function.
Category: jQuery
-
jQuery: Splitting an unordered list into multiple columns
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? Using a combination of a JavaScript array and jQuery, I will leverage splice, append, html and a common for loop.
-
jQuery: Padding a Variable or String with a Specific Character
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 with a JavaScript array.
To start, here is an example of the starting input and the ending output:
-
Experimenting with the canvas for a basic walk animation
I don’t claim to be an animator, JavaScript array expert, or anything else; I simply wanted to explore the canvas tag in HTML5. In the following article, I demonstrate how to create a simple walking animation using a free sprite that I found on the Internet.
Before I show the solution, I’m going to start with the finished product. Like I stated, it’s extremely basic and not the most overly exciting thing in the world. But from a person who has been creating web applications for 10 years, I found it pretty cool.
-
Deep clone an object with jQuery
To copy/clone an object using jQuery, you will want to leverage the extend function. This function accepts N objects to clone/merge as well as a boolean to indicate whether it should copy recursively or not.