Advertise here with BSA

App development for iPhone and iPod Touch has become a booming industry. Designers from all over the world are jumping at the chance to have their ideas published into the App Store. It’s no surprise more tech enthusiasts are moving onto Apple devices.

It can be tough to build an entire app from scratch and Xcode menus don’t make things easier. In this tutorial I’m hoping to introduce some bare-bones essential ideas for customizing an application’s top navigation bar. There is a bit of Objective-C code required but it shouldn’t be too overwhelming. It’s also worth noting that you will need a computer running Mac OS X in order to install Xcode and compile these apps in the first place.

Download Source Code

Getting Started

So without too much delay let’s pop open Xcode! From the main menu create a new project and a series of windows will appear. First you select the application template – I’ve chosen Master-Detail Application since this already includes a navigation controller.

When building iPhone apps you want to focus on your core functionality and build off the components already available. It’s pointless to reinvent the wheel and it just requires more of your time. So now hit Next and you’ll be prompted to give this project a name.

I set the name customNavBar with a company identifier of designmag. The identifier will not affect your application at runtime. It’s more like metadata to keep track of which applications are published under which developer or studio. If you are building for iOS5 make sure Automatic Reference Counting is checked as well as Storyboards.

Hit next, save your new project and we are good to go. Let’s start out simple by customizing the navigation bar’s color setting.

Custom Tint Colors

In Xcode the left pane window contains all your project files. Inside should be a set of MasterViewController .h/.m files. These stand for header and implementation codes which are used to build custom classes.

You don’t need to understand this concept just yet as it’s geared more towards software developers. But we will be working within these classes so it’s good to recognize their purpose. Click once on MasterViewController.m and the source code will appear in your center window.

Now scan the document for a function labeled viewDidLoad. This is a default method called on every view once the page first loads. Here’s a bit of the syntax:

- (void)viewDidLoad
{
// code here
}


Inside the curly braces we want to place a line of code which updates the navigation bar’s tint color. This value can be set using RGB which I’ll explain in the next part. But to keep things simple for now we’ll use the colorRed keyword afforded to us within Cocoa Touch. Here’s the code I’m using inside viewDidLoad:

[super viewDidLoad];
[self.navigationController.navigationBar setTintColor:[UIColor redColor]];

self.navigationController.title = @"Custom Nav";


Working the Navigation Controller

You’ll notice that Objective-C 2.0 has adopted a dot-syntax similar to JavaScript. You aren’t expected to fully understand the code above – it’s especially deterring to newbies who have never used Xcode before. But when I’m calling self.navigationController.navigationBar it’s a target to the internal nav bar inside our controller.

Then the setTintColor method will change the styles of all buttons and elements inside the navigation bar. You may also notice I’ve set the navigation controller’s title property. This is just a plain string of text which appears at the top of your page view.

Build and run the application with CMD+R or click the play button in the top left corner. This will open the iOS Simulator so you can catch a glimpse of how the app will function on a mobile screen. This method works and it’s a great place to start.

However I want to include just a bit more code so that we can use a custom image as the navigation background instead. Quit the simulator for now and let’s pop back into Xcode.

Creating BG Graphics

To save a bit of time I’ve already put together the background images in Photoshop. I’m using a similar design pattern as this indigo nav bar created originally by Jonathan Mulkey. He is a very talented app designer based out of Tennessee.

It’s worth mentioning that we need to create two(2) different image files for the background. Regular iPhone 3/3GS users are on the standard 320×480 pixel grid. However the iPhone 4/4S uses a 640×960 grid fitted into the same physical screen size. This means 1 point = 2 pixels and our images will look much more crisp.

• CustomNavBG.png (320x44px)
• CustomNavBG@2x.png (640x88px)

iOS dev guidelines require that both images are saved under the same name with the larger retina image title appending “@2x” on the end. In our code we will only reference CustomNavBG.png. The Cocoa framework is smart enough to detect when a user is on a retina device and will automatically fill the @2x version instead.

Implementing the Background

The fastest and most proper way to accomplish a custom navigation background is to build a new UINavigationBar subclass. I know this sounds a bit confusing but it’s really a lot simpler than you think.

Right-click(or control+click) on your project in the left pane and select New File. We want an Objective-C Class with a subclass of UINavigationBar. If this isn’t offered in the dropdown menu just manually type it in. You can name this class whatever you’d like – I chose CustomNavBar. Hit “Next” and you’ll end up with a new set of .h/.m files in your project.

All we want to do is overwrite a method named drawRect. This is used to create the original background gradient for any default navigation bar. I’ve added my code below for both of the .h and .m files. It should work perfectly if you copy/paste into your own assuming you are using the same class name.

# CustomNavBar.h codes
@interface CustomNavBar : UINavigationBar

@end


Save any changes in both of these files and then click onto your MainStoryboard.storyboard. This contains all the different views within the application. At the very far left is a Navigation Controller and this is what we’re targeting. Click on the top blue bar and open your Identity Inspector(View -> Utilities -> Show Identity Inspector). This should appear in the right-hand window pane.

Within this new window you should see a class setting with the value UINavigationBar. You want to change this to CustomNavBar or whatever you named your class files in the previous step. Now the navigation bar is pulling from our custom code instead of the default iOS bar.

Build & Run!

If you run the application now you’ll notice our top nav bar is pulling in the background image. Success! But the only problem is when you tap on the table cell it loads a new view which uses a back button. This back button is still colored by the red tint we were using earlier.

Luckily this is a simple fix. We just need to match a purple/grey color from the background image and use this as our new tint. Click back into MasterViewController.m and find the previous code inside viewDidLoad. I’ve taken the liberty of grabbing an RGB value which fits this background color and set each to different variables. Below is my new tint code:

NSInteger red = 95;
NSInteger green = 100;
NSInteger blue = 130;

[self.navigationController.navigationBar setTintColor:[UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:1.0]];


We place each color value over the max of 255 and this returns a floating integer. Strictly speaking this is the easiest way to convert RGB from Photoshop into a color in Objective-C. Save and run the project again and you should see much nicer results.

Download Source Code

Conclusion

If you’ve having any trouble be sure to download my demo source code for this project. I’m using Xcode 4.2 with iOS5 which may not convert perfectly down to older versions. But for beginner iOS developers this tutorial should give you a bit of insight into building and customizing your own apps. It’s a truly challenging skill to master yet very rewarding in the long term.

Advertise here with BSA

Advertise here with BSA

In this roundup we have collected 45 outstanding Photoshop tutorials released in 2011. If you like these photoshop tutorials you might also want to check out some of our previous posts below. Enjoy!

35 Amazing Photo Effect Photoshop Tutorials

30 Awesome Photoshop Text Effect Tutorials

Create a Powerful Human Disintegration Effect in Photoshop

Create a Futuristic Bicycle Icon in Photoshop

