Building Vertical-Tabbed Content Sections with jQuery

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

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

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

Swift Web Development Techniques for Startup Landing Pages

When launching a new startup online you need to consider the features which will draw attention. Visitors can often be easily distracted when browsing the Internet. So ask yourself what value does your page really offer to the average visitor? Developers should think about these topics from a user experience point-of-view. Then the process of constructing usable website layouts should be a whole lot simpler.

I want to use this article for sharing a few tips and techniques on building startup landing pages. The process is not easy and doesn’t provide any foolproof method. Interesting features will change based on the type of service or product you are selling. But I do not think these generic models are too overbearing after you work out the kinks fitted into each design.

Creating Semantic 2-Column and 3-Column CSS Layouts

Website layouts are not the most difficult part of coding a typical design. But unfortunately there are still not many standards set in stone for creating multiple column-based layouts. These are often put together through various CSS methods, but the most supported designs are using fluid width containers.

In this tutorial I want to look over a series of different CSS column layouts. We can see how to build websites using floats and direct positioning. Most common websites will utilize 2 or 3 columns at most, so that is what we’ll be focusing on. Along with these ideas you should feel comfortable trying out other CSS codes. There are new standards being written so frequently it can be difficult to gauge the best possible solution.

DeviantArt API Instant Search App using Ajax & PHP

The digital art community for DeviantArt is very popular and full of talented artists. Creative designers can publish any of their works to DA and share them to gather feedback and comments from other members. I love the community and have always been interested in digital artwork for online forums – avatars and signature banners.

So in this tutorial I want to explain how we can build a DeviantArt Instant Search app which searches through all the most popular banner signatures ever submitted to the website. You can enter some search terms and the app will pull results to display after you finish typing. This is a really cool application for designers who are looking for inspiration, or even for people who love DeviantArt and want a better way to search.

Preview screenshot DeviantArt Instant Search webapp forum signatures