Building Vertical-Tabbed Content Sections with jQuery

by Jake Rocheleau
on September 25, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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

Read More

Create a CSS/jQuery Image Rotator with Descriptions

by Jake Rocheleau
on September 2, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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

Read More

50 High-Quality Adobe InDesign Tutorials

by Steven Snell
on August 28, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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

Read More

How To Make a Custom HTML5 Select Menu with Selectize.js

by Jake Rocheleau
on August 22, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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

Read More
Page 3 of 2312345...Last »