Design a Detailed Audio Receiver Icon in Photoshop

Create a Medieval Landscape in Photoshop

Character Design for the Boomrock Saints

Create “Cool” Typography Using Paths in Photoshop

How to Create Cityscape Concept Art

Use Photoshop to Create a Still-Life Lamp, Nightstand, and Picture Frame

Design a Conceptual Album Cover in Photoshop

How to Make a Textured 3D Spray Can

Mockup Blister Packaging in Photoshop

Undress a Giraffe in Photoshop

How to Create Dramatic Sci-Fi Photo Manipulation in Photoshop

How to Create an Out of This World, Medieval-Fantasy Themed Photo Manipulation

Create a Fictional Arctic Snow Frog in Photoshop

How to Create Feet Shoes in Photoshop

Create an Intense “Wings of Fire” Photo Manipulation

Design a Retro Typography Poster in Photoshop

Create an Explosive Flaming Poker Card in Photoshop

How to Make Your Photos Look Hipster with Photoshop

How to Develop a Handmade Illustration with Photoshop

Design a Vintage Baseball Card in Photoshop

How to Draw a Classic Electric Guitar in Photoshop

Create a Detailed Vintage TV from Scratch in Photoshop

Design a Retro Postcard with 3D Text

How to Create a Vintage Circus Poster with the Photoshop Puppet Warp Tool

Make a Retro Space Themed Poster in Photoshop

Making a Superhero Movie Teaser Poster

Create an Ice Cream Type Treatment in Photoshop

Nike Hair in Photoshop

Flaming Car in Photoshop by Lincoln Soares

Easy 3D Globe in Photoshop

Captain America Shield in Photoshop

Awesome Amp Controls in Photoshop

Dark Knight Rises Poster in Photoshop

Design a Vintage Style Swissair Travel Poster In Photoshop

“Piece of the Artic” Pie Chart Photo Manipulation

ERODED FASHION PORTRAITS

CREATE SUPER PSYCHEDELIC ARTWORK

PAINT A MULTILAYERED SURREAL PORTRAIT

GIVE A PORTRAIT A COSMIC MAKEOVER

Create a Realistic Blueprint Image From a 3D Object

TYPE THAT’S FIT TO EAT

Vintage Typography Tutorial using Ornamental Styles

Manipulate a Dancer Illustration in Photoshop

Advertise here with BSA

Advertise here with BSA

Targeting unique CSS styles is a simple process based around media queries. Web designers have been using these techniques for years to much success. Yet in just a short couple of years recently stylesheets have grown in tremendous popularity. Now more than ever it’s important to offer not only mobile but print layouts for your visitors.

I’ve put together this small guide for beginners to quickly craft a print-based design. There are standard concepts and layout techniques you should utilize for quicker loading speeds. You also need to be conscious of page length when the design is printed on paper.

Web v. Print Design

We should start off taking a quick look into both areas. These are two completely different design studies which are frequently secluded from each other. But printers are much more common in the everyday household – so it’s not strange for your visitors to expect pages to print nicely.

Unfortunately you are working with much less space on a plain white sheet of paper. This means oftentimes your layout will contort in very strange ways. You’ll have to be considerate of dynamic content including image galleries, content sliders, tabbed divs, and so forth. You almost need to build a mobile-based template but with even less functionality! Visitors won’t need any of it on the printed layout anyways.

But this doesn’t intrinsically mean you should remove all other media from the page. My recommendation is to keep images within the main content, plus your logo, but remove them elsewhere deemed a distraction. It’s best to remove entire areas of your layout which don’t serve a purpose in print – such as sidebar(s) or an extended footer.

Plain White Backgrounds

This is a crucial topic to mention right from the start. Nobody enjoys wasting their ink, and colored backgrounds in your page will do just that. Make sure you remove all repeating images, background textures, and preferably all solid color BGs as well. Even printing in black and white can make content difficult to read with a multi-colored background.

Obviously the solution is plain white, which will work the best in practically every situation. If you have trouble overwriting the default styles include !important declarations into your print CSS code. Also use this if needed to ensure all text is dark enough to read. Keeping everything plain and simple is generally the best strategy.

Identify the Key Elements

Ponder a bit and consider why your visitors would even be printing out your web pages. Would it be for reading material, or maybe part of an image gallery? This is important since you’ll want to manipulate your layout in such a strategic way.

As an example you may have a sidebar which only holds a small navigation menu, ads, and a signup form. None of these elements are helpful to the printed version of your content – so why not hide the sidebar altogether? Using the CSS display: none; property you can totally remove certain aspects of your page. Similarly you could widen the main content area so text will fill up more space, thus printing out less pages.

For some websites it may be too much work to recreate an entire stylesheet from scratch. This is especially true if you visitors wouldn’t mind keeping the same layout in printed form with just a few minor changes. For this task you can incorporate CSS media queries which target print devices only.

Stand-Out Links

Hyperlinks will surely be sprinkled all about your documents. These aren’t entirely important in printed context, but you should keep them distinguished just in case people re-visit your website looking for more reading. You could stick with the standard blue/purple colors which also appear great in black & white print.

Believe it or not we can also manipulate direct hyperlink URLs right into the page using CSS2+ properties in compliant browsers. A List Apart provides some good code examples of this even using relative URL schemes(ie. /articles/2011/mypost.html).

body a:link:after, body a:visited:after {
content: " (" attr(href) ") ";
font-size: 10%;
}


This will insert both parentheses in quotation marks and the href value directly after the hyperlink text. It’s a great way to provide printer-friendly support for links on your website. Note that for this to work properly you should be using full URLs which include the root domain of your site.

Using CSS Media

To first clarify there is a difference between the @media query and the HTML media attribute. Both of these delineate between printed CSS code, but @media is included within the document itself.

<link rel="alternate stylesheet" href="css/print.css" type="text/css" media="print" />

In the example above we’re looking at an alternative stylesheet which you would include into your document header. The media attribute means these styles will only be applied when the page goes through a print action. So you won’t actually be able to test these without printing a live copy. But how else could you check the results realistically?

<style type="text/css">
@import url("css/print.css") print;
</style>

If you’re trying to keep print styles running in modern browsers you could also use the @import statement. This is just another alternate way of including print-specific code. But you won’t be mixing up alternate stylesheets as this bit of code is overlooked in legacy browsers.

Otherwise CSS Media is definitely an option, albeit targeted towards thinner stylesheets. These media queries can be included directly into your default stylesheet – so it’s best to keep them below 15-20 lines of code. The difference is how properties would cascade depending on which document you’re using. Some styles may overwrite your new rules or ignore them altogether. In general it’s best to keep these two document styles separate whenever possible.

Direct Page Margins

There is one more technique which doesn’t appear in too many CSS resources. Using the @page method along with a class of selectors you can apply new printed margins on the outside of your content. I’ve included the basic code syntax below:

