JavaScript Archive

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
featured-preview-paged-tutorial-document-viewer

Coding an Ajax-Style Paged Document Viewer With jQuery

featured photo document viewer ajax jquery tutorial preview

Recently, I’ve have seen a number of websites using this JavaScript-powered paged document interface. Users are presented a multi-page document set starting on the first page, and they have the ability to switch between pages dynamically. This can be a much better solution than linking directly to a PDF document. Or this may even be an alternative where you have a PDF download link, plus the embedded document images for easy access.

In this tutorial I want to demonstrate how we can build a small script which handles any set number of documents. The JS code is a little bit tricky since we need to adapt for a large number of pages. However it is not very difficult to customize and get the design looking exactly as you would need it! Check out my sample demo below to get an idea of what we will be creating.

July 15th, 2013 Posted in JavaScript
jquery-autocomplete-suggestions-keywords

Create a Simple Autocomplete With HTML5 & jQuery

featured preview jquery css3 autosuggest search keywords

A quick Google search will yield plenty of handy autocomplete plugins — there’s even an option shared by jQuery UI which comes bundled with the library. However today I want to look into an alternative solution. The jQuery Autocomplete plugin released by DevBridge has the exact functionality that I find most appealing.

The styles will automatically highlight words as you are typing, and results appear in the dropdown menu at the bottom. This tutorial is a brief introduction to using the plugin by loading content from a JavaScript array. It is possible to load Ajax content from a backend file or from content out of the database, however for this tutorial it is easier to work with local data. Check out my sample demo to get an idea of what we are trying to build.

June 17th, 2013 Posted in JavaScript
Create a Modal Window Login Form Effect Using jQuery

Create a Modal Window Login Form Effect Using jQuery

featured preview login modal window jquery plugin tutorial

The hidden modal window technique is a great solution for dealing with interface elements which are not particularly necessary on the page. Social networks can use modal windows for private messages and forms which are only being used by members of the site. This is also true for blogs and magazines which have an author login page separate from the main website. Modal windows are much easier than creating new windows in JavaScript because everything is displayed in the same window using HTML markup already on the page.

I want to demonstrate how we can build a custom modal window based off the jQuery plugin leanModal. The plugin is completely open source & free to use under the MIT general license. I like this plugin more than others because it just gives us the “bare basics” without too much customization. This leaves room to update the modal window via CSS and still utilize some extra parameters in jQuery.

June 3rd, 2013 Posted in JavaScript
jqplugs-f

40 Awesome jQuery Plugins You Need to Check Out

screenshot

The jQuery developer community has to be one of the most generous and hardworking group of people on the web. They’re constantly churning out amazingly useful and completely free tools that they share with anyone and everyone who wants to use them.

The quantity and quality of free jQuery plugins simply never ceases to amaze me. I’ve been keeping a list of some great ones that I’ve found lately and I thought I’d share it with you. Here are 40 awesome and free jQuery plugins that just about every web developer should check out.

May 10th, 2013 Posted in JavaScript
featured-mobile-responsive-sliding-menu

How to Build a Responsive Slide-Down Navigation Menu

featured preview jquery sliding toggle menu nav

After a long period of researching mobile responsive layouts, I’m spent quite a bit of time experimenting with various UI designs. One major hotspot on the page is often the website’s main navigation. Users want quick access to your content pages — and this will always be the case, either on a full monitor or a smaller mobile responsive screen.

For this tutorial I want to demonstrate how we can use a combination of CSS3 media queries along with some jQuery to manage a sliding navigation menu. The links will appear as normal on the frontend but drop into a hidden menu after resizing below 600px. Instead we see a little menu pull-down icon which will toggle open and closed on command.

May 1st, 2013 Posted in CSS, JavaScript
Simple Steps for Creating a Fixed Navigation Bar

Simple Steps for Creating a Fixed Navigation Bar

featured-image-scrolling-navbar-navigation

When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process. This often requires a quick-to-access menu or dropdown area for pulling links to other webpages.

In this tutorial I’m going to be building a top navigation bar which appears only after moving beyond the header navigation. This effect is great if you have a few pages which are most commonly accessed by visitors. The sticky navbar will stay fixed at the top of the screen and only disappear when re-entering the header nav zone. To get an idea of what we will be making check out my live demo example after the jump!

March 20th, 2013 Posted in JavaScript
jqtype-0

20 Fantastic jQuery Web Type Plugins

screenshot

In recent years, web typography has gone from an embarrassment to a point of pride. From CSS to JavaScript, we’re gaining great tools almost daily that help us implement awesome type.

Today we’re going to look at the best jQuery plugins around that are specially built to make web type more awesome. Download a few and take your type further.

December 10th, 2012 Posted in JavaScript
mtplugins-f

40 Awesome MooTools Plugins You Need to Check Out

screenshot

Recently, we published an outstanding collection of 40 jQuery plugins that every developer should check out. Today we’re following that up with some love for the MooTools crowd.

Like jQuery, MooTools has an awesome community of developers that constantly churn out stellar free plugins for all types of tasks and interfaces. In this collection you’ll find plugins for sliders, lightboxes, tags, navigation and a lot more.

October 2nd, 2012 Posted in JavaScript
mindblowingportfolio-f

Developing a Mind-Blowing Personal Portfolio in 3 Weeks

screenshot

So you decided you are going to design and develop yourself a personal portfolio. That’s great! You are well ahead of half of the web design and development community. But what about the remaining 50%? You have to show exclusive skills in a tiny space in order to shine in this fast growing industry.

In the past 3 weeks – since I made that decision, I learned a lot about developing a unique portfolio. Now I feel it is time to share this newly acquired knowledge with you.

What I came up after those 3 weeks is a cool game-inspired portfolio.

June 15th, 2012 Posted in JavaScript
Subscribe
Membership