Coding an Instant Login Form with jQuery and PHP/Ajax

by Jake Rocheleau
on August 31, 2011

in Tutorials

Login forms have been around for decades. In web design these are very common with so many social media interactions occurring on a daily basis. However the static web has gone by the wayside to make room for much more dynamic content. With popularity growing for the jQuery library it is only natural to see so many new effects being created.

In this brief tutorial I’m going to explain how to create an instant login form with jQuery and PHP. We won’t be accessing any database to keep things simplified for now. Instead I’ve hard coded a username/password combo just for the demonstration of this article. The form automatically begins checking after you type some information to see when you hit the correct user & password combination!

If you’d like to get a better idea check out the demo link below. I’ve also provided my source code free to download. The HTML web page will open and run jQuery properly but without a server running PHP the form cannot be processed. Keep this in mind when playing around with the source code.

Demo of Instant Login Form

Read More

21 Fresh Text Effect Tutorials

by Matthew Heidenreich
on July 31, 2011

in Tutorials

There are many different ways to express yourself through typography, and thankfully, we have Photoshop there to help us make it that much easier. In today’s post, I will share with you 21 fresh text effect tutorials for Photoshop to help spice up your next project.

Fantasy Spring Text Effect

Read More

Building an Elegant Tooltip Dropdown Menu Powered by jQuery

by Jake Rocheleau
on July 5, 2011

in Tutorials

Within the jQuery library it’s possible to create some fantastic effects. These can enhance the overall user experience dramatically and often work hand-in-hand with new CSS3 and HTML5 techniques. As the field of web design has evolved, prominent new techniques have evolved as well.

Below I’ve gone into depth over the process for creating a fantastic navigation menu with tooltips. Each is dynamically generated to hold a small bit of information about the currently targeted link. We’re working with the newest jQuery 1.6.x library and jQuery colortips from Tutorialzine.

There are three (3) major steps to breaking down our code. The first is raw HTML which displays our demo page mockup and how to implement a similar navigation system on your own website. Second we must utilize CSS styles to create our tooltip boxes and pointers. And lastly we must integrate with jQuery and the colortips library to figure out how we should call each tooltip.

demo of tooltip menu tutorial

Read More
Page 12 of 23« First...1011121314...Last »