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.
Create a CSS/jQuery Image Rotator with Descriptions
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.
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.
How To Build a Range Slider Input with jQuery UI
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.
Coding a Lazy-Load Website Interface using Unveil.js
There have been a number of recent open source plugins for lazing loading images. A popular choice is Unveil.js which was just recently published onto Github. It is meant to be a lightweight version of the original LazyLoad plugin built over jQuery. After testing out a number of different features I am a huge fan of Unveil.js.
Interface design is incredibly simple once you understand the basics. It will take some practice getting used to the code samples and writing your images properly. However the lazy load plugin can showcase tremendous support across all typical web browsers. Not to mention the popularity among users who are transferring data over slow Internet connections. The lazy load plugin will shave off latency times and still provides an exhilarating user experience.
Making Draggable Webpage Elements using jQuery
There are so many various plugins and scripts to use for making draggable elements. Some of them allow you to create upload forms or dynamically sorted webpage tables. However, what about just creating some very basic functionality to give users the ability for dragging items through the page? The jQuery UI Draggable feature has all of this and it is very simple to add into your website.
I want to demonstrate how using a very simple jQuery UI script will allow for any objects to be dragged along the page. Since this is all built into jQuery we have the ability to use callback functions, which are sort of like unique JS codes we write whenever a user drags or drops an item. There are so many different examples on the jQuery UI website that you should definitely go and check out. I am not using anything overly complex, but you can also see my live demo or download the source codes from the links below.
15 Useful JQuery Calendar and Date Picker Plugins
With JQuery Calendar and Date Pickers it is quite simple to add cool calendar features to nearly any website. You can directly incorporate these plugins into your website as they only require minor modifications and styling. JQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. Today we are featuring 15 Useful JQuery Calendar and date picker plugins. Enjoy!
1. Booking Calendar PRO
This item is ideal if you want to add information about bookings to your rentals website. The Back End is easy to use and can be easily integrated into your own CMS as the Front End can be easily integrated into your website. Both Back End and Front End can be customized separately, and the number of usages on your webpage or website is unlimited.
Building an Image Slideshow UI Switcher with jQuery
A lot of newer e-commerce websites and blog archives have started organizing listings in various formats. The interface will feature a set of icons to switch between different views, such as thumbnails or full details. It can be a pleasing design aesthetic for many typical webpages where you need to share a lot of content which can also be easily indexed.
For this tutorial I want to demonstrate how we can build a slideshow UI switcher for a set of photos. Users have the ability to flip forward and backwards in the photos list, or choose a specific image from the thumbnail view. I believe this interface can work with almost any type of slideshow webpage layout. And if you are running a dynamic CMS then you could build a page template which includes dynamic images inside the unordered list element.