Category: Tutorials

Ajax-style loading boxes are useful when displaying large sets of related data. Think about something like an FAQ page, knowledgebase, or support system. Any type of navigation is often suitable as long as the user can determine how to navigate between content areas.

In this tutorial I want to demonstrate how we can build a custom vertical content section using jQuery. All of the internal content is held inside div containers which can be navigated with an icon-based menu. This content isn’t loaded externally via Ajax, but is instead hidden & displayed using content sections already on the page. Check out my live sample demo to get an idea of what we are building.

jquery vertical content tabs sections tutorial preview screenshot

This original tutorial was created by Soh Tanaka and published back in 2009. Unfortunately his demo has since gone offline and I managed to find an old copy of the source codes. People in the comments have been asking for automatic rotation between the slides and I updated the codes with this feature.

So in this tutorial I am reintroducing some of Soh’s original codes on how to build this dynamic automatic rotator. The jQuery is contained within the same index file and it is easy to follow along. It should also work even running the latest copy of jQuery on your website. Feel free to download a copy of the updated source codes or check out my live demo from the links below.

jquery image rotator tutorial preview screenshot

Adobe InDesign is a program used for creating print designs like album covers and books. A while back I wrote about some easy tutorials for beginners. But in this showcase I want to share 50 powerful InDesign tutorials which offer a whole lot more complicated solutions. The best part is that you don’t need to be an expert with InDesign to understand it all! Check out the gallery and see if any tutorials appear interesting. With a bit of work you can learn how to design this stuff quickly and effortlessly.

Image Reflection

adobe indesign cs5 image reflection technique

Detailed and customized input fields have been a great focus of modern web development. The jQuery library along with similar open source projects have provided a framework to build with. It has lead to numerous advances within the field of user interface design. Especially for customizing the typical “default” components in form elements.

In this tutorial I want to introduce the Selectize plugin for jQuery. It allows developers to greatly alter the presentation of input fields related to select menus and tag-formatted text fields. This can provide a tremendous benefit on projects where you need a cleaner, updated interface. It is a fairly straightforward process and shouldn’t take more than 60 minutes to create. Take a peek at my live demo to see what we are making.

jquery selectize custom select menus html5 demo

Looking at the HTML5 range input element you can see a number of advancements. Forms are able to take in restricted information from users sliding between number segments. But unfortunately these HTML5 inputs are only supported in modern browsers. So although there are a few limitations we can try to work around them.

I want to demonstrate how to build a more customized version of the range slider using jQuery UI. The slider widget is a part of the jQuery UI core library so it comes prepackaged with the script. This makes it really easy to play with because the documentation has been well-sourced and easy to consume. Check out the live copy of my sample demo to see what we are creating.

jquery ui sliders inputs form