JavaScript Archive

featured-sliding-carousel-screenshot

Build a Sliding Client Testimonials Carousel With jQuery

clients slider testimonial carousel tutorial screenshot

Many portfolio websites include a list of previous clients to build trust from other potential customers. Reading what other people have said about a service or product is one way to garner support from visitors who have never heard about your company before. (Of course, this design technique only works if you have previous clients to draw from!)

In this tutorial I want to demonstrate two distinct styles of rotating carousels. The first is a testimonial box which includes a small quote talking about the services. Then I’ve constructed a long horizontal carousel that rotates through a list of company logos. These would normally be companies you have done business with – but may also include corporate partners or resources.

January 15th, 2014 Posted in JavaScript
hover-animate-gif-image-gallery

How to Code a Hover-to-Animate GIF Image Gallery

tutorial screenshot animated gif hover gallery with jquery

Animated GIF images are popular on the Internet because they can be easily shared and consumed rather quickly. Using basic HTML you can embed images into a page which feature animation, without relying on any other technologies. Granted – there are plugins for animating sprites or backgrounds – but GIFs are a totally different concept.

In this tutorial I want to demonstrate how we can build an image gallery which optimizes the display of animated images. You can see a very similar feature on Giphy which is also where I downloaded the images for my demo. I am coding my own method which doesn’t exactly follow the same process as Giphy – but the end result is practically identical and works great for all modern browsers.

October 16th, 2013 Posted in JavaScript
progression-jquery-guided-form-preview

Build a Guided Registration Form With jQuery and Progression.js

tutorial screenshot progressionjs guided registration form

Signup forms are all too common when building new web applications or social networks. Traction from user signups can really boost your own self-confidence about a project when it comes to launching a new website. But what can you do to help improve the signup experience and hopefully gain more interested users?

In this tutorial I want to demonstrate how we can build a guided registration form, offering tips to users as they fill out each field. I have included some of my own custom jQuery along with a plugin called Progression.js. This is a powerful tool which offers a step-by-step tooltip using hints to direct users along the way. Feel free to download a copy of my source code and check out the live sample demo below.

October 10th, 2013 Posted in JavaScript
on-off-slider-jquery-preview-screenshot

Build an HTML5 Form With on-Off Input Sliders Using jQuery

tutorial on off sliders input jquery plugin

Mobile app interfaces have been utilizing on/off sliding switches for a while. These are most commonly found on the settings page where users can update preferences for their account. But web designers have taken notice and have built many open platforms to generate your own on/off switch sliders.

In this tutorial I want to look specifically at the jQuery Toggles plugin developed by Simon Tabor. It comes with 5 pre-designed UI themes which you can easily update. Plus, you have the option of triggering click or slide events, which may also tie into a form checkbox on the page. Anyone running a modern JavaScript-enabled browser should be able to experience the full effect. Take a peek at my live demo to catch a glimpse of what we are building.

September 25th, 2013 Posted in JavaScript
jquery-cookies-demo-screenshot

How to Easily Manage Cookies Within jQuery

tutorial screenshot cookies with jQuery howto

Web browsers can generate unique sessions organized for each user on a website. Often these are handled on the backend using languages like PHP or Ruby, but we can also utilize cookie sessions on the frontend with Javascript. There are many tutorials out there explaining how to generate pure JS cookies. But a newer library jQuery Cookie simplifies the whole process.

I want to explain how we can build a very simple authentication system using jQuery Cookies. The code is all handled on the frontend but you will need a live testing server to see any results. Browser cookies are created on the local IP which comes from the web server, and so unfortunately you can’t just run these scripts locally. But definitely check out my live demo to get an idea of what we are creating.

September 18th, 2013 Posted in JavaScript
featured-sliding-nav-preview-demo

Code a Single-Page Sliding Website Layout With Fixed Navigation

preview single page sliding navigation tutorial howto

When constructing a simple webpage, it can often make sense to fit the content into a single layout rather than multiple pages. These single-page websites are beneficial when you have a small project or portfolio which needs some online presence. If you split up content into neat sections, then visitors might use a small sliding navigation to quickly advance along the page.

In this tutorial I want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time. But I want to show how we can make this effect using only jQuery and the scrollTo plugin for optimized performance. Check out my live sample demo to catch a glimpse of what we will be making.

September 4th, 2013 Posted in JavaScript
remote-imgur-api-upload

How to Build a Dynamic Imgur Upload App Using jQuery & PHP

preview tutorial imgur mirror upload jquery php

Many new online web services are providing backend APIs for developers. These allow anyone to connect into a web app and pull out specific information (or push or change bits of data). Today we’re specifically looking at the API for Imgur.

In this tutorial I want to demonstrate how we can remotely mirror an image found elsewhere online and auto-upload to Imgur. It’s possible to create a form handling user-uploaded images as well. But I wanted to keep the demo clean without needing to move user content onto the server. This process is very simple once you understand how APIs work. Take a peek at my live demo to see exactly what we will be making, then follow along!

August 29th, 2013 Posted in JavaScript, PHP
thetips-10

25 Useful Resources for Creating Tooltips With JavaScript or CSS

screenshot

Tooltips are awesome, there’s simply no denying it. They provide a simple, predictable and straightforward way to provide your users with useful, context-sensitive information, and they look cool to boot.

We all agree on how great tooltips are, but how we go about implementing them can differ dramatically. If you’re at square one, looking for some tooltip ideas for your current project, you’ve come to the right place. We’ve got a whopping twenty-five different options that fall into two categories: JavaScript and CSS. No matter which method you’re looking to use, we’ve got the best techniques available, which you might want to enhance using OOP class techniques like JavaScript classes.

August 23rd, 2013 Posted in JavaScript
featured-image-rss-jquery-reader

Build an Automated RSS Feed List With jQuery

preview tutorial rss feed reader jquery google api

The typical process of creating a dynamic feed listing requires some type of backend language. Obviously this can work out fine if you are familiar with Rails or PHP, but I want to present a method for pulling RSS feeds via jQuery. The problem is accessing Ajax requests from an external server and then converting this XML information to something a bit easier to read.

We will be focusing on the Google Feed API which is a lot easier than it looks. There are a number of custom possibilities to play with the options and access other alternative themes. All we need to pull is the first page of the feed item results, along with each title and the URL link. Once you have this script working it is very easy to customize the layout and even include a bit of content from the feed! Check out my sample demo below to get an idea of what we will be creating.

August 13th, 2013 Posted in JavaScript
Create a Simple jQuery Image Lightbox Gallery

Create a Simple jQuery Image Lightbox Gallery

css3 blog thumbnail gallery lightbox effect

When building your own WordPress theme, there are a number of items to consider. One such page element is a dynamic image gallery, either using a lightbox or some type of sliding panel. Both of these user interfaces mesh nicely into the content of an article. Since they can both work on typical websites it is nice to have the code ready for use in any other blog theme.

For this tutorial I want to focus on using the lightbox effect with a plugin called jQuery lightBox. This is very easy to setup and get customized on your own website. Granted there are a few awkward fixes within the CSS, but overall the plugin works perfectly. There are even some alternate parameters where you can specify properties like the animation speed or background opacity.

July 24th, 2013 Posted in JavaScript
Subscribe
Membership