@page selector {
margin: 0.5in;
}


The selector code is optional and can use either :first, :left, or :right to target the first page only, or the left/right margins on all pages respectively. In my example above we’re using the standard margin property to expand on all sides by half an inch. You could also use centimeters(cm) if the units fit your layout better.

If you want to check out some further reading I highly recommend WebDesigner Depot’s post from back in 2010. It includes a lot of reference guides and great tactics for using page margins by default. These properties aren’t exactly “beginner” material, but the information is easy to pickup and with practice you’ll retain the knowledge very quickly.

Conclusion

Regardless of how you include the styles or what changes you makes on the page, having any type of print stylesheet is better than nothing at all. It offers your visitors an easy way of taking your content portable without the need for a mobile device. And since CSS makes it so easy the entire conversion process can be completed in an afternoon. If you have similar ideas for print-based CSS styles please share with us in the discussion area below.

Advertise here with BSA

Advertise here with BSA

In this roundup we have collected 44 outstanding photoshop tutorials. Enjoy these over your holiday!

Design a creative portfolio in Photoshop

How to create a colorful business web layout

Create A Detailed Solid Dark Layout In Photoshop

How to create a One-Page Website Design in Adobe Photoshop

Design a Drupal Business Theme in Photoshop

Create a Clean Magazine & Blog Theme

Design And Develop A Complete Website

ShutterPress: Design & Code A Photo Portfolio

Design a Sleek, Dark Mobile App Website 

Create a Sleek, Corporate Web Design

Design a Fresh Web Service / SaaS Website Interface
 

Learn How To Create A Mobile App’s Style Layout

Corporate & Portfolio Style WordPress Layout

Learn To Create A Gaming Layout In Photoshop

How To Create a Blog Theme Concept in Photoshop

Sleek Portfolio Layout

Learn To Create A Clean Style Portfolio Layout

Create a Modern Lab Theme Web Design in Photoshop

Design a Grungy Newspaper Web Layout in Photoshop

Creating a Clean Furniture Website and Gallery Layout in Photoshop

GD-Gaming: Create a Simple Gaming Layout in Photoshop

Create A Dark, Clean Website Design In Adobe Photoshop

Create a Comic Book Themed Web Design

Design An Innovative Portfolio Site Using Alternative UI/UX

Create A Wickedly Cool Horizontally Oriented Website Design

Create a Clean and Minimal Portfolio Design 

Create an Illustrative Single Page Web Design With Photoshop

Design a Professional, Clean Community Blog Theme in Adobe Photoshop

The Making of CoffeeAddict: An Illustrative Wood Design 

Create a Minimal WordPress Theme in Photoshop

Learn How To Create Modern Dark WordPress Layout In Photoshop

How To Create a Sleek Grid Based Website Design

How to create a vintage Photoshop file

Create an Elegant Patterned Web Design in Photoshop

Create a Clean, Minimal Website Design in Photoshop

Design a Cool Pixelated Website Layout

Create a Light Textured Web Design in Photoshop

Design a Clean Corporate Website Layout

Create a Professional App Store Web Layout

Create An Amazing Personal Website From Scratch Using Photoshop

Learn How To Create A Web Gallery Style Layout

How to Create a Professional Web Layout in Photoshop

Design a Textured Outdoors Website in Photoshop

Create a Portfolio Web Layout in Photoshop

Advertise here with BSA

Advertise here with BSA

I am a particular fan of the jQuery UI library and have been following the team since it’s release. It features dozens of examples of how to pull together the best animations from such a small library of code. However in a lot of websites these days we are seeking to limit dynamic JavaScript blocks. As such CSS3 has become an important staple with building dialog boxes.

In this short tutorial I’d like to go over the process of building a simple fade-in dialog box. This may contain a signup/login form, input buttons, or even just a message to your visitors. The technique is pristine and gaining adoption in the sphere of web developers everywhere.

Live Demo – Download

Setting the Stage

Your first step is to hit the jQuery website and check on their latest version. As of this writing it’s 1.7.1 stable release. If you wish to include animated effects from the jQuery UI library you may include this script as well. But your functional code will become much more convoluted with this extra pressure.

Now to save time let’s work off a bit of code from an earlier tutorial published in 2008. yens design has a fantastic bit of code written in jQuery which behaves as a popup box. To get a hold of their demo just download the rar package which includes the popup.js file.

Building our first HTML

Since the earlier tutorial was written a few years ago I feel we should work with only the important, up-to-date code bits. Thus I’ve created a brand new HTML document index.html and included my basic HTML5 boilerplate template.

This includes the doctype declaration and our starting scripts. The stylesheet style.css will include both the properties for our popup and for some of the new page edits. Check out my beginner’s template code below.

[cc lang="css"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Dialog Box with Animation</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="popup.js"></script>
</head>

<body>
</body>
</html>
[/cc]

Both the jQuery standard and UI libraries can be pulled directly from Google’s CDN. It has never been down for me, and I always rely on their hosted code for project files. Now that we have a page template setup I’d like to introduce a bit of the body content. I’ve included just this portion again for ease of access.

Inside the Popup

[cc lang="html]

[/cc]

Inside the wrap div we’ve got all our main elements from within the tutorial. The displaypopup button could theoretically hold any item – anchor link, heading text, or even a replacement image. Ultimately jQuery is looking for the ID “displaypopup” to match and trigger a bind-click event handler.

All the content inside myPopup will be displayed within this new box. Inside our CSS rules we also set the default height, width, background, and similar properties of this box. Outside the backgroundPopup is used to differentiate between these 2 areas. If you noticed, our script will actually close down the window if you click anywhere else in the background! Pretty neat effect and very influential towards user experience.

So now let’s jump over and take a quick peek at some of our CSS styles. A lot has been kept similar to Adrian’s code in his previous tutorial. Yet we are using a bit of flair around the box to appear more animated.

Styling with CSS

First check out the page structure I’ve used for each core element. The Asterisk (*) selector is handy as an overall reset to browser defaults. Thus we remove all generic margins, padding, and inherit the default line-height appropriate to each font style.

[cc lang="css]* {
margin: 0;
padding: 0;
line-height: inherit;
}
body {
background: #fff;
line-height: 1;
font-size: 12px;
font-family: Arial, Tahoma, sans-serif;
margin: 0;
height: 100%;
}

#wrap {
width: 600px;
background: #ddeef8;
margin: 0 auto;
margin-top: 55px;
padding: 14px 19px;
}
[/cc]

Also pick up how the body selector uses height: 101%; so the page loads by default displaying a scrollbar. This is important because even if your page content isn’t long enough to create one, a scrollbar will appear in some instances when your popup first opens. This bug has mostly been reserved to IE and Safari but it fixes other possible issues as well.

[cc lang="css"]#backgroundPopup{
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000;
border: 1px solid #cecece;
z-index: 1;
}

#myPopup {
display: none;
position: fixed;
height: 300px;
width: 408px;
background: #fbfbfb;
border: 2px solid #cecece;
z-index: 2;
padding: 14px;
font-size: 14px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#myPopup h1{
text-align: left;
color: #6fa5fd;
font-size: 22px;
line-height: 28px;
font-weight: bold;
border-bottom: 1px dotted #D3D3D3;
padding-bottom: 2px;
margin-bottom: 20px;
}

#popupClose{
font-size: 16px;
line-height: 14px;
right: 6px;
top: 4px;
position: absolute;
color: #6fa5fd;
font-weight: bold;
display: block;
}
[/cc]

Now we have some of the juicier details pertaining with CSS3 properties out of the way. The backgroundPopup has an important role set to a black background color. Notice that we actually reduce the opacity with jQuery instead of CSS3, that way we’ve got more control over the animation. However I am noticing designers picking up CSS3 transitions which may eventually overtake this technique.

Inside the myPopup content box is all the heading text/closing link shown earlier. Additionally I’ve increased the border size to stand out as more significant in comparison with the deep background. Some real simple rounded corners in CSS3 makes the dialog feel less rigid than standard square corners.

Digging the jQuery Functions

If you’ve looked into the popup.js file at all you should notice a couple of things. Namely Adrian(the original developer) has created numerous functions which will save us time in the long run. With a few variables you can actually control the speed of the animation and how long the fade-in effect will take.

[cc lang="javascript"]function loadPopup(){
if(popupStatus==0){
$(“#backgroundPopup”).css({
“opacity”: “0.7″
});
$(“#backgroundPopup”).fadeIn(“slow”);
$(“#myPopup”).fadeIn(“slow”);
popupStatus = 1;
}
}

function disablePopup(){
if(popupStatus==1){
$(“#backgroundPopup”).fadeOut(“slow”);
$(“#myPopup”).fadeOut(“slow”);
popupStatus = 0;
}
}
[/cc]

These two bits of code above are your action commands. loadPopup is the generic function call required to open a new popup window, while disablePopup will do just the opposite and close a currently opened window. Since these are written as functions within the scope of this tutorial we’ve targeted each specific ID name. But you can create a more versatile setup with variable parameters hard-coded into each function call.

We have a bit more code afterwards which helps to grab the browser height/width and adjust the window centered on the screen. But the final function calls a document.ready() clause which opens directly on page load. Check out my example edits from Adrian’s original code below:

[cc lang="javascript"]$(document).ready(function(){
$(“#displaypopup”).click(function(){
centerPopup();
loadPopup();
});

$(“#popupClose”).click(function(){
disablePopup();
});
$(“#backgroundPopup”).click(function(){
disablePopup(); // clicked on the background
});
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
// pressed the esc key
}
});
});
[/cc]

We attribute a few click event handlers which each call a different function. If the user clicks anywhere outside of the window, presses the ESC key or clicks the small “x” link then the window will fade out to close. This also resets the popupStatus variable to 0, which you may call upon at any point during the script to check if the user can see the window or not.

Live Demo – Download

Conclusion

I want to give a big thanks to Adrian Mato Gondelle who originally setup such a fantastic demo. I’ve incorporated his script in here as both a means to save time and stress messing with new jQuery functions. The code is open enough where you can pick apart each feature and re-implement it in an entirely different aspect, so why re-invent the wheel? And with so much browser support you can expect much more positive feedback from your visitors.

Advertise here with BSA

Advertise here with BSA

I’m sure those of you familiar with WordPress blogs have seen the many author box designs. Most of the popular web design and social media magazines feature some type of author display box towards the bottom of each post. This features the author name, avatar, and generally a short bio along with profile links.

WordPress users who are up to date with the latest 3.2.x release can easily implement this feature via custom plugins to extend WP functionality. But I want to explain how you can custom-code your own author box! I feel this method gives you more control over the layout and you can manipulate the HTML/CSS much further than with plugin codes.

The Case Study Details

For this particular tutorial I’ll be referencing the work done on DesignMag’s template. If you check out the bottom of each post you should notice a new author box design implemented just towards the last week in October.

I have included the author name and avatar along with some generic WordPress functions. Using some WP easter eggs I also created a smaller label which tallies the total articles each author has written and links to their personal author page. I advise using something similar to this if only to give each author some more spotlight in search engines.

There are also some other additions we could include, such as a custom Facebook or Twitter URL outside of the bio. But without overly-complicating things let’s focus on building a similar product as seen in our webpage design.

Static HTML Code

To start off let’s focus solely on building the framework for our author box. If it helps save an HTML template of a single blog post from your website to work with, like a development sandbox. In this way you don’t need to mess around with the WordPress theme files(yet) and no need to worry about PHP code, either.

[cc lang="html"]

[/cc]

Since the HTML block is rather small I’ve broken it into 2 segments. Hopefully in this way it’ll be easier to explain each part. In the above portion the ID #post-author-box is used as an overall wrapper to add an outer border effect onto the whole box itself. I’m also going to use some padding so the internal elements are spaced away from the edge border.

The inner div only contains two(2) classes silkwrapper and clearfix. The silkwrapper is mainly a covering class to style and contain all internal content. Since the layout is split into 2 columns I also included a clearfix so the float behavior doesn’t bug out in older browsers. Now inside of this div I’m using two HTML5 section elements for the left and right area, respectively.

[cc lang="html"]

Author: Authors Name

Articles: Total of 999 posts

Real simple basic information here. Pull directly from the WordPress backend.

[/cc]

#post-author-image is the ID set to our first section. This floats to the left side and houses only our author avatar image. WordPress directly ties into Gravatar so your authors may not even need to edit their image by default. Alternatively #post-author-box-content also floats left but each section is given a specific width to limit run-off from the inner content.

Styles and CSS Properties

We actually don’t need to apply a whole lot of CSS rules here. Most of them you should be familiar with but I’ll cover any new or possibly confusing areas in the code.

[cc lang="css"]#post-author-box { display: block; padding: 4px; margin-top: 15px; border: 1px solid #e0dfde; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; margin-bottom: 35px; }
#post-author-box .silkwrapper { background: #eeeeee; padding: 9px 11px; }
[/cc]

The #post-author-box uses CSS3 border radius properties for rounded corners within the external border. I’m using all the standard properties for -webkit, -moz(Mozilla), -o(Opera), -ms(Internet Explorer 9+) and the regular border-radius. The silkwrapper class has a slightly darker background to stand out among the plain white page content.

[cc lang="css"]#post-author-box-content { display: block; float: left; height: auto; position: relative; width: 440px; padding-top: 9px; }
#post-author-box-content h2 { display: block; font: 1.4em/1.0em bold “Trebuchet MS”, Arial, sans-serif; color: #4d4d4d; text-shadow: 0px 1px 1px #fff; margin: 0 !important; padding-bottom: 8px; }
#post-author-box-content h2 span { color: #275081; }
[/cc]

The box content includes an H2 and H3 element for the author name and total posts listing. I am using another CSS3 property text-shadow to add a unique effect into the top content, similar to Apple’s chrome letter styles. The author’s name is wrapped in a <span> tag which gives this text a particular shade of dark blue, jumping out from the rest of our content.

Designing the Avatar Image

This last bit of CSS isn’t particularly confusing, although it can be frustrating when you go to implement this code into WordPress. The PHP functions required to pull avatar images do not let you add another class or ID into the element. This means you cannot target the image directly without housing it inside another wrapper. Check out my styles below:

[cc lang="css"]#post-author-image { display: block; float: left; width: 155px; }
#post-author-image img { background: #f3f3f3; padding: 3px; border: 4px solid #dddbd7; }
[/cc]

The #post-author-image section is limited at 155px in width. Gravatar maxes out at 256×256 height and width for any image. We’ll be pulling the avatar at exactly half these dimensions (128×128) so 155px leaves breathing room between the right content area.

Also I’m using both a background with padding and a border for a fancier display. The padding is 3px all the way around so our background appears to come out 3 pixels on each side. The border is 4 pixels wide which also expands evenly on each side. This will add about 15px to the width, but 155px total should still hold everything. If not you can always re-size the avatar or increase the #post-author-image section to 160px or 170px.

Applying Code to WordPress

If the example styles are still confusing just check out our stylesheet to see the full code details. Additionally you are not required to duplicate your box exactly as we have done here on DesignMag. Use your designer’s judgement and include styles which match your own blog theme the best.

Now that everything is coded and styled we should replace the default HTML content with WordPress PHP functionality. To save space I included the whole code block below with replacement PHP snippets. Inside the current theme directory I made a new authorbox.php file which will contain just this code bit, which we can then include into WordPress’ single.php for single blog posts.

[cc lang="php"]

[/cc]

I’ll give a quick overview of each function at play here. If you understand PHP and WordPress there shouldn’t be much confusion and you can always check the WP Codex for additional info.

• get_avatar() – Here we output a plain HTML image using the current author’s e-mail address. The second parameter defines a numeric height/width in pixels for Gravatar to return(max 256px).
• the_author_meta(‘display_name’) – the_author_meta() is a general function used within any WordPress loop. You pass in a key value and the output returned is specific to the current author metadata. In this scenario the author’s display_name is output which can be set from their profile page.
• the_author_meta(‘user_login’) – similar to the above function except in this scenario we need to append the username to hack together an author URL. By default WordPress uses /author/username/ for these pages so it’s rather easy to put together a custom anchor. Note that get_author_posts_url() is another option, but this requires parameters which will just muck up our code even more.
• the_author_posts() – easy as pie here! We are just outputting the total number of posts this author has written and published.
• the_author_meta(‘description’) – this last meta function will output a paragraph of text from the author’s bio section. This will support HTML tags such as anchor links. Author’s are generally encouraged to include their website or Twitter links here.

Completing the Process

For some web server setups you may not be able to include an external PHP file because of security settings. This means even though authorbox.php is in the same directory an include() function may fail outright. Add the following into your single.php and check if it works or not.

<?php include (get_bloginfo('template_url')."/authorbox.php"); ?>

Assuming this works then congrats on the new setup! But if you’re getting hit back with PHP errors you may consider moving all your code from authorbox.php right into single.php. To do this select all the code from your authorbox and cut/paste into the same area in your single.php, and don’t forget to delete the include() call! Save & reload the page and assuming your code is within the WP loop everything should work perfectly!

If you end up building your own custom author box style we would love to check it out! Just let us know your website URL in the discussion area, along with any cool tips you picked up during the process.

Advertise here with BSA

Advertise here with BSA

Masters of the Adobe software suite often lean towards graphic design or web development. When creating documents for print this can easily be transcribed in both Adobe Photoshop and Illustrator. However, Adobe InDesign allows you to create entire projects such as a magazines, online e-books, cover pages, flyers, etc. But most people just haven’t had the time to learn how to utilize these features!

If you are feeling bold check out the showcase collection below. I put together 25 beginner-intermediate level tutorials which will get you more familiar with InDesign. Once you understand what can be accomplished it may change your entire workflow!

Business Card Design

Starting a New Document

Placing an Image

Magazine Cover with InDesign

Publishing an iPad Magazine

Creating Percentage-Based Styles

Hidden Gems: The Story Editor

InDesign: Creating PDF Forms

How to Mirror a Layout

InDesign Next Paragraph Feature

Creating an Interactive Portfolio with InDesign CS3

Bleed and Layering Master Pages

Magazine Design (Part 1 of 3)

Improving Your Workspace Layout

Basic Page Numbering

Preparing for Print Services

How to Batch Replace Characters and Glyphs

The Layers Panel in CS5

Setting Margins with InDesign CS5

Creating Compound Frames

Notes and Comments in CS5

New Document Window Explained

Crop Markers in CS4

Conditional Text for InDesign CS4

Writing an Effective Book Document

Advertise here with BSA

Advertise here with BSA

With many social applications the use of threaded comments has become a staple in functionality. Webmasters today are focusing much more on user experience rather than content generation, and because of this there has been a rise in custom animation effects.

Below I’ll be going over a guide to building your own custom jQuery threaded comments from scratch. For the ease of our tutorial we won’t be using any backend system to actually store the data anywhere. This means no MySQL databases or PHP calls to a server – all comments are added in-page and will be lost upon page refresh.

Live Demo – Download Source Code

Granted, the system is very simple to work with and extrapolate data from. This tutorial not only introduces the inner workings of jQuery, but gives developers a framework of which to base a simple comments application on.

As always if you have questions feel free to post them in the comments below. Much of the code introduced here is easy to understand and well documented in the jQuery wiki.

Starting with Core HTML

To get started we should focus on document structure and HTML processing. Jumping into the beginning I’ve created a directory named jquery-comments which will include all of our project files. There isn’t much required to include here.

The list starts with an index.html and style.css document overview. These two docs will contain your page structure and layout, respectively. We’ll also need a .js file to house our custom jQuery functionality. I’ve named this file “jcs.js”, short for jQuery comments. But feel free to name the script anything you desire.

The last step I’ve done is to create an images directory. Inside I have a few pre-cropped avatars for our example, along with a comment bubble icon for additional page effects. To get started let’s example the proper code inside index.html first!

[cc lang="html"]

[/cc]

We have a heading area just like any other webpage instilled at the top of our document. Inside we’ve included our style.css and also our remote JavaScript file. Additionally I’ve added the jQuery 1.4.2 miniaturized library hosted in Google’s code repositories. This has the benefit of reducing calls to the server at runtime and keeping your physical file count low.

Comment Blocks

Inside our body we have a division with an ID “comments”. Inside this is where all our code resides. To dive right in let’s examine a piece of code containing the first 3 page comments. The 1st in our set is the root node while the other two are threaded replies.

[cc lang="html"]

userman posted 7 hr 32 min ago

Here is some sample text for a comment. Man what a nice day outside!

Reply

DuckDude posted 5 hr 11 min ago

Here is a unique rebuttal. Hmm…

Reply

snowhockey1 posted 4 hr 16 min ago

Also, by the way if you were wondering. This isn’t a real username it’s actually pretty fake.

Reply

[/cc]

The code may seem a bit messy at first, but each section does have an echo effect. Each comment in-page is housed inside a div with the class “comment-thread”. The container divisions for “comment-block” houses all of the comment information.

This includes the username and avatar, date/time of posting, comment content, and reply button. Directly after this area we have a new opening division classed under “thread-replies”. Note this is still inside our root node “comment-thread” and will contain further threaded replies to our original.

If you examine the threaded replies closely you’ll notice not only are they also enclosed inside a “comment-thread” but each has their own “thread-replies” section. For internal comments this div is left blank on purpose – this is how we can use jQuery to manipulate and add further comments without refreshing the page.

You may also notice each comment-block contains a unique ID parameter. This would be set by an internal system giving each new comment an incrementing ID value. I’ve generated static values and added them directly into the HTML code per this example, although it’s fully customizable from any alternative CMS.

Accessing the DOM with jQuery

The Document Object Model is a structural way of viewing each web page. It’s built upon HTML nodes which are referenced with each page element and housed within contain child element(s).

With jQuery we are able to access individual elements in our page and manipulate their information. Not only this, but we are also able to add new page elements without even so much as a refresh! Getting started with jQuery code, added below is the first few lines in our script.

[cc lang="javascript"]$(document).ready(function() {
var totalcommid = 31;

$(“.option-reply”).live(“click”, function() {
[/cc]

We start off with a standard document.ready() clause checking if our page has fully loaded. Once the DOM is ready we can start calling functions and pulling data. We have a single variable set named totalcommid. This is a static number put in place so we don’t accidentally overwrite any existing comment IDs.

The next line is a selector targeting all elements under the classname “option-reply”. These happen to be the small “Reply” hyperlinks placed after each comment. Our code is checking for a click event handler to call an internal function.

In layman’s terms this means jQuery puts a trigger on each “reply” link in our page. Every time one of them is clicked we have an internal function called to display a new comment text field. Once added we either have the option of closing the comment box or adding new content and appending our comment into the thread.

[cc lang="javascript"]var currtxt = $(this).text();
var curroptlink = $(this);
var cid = $(this).parent().parent().parent().attr(“id”);
var poundcid = “#link-”+cid;

var htmlform = ‘<form id=”commsubform”><label>Add Comment:</label> <textarea id=”thecomment” class=”commtxtfield”></textarea> <br /><br /> <a class=”savecommbtn” id=”link-’+cid+’”>Save Comment</a></form>’;
[/cc]

The first thing we set are common page variables which we’ll be accessing repeatedly. currtxt is set to the current selector’s text value. curroptlink is a selector targeting the current link we’ve just clicked. Although the code seems mildly repetitive it can save time when manipulating data later in our function.

cid is a unique variable which contains our current comment thread ID. This takes a bit of DOM traversing until we get to the proper parent element containing our ID value. This is one great aspect to working with jQuery since each comment we add will have the same format, thus our code is fully functional and expands regardless of how many threads.

Our htmlform variable should be pretty self-explanatory. It contains all the HTML code needed to embed into the page for a new comment form. Note we make good use of our cid variable by giving our save link the value of our next comment ID.

Functional Page Manipulation

From here we’ve got most of the variables we need set and ready. We’re already inside of our selector and just need to offer a few more bits of code to exercise.

Getting started we have to understand when our users want to show or hide the comment form. It should be just as easy to close a reply box as to open it. We can accomplish this task with two individual toggle functions based on the current link text.

[cc lang="javascript"]// toggle between show/hide comment form views
if(currtxt == “Reply”) {
$(this).parent().next(“.showhidecommform”).html(htmlform);
$(this).text(“Hide form”);
}

if(currtxt != “Reply”) {
curroptlink.parent().next(“.showhidecommform”).html(“ ”);
curroptlink.text(“Reply”);
}
[/cc]

The logic here is very simple but works well for what we need. Broken apart we see 2 if conditional statements checking the value of our current link text. If the link text says “Reply” we add a new comment form and change the link text to “Hide Form”. If the opposite is true then we just reverse our actions.

The power over documents we control here is only accessible from the many variables we declared earlier in the script. We could change a few more things about the page when a reply link is clicked, although I’ll leave that for you to customize.

The last and final piece of code will translate our comment into an HTML block and append it into the page. Our first jQuery selector looks for an element tagged to the variable poundcid.

[cc lang="javascript"]// begin translating our comment
$(poundcid).live(“click”, function() {
var newcomtxt = $(‘textarea#thecomment’).val();
var targetcontainer = “#”+cid;

var newcommhtml = ‘

anonymous posted 1 sec ago

‘ + newcomtxt + ‘

Reply

‘;

$(targetcontainer).next(“.thread-replies”).hide().append(newcommhtml).fadeIn();

curroptlink.trigger(“click”);
});
[/cc]

This variable was set earlier in our code and targets the save link we generate with each new comment reply field. For this we add another live() click event handler and call another internal function upon saving.

Adding New Threads Dynamically

The variable newcomtxt is used to pull the current value of our text field and store it. targetcontainer is targeting the root thread based on the ID value. We are adding a hash/pound symbol (“#”) beforehand so we can target the variable inside a jQuery call.

newcommhtml is our largest variable and will be appended over and over into our document. This contains all the commenter’s information – username (in this case anonymous), datetime of posting, and avatar. You may notice there is also built-in code so for each new comment you add there will also be a matching “Reply” feature for further threading.

The second-to-last line is where we target and append our new HTML. We first grab our root element and find the first (and only) iteration of the “thread-replies” div.

First we call the hide() function to hide all internal content. This gives the animated effect of a fade-in when each new comment is added. We then append our HTML code from the variable above along with a fadeIn() function call.

The trigger() function is called on our curroptlink to force a click event. This points towards our current option link, which at the end of adding a comment should be labeled “Hide Form”. This last line of code makes sure to remove our comment field after successfully adding the comment information into our page.

The last bits of code required will close off our 2 initial jQuery selectors. These include our first click event handler along with the DOM.ready() statement. To finish our commands we first increment the comments ID by 1 and return a false Boolean value to stop the page from reloading.

[cc lang="javascript"] totalcommid++;

return false;
});
});
[/cc]

Conclusion

And that’s all we need! The jQuery code may seem a bit intimidating at first glance, especially if you haven’t spent much time in the language. However I can vouch in stating jQuery doesn’t take much time to learn and even newbies to JavaScript will pick up the conventions quickly.

If you have the interest feel free to build around this comment system to include your own server-side functionality. This could include a database system with Ajax calls to permanently store each comment locally with a matching ID.

There are so many things which can be done under the power of jQuery. If you’re interested further try downloading the project demo code and going over a few of the options yourself.

Advertise here with BSA

Advertise here with BSA

We have seen a lot of different jQuery techniques over the years. This comes at a time when website navigation is at an utmost importance. User experience is key in all forms of design. Without perfecting your layout it will be difficult to keep visitors coming back for more. And with so many jQuery Plugins for Navigation it’s hard to miss something great.

Below I’ll be going into the code for developing a very basic dropdown navigation in jQuery. This will include a sub-menu of links to different profiles such as Twitter and Facebook. To create your own setup I would recommend checking Icon Finder to match any social networks you enjoy. But this navigation can be used for almost anything requiring a drop-down setup.

Live Demo – Download Source Code

Getting Started

We should first examine the basic HTML structure. I’m using HTML5 doctype to format the page outline and list structures. It shouldn’t affect your document or the scripting if you use XHTML or even HTML 4.01. In the header I’ve included just a few external files for what we need.

First a basic styles.css for laying out our fonts, resets, formatting, etc. I’ve also included the latest jQuery 1.6.1 library from Google Code hosting. All of this code is accessible from the demo download above if you need a better view. But I’ve included a bit of the header below:

[cc lang="html"]
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>jQuery Animated Sliding Menu Navigation[DEMO]</title>
<style type=”text/css” media=”all”>
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
</style>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’></script>
</head>
[/cc]

Many of you may have also noticed I’ve included an @import statement for external CSS styles. Namely these are being loaded from Google Web Fonts to include an alternative for our header text. I’ll explain how to use these fonts a bit later in the tutorial. For now let’s finish one more aspect of the HTML – our navigation menu!

In the content area I’ve used HTML5 sections for labeling off areas. The right column will contain our dropdown navigation and a small header. I’ve decided to use an unordered list for simplicities sake. This has the ID #slidenav while each internal list item has the class .nitem. Note that only root items will have the .nitem class, not our sub-menu nav.

[cc lang="html"]

[/cc]

Instead I’ve used a much simpler technique to append sub lists directly after the list item. We can give each a class of .nsub and use jQuery later to hide them. The icons I’m using are each separated by span elements with different IDs. I’ve used these in CSS styles for positioning. But they can also be useful for other functionality – if you wish to replace the icon on hover, for example.

Breaking into Web Fonts

We should now jump ahead into coding our CSS. Styles are just as easy to understand as HTML elements and certainly if you understand the document structure. I won’t be explaining the whole stylesheet since it doesn’t include a ton of new features. But let’s start with the inclusion of Google’s webfont system.

From their main page Google web fonts can seem confusing. But broken down into steps, you’re merely:

• choosing a font or fonts you wish to include in your page
• including the external CSS into your page
• start using font names in font-family property

Google actually lets you use the specific font name for anything you’d like! So in my example we are including a new font Gloria Hallelujah. I could have included many fonts in one stylesheet from Google, but honestly we don’t need any more. It takes a lot longer for pages to load the more fonts you include through Google, so it’s best to limit below 5 or 6.

[cc lang="css"]h1 { font-family: ‘Gloria Hallelujah’, cursive, Georgia, sans-serif; font-size: 4.6em; color: #666; text-transform: none; line-height: 2.2em; }
[/cc]

In the above code we’re adding this font family as our priority 1 font. If Google is unable to load for some reason we can fallback onto Georgia or sans-serif. A very simple technique, yet powerful in today’s modern web sphere. We should now focus on coding our sliding navigation and animating with jQuery.

Sliding Nav List CSS

It’s best to start by planning ahead for our #slidenav list. This ID is used to target the majority of our internal styles, even relative to our sub navigation lists. We set all the list items to 1.6em Arial fonts. But the padding and line-height is all added into our anchor links, that way they can display as block elements.

[cc lang="css"]/* @group sliding nav */
#slidenav { margin-bottom: 15px; }
#slidenav li { font-family: Arial, Verdana, sans-serif; font-size: 1.6em; font-weight: bold; margin-bottom: 2px; }
#slidenav li a { display: block; padding: 2px 10px; text-decoration: none; color: #dedede; line-height:40px; }
#slidenav li a:hover { background: #eaf3f9; color: #939393; }

#slidenav .nsub { font-size: 0.7em; font-style: italic; padding-left: 22px; }
#slidenav .nsub li { padding: 0; color: #666; }
#slidenav .nsub li a { color: #a9cee9; line-height: 1.7em; }
#slidenav .nsub li a:hover { text-decoration: underline; color: #4198da; background: #fff; }
[/cc]

The .nsub class works in a very similar way. We append this onto any sub-list of links and all the subsequent items. For the sub links I’ve removed a lot of the padding so these will actually list out like anchor links. Otherwise we would be taking up a lot of unneeded space on screen. I’ve also simplified the hover effects quite a bit.

Hopefully you can see the document order and understand how our page layout is being constructed. Again I recommend downloading our source archive if you need to look at the whole code. But with this in mind let’s move into the basic jQuery functionality.

jQuery Magic

There isn’t a whole bunch of code required to get this working. I’ve chosen to place the scripting inline with our HTML code, towards the very bottom of our page document. Placing your script tags right before the closing </body> will let the page fully load before getting hung up on JavaScripting. You may not even notice much of a difference – so feel free to write your code anywhere internal or external.

We need to start by calling our $(document).ready() status. jQuery will recognize to hold off on any effects until after the page finishes loading. This is standard within any jQuery script manipulating the Document Object Model. We are targeting all .nsub elements on page and choosing to hide() them by default. This prevents our sub lists from displaying all at once.

[cc lang="javascript"]$(document).ready(function() {
$(‘.nsub’).hide(); // hide sub-navigation items by default

$(‘.nitem a’).live(‘click’, function(e){
e.preventDefault();
$(this).parent().next(‘.nsub’).slideToggle(‘slow’);

if($(this).parent().next(‘.nsub’).is(‘:hidden’)) {
$(this).addClass(“CurrentlySelected”);
} else {
$(this).removeClass(“CurrentlySelected”);
}
});
});
[/cc]

We can trace the majority of our animation to a live click event handler. This is demonstrated in the code above by checking each anchor link nested inside a .nitem class. Whenever one of these links are clicked we immediately call preventDefault() on the event. This will disable the href value on the links so our page won’t be redirected.

Next we’re using a bit of document node traversing to target sub-lists. From the anchor link we call parent().next('.nsub') to lock onto the next sub navigation list. We can use the slideToggle() method to transition between showing and hiding these lists. This is one robust method with a few possible customizations in the parameters.

And finally we are checking if the sub listing attached to each anchor is hidden or displaying. If hidden we are adding a .CurrentlySelected class. This can be used when you transition from page-to-page keeping each of the menus open. Although this is certainly a simple option there are other alternative ways to code in this functionality. But with this method we can save a few headaches!

Live Demo – Download Source Code

Conclusion

Hopefully you’ve taken away a bit of web design knowledge from this tutorial. We’ve constructed a full HTML5 layout and used some newer CSS styling techniques throughout. We also touched upon Google Web Fonts and utilizing jQuery effects for displaying and flipping through page elements.

Be sure to download the demo source code for yourself if you’re interested in tinkering around. Additionally let us know your questions or thoughts in the discussions area below.

Advertise here with BSA

Advertise here with BSA

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.

Live Demo – Download Source Code

Sorting out the HTML

Let’s start out by examining the basic page HTML setup. I won’t cover the entire layout since this is really beginners stuff. But we’re using an HTML5 doctype in the header with an external stylesheet resource. I’ve also added the latest jQuery 1.6.2 minified library from Google code servers.

Our main content is held within a div using the ID of #c. This content div will center our page form and give a light background compared to the body. Inside we have a heading and loader div to display the ajax loading button when processing the form values. Also beneath the form is a results div to output information upon successful login.

[cc lang="html"]

Instant Login with jQuery/Ajax

Username:

Password:

username: admin / password: password1

[/cc]

This covers a lot of the basics to look at. I’ll be jumping right into the jQuery code so we can really get into the juicy stuff! One last design topic to mention is the icon we’ve used to signify a successful login. It’s a typical style of Things icon design to feature a glowing box containing a check mark.

Dynamic Coding in jQuery

To keep things easy I’ve included all of the jQuery code directly into the same page as our HTML demo. Within the source files you’ll find 2 core pieces – index.html for frontend UI and login.php for processing the form details. The PHP code is beyond simplistic, so don’t worry if you’re fairly new to the language.

But to begin with scripting let’s examine our jQuery clause below. This is included within a script tag directly before my closing body element. At first we check if the document has finished loading to prepare for processing DOM elements. I’ve initially hidden the #loader div so nothing is displayed until later on.

[cc lang="javascript"]$(document).ready(function() {
$(“#loader”).hide();
[/cc]

From here we’ll be working within a single event handler function. Whenever the user releases a key on the keyboard (.keyup) we want to check out a whole list of functionality. jQuery is great at building such nested functions in very few lines of code!

[cc lang="javascript"]$(“#pw, #username”).keyup(function(){
var passnum = $(“#pw”).val();
var usernum = $(“#username”).val();
[/cc]

You’ll notice we are using two selectors inside this jQuery event handler call. Whenever the user releases a key on either input field we need to call a fairly large function. Immediately we set 2 variables passnum and usernum which hold the value of the password and username input, respectively. We’ll need this in the next segment to check if the values are correct.

Handling Form Input

We should now examine the whole jQuery block of code for processing the form data. This is rather lengthy so I’ve chosen to break it further into two parts. I do recommend downloading the source code instead of copying/pasting from the article so you don’t get lost!

[cc lang="javascript"]if(passnum.length > 1 && usernum.length > 2) {
var qry = ‘username=’+ $(“#username”).val() + ‘&pw=’ + passnum;

if($(“#loader”).attr(“class”) != “loading”) {
$(“#loader”).addClass(“loading”);
$(“#loader”).show();
}
[/cc]

We begin with a simple if/else clause to check if the input username is longer than 1 character and the input password is longer than 2. If this is true then we can assume the visitor has entered values into both fields and we should begin checking their credentials. We’ve put together a new variable named qry which stores the query string for our upcoming PHP/Ajax call.

This basically passes the current username and password value directly to the login.php form so we can see if they are correct. For aesthetics we also check if the #loader div has a class of loading. If not then we know it hasn’t been activated yet, so we apply the class and show the loading image. In this case I’ve used Ajax Loader to create a Facebook-style .gif animation. Now let’s examine the code for our ajax call.

[cc lang="javascript"]$.ajax({
type: “POST”,
url: “login.php”,
data: qry,
success: function(html) {
if(html == ‘good’) {
$(“#loader”).hide();
$(“#instantform”).fadeOut(1100, ‘swing’)
$(“#instantform”).next(“p”).fadeOut(1100, function(){
$(“#results”).append(‘

Success! Logged in as ‘+usernum+’!!’);
});

$(“#loader > img”).attr(“src”, “img/checkmark.png”);
$(“#loader”).fadeIn(800);
}
else {
// handling errors if needed
}
}
});
[/cc]

jQuery has made things a lot simpler with a specific .ajax() method and parameters to boot. I’ve setup standard values using a POST format so the data isn’t streamed as $_GET variables. If we get a successful ajax connection I’ve added a new function() as the callback method and passed in the response html from the login.php file.

The PHP backend is hard coded to display the message ‘good’ if we have a successful login. This will activate the first clause in our if/else function which hides the loader panel and begins a .fadeOut() function on our form. Remember that all of this processing is happening with every keystroke, but we only access this functionality if the Ajax response is good (when the user provides proper credentials).

Demo PHP Formatting

There are a few other neat effects I’ve created with the jQuery callback function that I won’t go into further detail. They are fairly straightforward to understand if you know about jQuery selector syntax. Note when we get a failed login I haven’t added anything, just a comment to fill the void.

Now let’s swap over and examine the very last piece of this puzzle! In my login.php file I’ve only added the bare minimum amount of code we need to process this form. We check if there are $_POST variables set and if true assign the username and password values to $u and $p.

[cc lang="php"]if($_POST) {
$u = $_POST['username'];
$p = $_POST['pw'];

if($u == “admin” && $p == “password1″) {
echo “good”;
}

else {
// possible error handling in php
// not required for all
}
}
[/cc]

I’ve done nothing fancy to check for login credentials. Just a simple if/else clause to matchup the username and password string values. Certainly not the safest method but there are plenty of tutorials on securing PHP login data. If PHP gets a matchup we echo (or return) good to the jQuery call. Otherwise we get nothing in return.

Live Demo – Download Source Code

Conclusion

This introductory tutorial was aimed to grow your knowledge of jQuery programming. If you understand PHP and session variables it shouldn’t take much work to port this script into a working login form. Many of the animations I’ve used are offered by default in jQuery, so you may be interested browsing form plugins for some alternate effects.

Be sure to download the source code above and play around with the demo when you have time. If you launch anything live onto your own website we would love to see it! Additionally if you have questions or comments feel free to offer your ideas in the discussion area below.

Advertise here with BSA