However, in practice, programming turns out to be much less scary than designers imagine it to be. Today I’m going to show you how programming is a skill that you can learn once and then apply to each new language that you pick up. We’ll take a look at three different programming constructs in three different languages to see how similar they really are. If you’d like to get started in programming but don’t know a single thing about it, this article is for you.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Fear Not, You Just Might Like It

This site is generally targeted towards designers, and from personal experience I know that approaching programming for the first time as a designer is extremely intimidating. Designers are visual thinkers, we thrive through creation and experimentation using our mind’s eye and an expert knowledge of the tools of our trade.

Generally, we’re the kind of people that hated math class and anything else where creativity didn’t seem to have an obvious foothold.

Programmers are problem solvers. They love logic puzzles and tinkering with code for hours in the absolute absence of visuals of any kind. Keep in mind that these two categories of people aren’t mutually exclusive. If you fit both descriptions, you’ll likely absolutely love programming.

Not HTML and CSS

We’re quickly reaching a point where most web designers know at least a little bit about coding HTML and/or CSS. This experience and knowledge will indeed help you, but perhaps not as much as you might think.

HTML is a *markup language* and CSS is a *style sheet language*, they’re used primarily to format and insert fairly static content into pre-built pages. How you work with them is in all reality very different from wielding a *scripting language* or *object-oriented programming language*, which are the kind of hardcore programming tools you’ll find in use on the web today.

The Big Secret About Programming

That last part was the bad news, but fear not, there’s good news on the horizon. If you walk into a bookstore and wander over to the programming section, you’re likely to be completely intimidated. There are so many different things to learn! This intimidation is furthered when you happen to meet one of the super geniuses that seems to know pretty much all of the programming languages in existence. How in the world do people find the time to learn this stuff? Many beginners are so completely put off at this point that they give up before they ever even try.

The big secret that you don’t know if you’ve never really jumped into programming is that programming languages tend to be very similar. Many of them use the same building blocks and similar tool sets to achieve their goals.

I learned this little secret in my first interaction with programming: a Java class in college (not to be confused with JavaScript). Though I myself was a strapping young lad, the class was largely filled with men in their 30s and 40s. Virtually all of them already had jobs in programming and had been at it for twenty years or more. They were simply employed in the use of other languages and attempting to expand their skill set, often at their employer’s encouragement and expense.

Walking into the class on the first day, none of us knew much, if anything, about Java. However, by the third class, these guys were breezing past me. I was writing horribly simple little code snippets based on the fundamentals that we had learned. These guys were taking the same fundamentals and building elaborate applications with all kinds of cool functions way beyond the requirements for the assignment.

Was I inept? It turns out, fortunately for me, that the answer wasn’t so simple. The reality was that we were learning very different things. I was learning to program through the lens of Java, these guys already knew all about programming and merely needed a little help figuring out how to translate that knowledge into Java. I was a toddler learning to speak for the first time and they were multi-linguals picking up yet another language.

The point of this long story is to illustrate that, after you really get into programming or scripting with one language, the rest becomes much easier because you’ve dramatically reduced the learning curve. If you know how to code in PHP, the jump to Ruby is much smaller.

The Building Blocks

It’s easy for me to say that programming is built on reusable knowledge, but can I put that into practice? What are these so-called building blocks and how are they similar or different from language to language?

Great question! Let’s find out by taking a look at some of the most basic but most used programming constructs. Understanding these will jumpstart your programming education regardless of the path or language that you choose to pursue.

Variables

Variables are a wonderful thing. If you’ve ever used LESS or something similar then you’ve seen the wonders of variables and how they can save immense amount of time. I’m still not sure if they belong in CSS, but the programmer in me sure wants to see them there.

A variable is essentially a way to store information. You can store something as simple as a value, say 39, or something as complex as an entire array of data containing hundreds of values. Think of a variable as a box. Boxes themselves don’t seem all that important, it’s what’s inside that counts. However, boxes do make for a convenient way to store and access certain items.

JavaScript Variables

Let’s jump to an example. Since JavaScript is a likely first candidate for moving past HTML and CSS, we’ll start all of our examples there. Here’s how variables work in JavaScript:

// Creating a JavaScript Variable
var contentWidth;
contentWidth = 496;
 
// Using the Variable
alert(contentWidth);

Here you can see exactly how variables are used in JavaScript. First, you “declare” a variable. This simply creates it or brings it into existence, when doing this you always want to name it something indicative of its contents. Next, you assign it a value (often these two steps are combined), in our case I threw in an arbitrary number. Remember that, “contentWidth” is our box, which now holds a value. Any time we want to access that box, we just use the variable name, so to end the example out I created an alert and inserted the variable. This will pop up a box with the value “496″.

This may seem useless here but imagine we had three hundred lines of code that referenced that variable frequently. Any time the value of that variable changes, our code still works perfectly because the variable name has stayed constant. Without variables, this would be impossible and much more code would result.

PHP Variables

Now that we have that solid foundation of information, learning variables in other languages becomes much easier. This time we’re not learning what variables are and how they work, only how to use them in other languages.

Here’s a look at how variables work in PHP:

// Creating a PHP Variable
$contentWidth = 496;
 
// Using the Variable
echo $contentWidth;

There’s a lot of similarity here. Notice the use of semicolons to denote the end of a statement and how comments use the same syntax. This time we declared our variable and assigned it a value in a single line. We can see that the syntax for this is nearly identical, with the important distinction that PHP uses a “$” at the beginning of a variable name. Note that the “echo” command merely prints something to the browser page.

Ruby Variables

Now let’s take a look at variables in Ruby.

# Creating a Ruby Variable
contentWidth = 496
 
# Using the Variable
puts contentWidth;

By now you can see that a lot of what’s involved in learning a new language is just figuring out its various quirks. For instance, JavaScript and PHP used semicolons at the end of a line, Ruby does not. Also, this time around comments are created with “#” instead of “//” and we use “puts” to output our result.

Loops

Another popular programming construct is a loop. With loops you can save yourself the trouble of repeating code again and again by automating the process you want to achieve. When creating a loop, you must be sure to declare the parameters of the loop, such as the conditions for when the loop will cease. You don’t want the actions continuing on infinitely so you must create a condition whereby the loop will be terminated.

JavaScript Loops

In any given language, there are usually multiple types of loops. Here’s one type in JavaScript, the “while” loop. In this example we set up a variable, then create a chunk of code that should execute again and again for as long as the variable is less than 50. Then within that block of code, we define the actions to be repeated. In this case we’re logging the value of the variable to the console, then increasing the variable’s value by one. Since the variable is increasing every time the code runs, it will eventually hit 50 and the loop will terminate.

// JavaScript "while" Loop
 
var x = 25;
 
while (x < 50) {
	console.log(x)
	x++; // Increases the variable by one
}

This same thing could be achieved with a “for” loop. This version a little more succinct as is states the value of the variable to start, the condition under which the loop terminates and the action to take on the variable all in one line.

// JavaScript "for" Loop
 
var x = 25;
 
for (x=25;x<50;x++) {
	console.log(x)
}

PHP Loops

Once again we find that PHP is very similar to JavaScript. After reading through the examples above, you should be able to effortlessly grasp the PHP equivalent. Here once again we have a while loop and a for loop, each of which contains nearly identical syntax to their JavaScript brethren.

// PHP "while" Loop
 
$x = 25;
 
while ($x < 50)
	{
		echo $x;
		$x++; // Increases the variable by one
	}

// PHP "for" Loop
 
$x = 25;
 
for ($x=25;$x<50;$x++)
	{
		echo $x;
	}

Ruby Loops

Here are the “while” and “for” loops in Ruby. As you can begin to see, Ruby is much looser in its syntax than the other two languages we’re using. Not only are there no semicolons, the curly brackets aren’t present either. Also notice how different the “for” loop looks this time around.

// Ruby "while" Loop
 
x = 25
 
while x < 50
  puts x
  x+=1 # Increases the variable by one
end

// Ruby "for" Loop
 
for x in 25..50
  puts x
end

Functions

Functions are yet another programming construct created to save you time by avoiding repeating the same code. When you code an application, it will probably perform anywhere from one to thousands of tasks. Each task represents a chunk of commands. When we toss the commands into a function we can simply call that function instead of writing out that full code. In this way a function is a lot like a variable that performs a task or list of tasks.

JavaScript Functions

Let’s build a super basic function in JavaScript that takes any number passed to it and squares it. We start here with the word “function” then follow it up with a variable in parentheses. Then inside the function we perform various actions and return a value.

// Creating the Function
function squared(someNumber) {
	return someNumber * someNumber;
}
 
// Using the Function
console.log(squared(9));

When we use the function, we replace the parenthetical variable with any number we like and the code inside the function will be performed on that value. In the example above, the result returned would be 81.

PHP Functions

By now you’re so familiar with the JavaScript to PHP conversion that you should be able to do it all by yourself. Here’s the syntax:

// Creating the Function
function squared($someNumber)
{
	return $someNumber * $someNumber;
}
 
// Using the Function
echo squared(9);

Ruby Methods

Once again, Ruby is quite different. In fact, Ruby actually refers to this particular construct as a method, not a function. However, we can still quickly apply our knowledge of functions to decipher how this works.

// Creating the Function
def squared(someNumber)
   return someNumber * someNumber
end
 
// Using the Function
puts squared(9)

As you can see, the Ruby method is performing the same task as the JavaScript function. It allows you to pass a number into the parameters, after which is squares that number and returns the value.

Easy Right?

By now you should be able to see the importance of understanding the practice of programming independently of any programming language. There is a shared structure and method of programming that you’ll find throughout the languages that you learn. Many of the differences are *semantic* and amount to slight syntax differences.

Don’t take this to mean that programming and scripting languages are all the same, they’re not. They all have a specific purpose that defines how and when you use them. It’s a lot like learning Adobe Illustrator and then jumping to InDesign. You’re dealing with two different things created for two different purposes, however, there’s enough similarity that an expert knowledge of one will help you learn your way around the other.

Conclusion

This discussion was not in any way meant to be exhaustive. You don’t now possess a complete fundamental knowledge of programming. Instead, you merely learned about programming in a way that hopefully makes it more approachable. Instead of seeing a mass of completely different languages that you have to learn, you should now see a collection of related practices in which the study of one actually expands your understanding of the others.

So where should you start? As I mentioned above, JavaScript is definitely the place for web designers to begin. Its application is immediately apparent, especially when combined with jQuery, to the HTML and CSS that you already know. From there the leap to PHP is much more manageable, which might lead you to study Ruby so you can master Ruby on Rails; the possibilities are limitless!

Today we’ll be creating a styled iPhone App website template using HTML5/CSS3. This will not be targeted onto a specific app, so we don’t include a download link to the app store. Instead I’ve created a small e-mail signup form through MailChimp so you can hook early adopters into the app for pre-release. This is great for developers who need to get something up and running for their product before it’s on the market.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Try it Out

View Live Demo – Download Source

However, if you’ve noticed the app screenshot I’m using is from an actual app. It’s called Ballin ~ Dribbble for iPhone and just popped into the store a few weeks ago. This layout isn’t used to condone the Ballin app, instead I just needed a screenshot to include for demo purposes. But feel free to use another screen if you copy the template for your own website.

Getting Started

As always we start off with some very simple HTML page structure. If you checked out the demo everything we need is centered in the page and aligned properly. The code isn’t convoluted at all! I’m using the standard HTML5 doctype with 3 external files included.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>iPhone App Website with E-mail Signup</title>
	<link rel="stylesheet" type="text/css" href="global.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form-n-validate.js"></script>
</head>

The first is our global.css styles in an alternate file. Second we need the latest jQuery library hosted through Google Code databases. And finally I’ve added the form validation script from MailChimp. This script tag is normally copied over into your body area with the e-mail signup form, but to simplify the code I’ve moved it into the head.

So now let’s focus on parts of the body. I will skip over our e-mail signup just for now so we can focus on the bare-bones styles and framework. After opening the body you’ll notice an ID #iphone-preview which is used to house the Ballin’ app iPhone screenshot. We’re actually using only two images in this webpage – the iPhone screen and our blue gradient background.

Also as a quick note I’ve used an iPhone 4 PSD file for creating the graphic. You can check it out at the Macristocracy blog where Jake Moore has offered the free PSD for download. Or alternatively just download directly from his CloudApp link without visiting the page!

<body>
<div id="iphone-preview" class="wrap">
	<img src="img/ballin-app.png" alt="Ballin' App Preview" />
</div>
 
<div id="main-content" class="wrap">
	<h2>sign up below for instant e-mail updates and early <em>beta access</em> in the app store!</h2>

Now below the iPhone we have an ID #main-content which is similarly given a class of wrap. This means the content will be centered on our page regardless of resolution size. Inside the h2 tag I nested an em for emphasis on the words beta access. Using CSS I styled the em element to give a light pink coloring so these will stand out much more! Everything else is focusing on our e-mail signup, so let’s jump into global.css to clarify a few points quickly.

Designer’s CSS Code

In my source files the global.css is located directly in the root with index.html. I’ve grouped my styles into three main categories – global elements, body structure, and e-mail form styles.

Inside the core body I’ve added code for our wrapper class and to position the iPhone graphic. Each wrapper is contained within 660 pixels and centered horizontally on the page. Additionally the container div around our iPhone image is given a bottom border with the hex color #b4ada8. If you’ve noticed I chose to style this piece similarly to Milk’s Oink App for iOS.

/* @group core body */
#iphone-preview { text-align: center; border-bottom: 1px solid #b4ada8; margin-bottom: 12px; }
#iphone-preview img { margin: 0; margin-bottom: -2px; }
 
.wrap { width: 660px; margin: 0 auto; }

They use an outer glow on the iPhone and have matched colors for their app. Also, they’re using jQuery for a fade-in effect which I chose not to include. But this is a wonderful teaser layout to keep your visitors interested and begging for more info!

Setting Up MailChimp

This is the piece where things start to get a bit confusing. MailChimp includes a lot of their own custom code when you go to create a form. I actually had to edit out a lot of meaningless stuff from their generic code block – so don’t get discouraged if you can’t match up your styles exactly the same. My code will work 100% if you change both of the list subscription URLs generated automatically through MC.

So to get started head over into MailChimp and login. If you don’t have an account signup is totally free for under 12k e-mails/month (which is pretty realistic). After you log into the Dashboard look for a link at the top titled “Lists”. These are used to manage your subscribers for a specific topic – and this is how MailChimp will create your unique signup form tied into a list set. Create a new list, give it a quick name, and we should be set to go.

Once in the List Dashboard area you should notice a set of sub-navigation links. On the far right you’ll notice For Your Website and in the drop-down menu click Signup Form Embed Code. This is the code you’ll need to embed for a small signup form using MailChimp.

In the left-hand menu select Classic Form and customize the features to your liking. I’ve removed the title and just kept a standard e-mail field for signup. The code you need to copy is in the box below… so now we can go ahead and move on with our custom edits.

Customizing the Signup Form

Start out by removing the top style tag with all of their custom CSS edits. It’s nice they offer this, but we really don’t need it. Next if you look for the form element you’ll notice a very long URL in the action=”" attribute. This is one of the two custom URLs which will match up to your list. If you copy over from my code make sure to replace the form action with your own list URL – otherwise visitors will be signing up into my site!

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup"> 
	<form action="http://destinyislands.us2.list-manage.com/subscribe/post?u=8329c77b379de0413725b5380&amp;id=9d70a869e7" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
 
	<div id="mce-responses"> 
		<div class="response" id="mce-error-response" style="display: none;"></div> 
		<div class="response" id="mce-success-response" style="display: none;"></div> 
	</div> 
 
	<div class="mc-field-group" id="mcform-fields-group">
	<center><input type="text" value="" name="email" class="required email" placeholder="Email address..." id="mce-EMAIL" /></center>
	<input type="submit" value="Subscribe" name="subscribe" class="btn" /> 
	</div> 
 
	</form> 
</div>

Above is an example of what my form looks like after gutting all the MailChimp nonsense. It still contains a lot of the original code, but I’ve moved the error messages above the main input field. Also using the HTML5 placeholder attribute we can add default text into the e-mail field input before a user clicks.

Now the script tag is where people tend to get lost. If you notice two scripts you should check if one of them is the jQuery form validate.js file. If so you can remove it since we’ve already included this in our header. All of the other code is really used for checking if the form has been filled out properly. It’s very convoluted if you don’t understand jQuery, but luckily you don’t need to edit much of anything in here. If you copy the JS from my demo vs downloading from MailChimp you may experience differences if they have updated the backend since this publication. To play it safe just try working off my demo for now.

  var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
  options = { url: 'http://destinyislands.us2.list-manage2.com/subscribe/post-json?u=8329c77b379de0413725b5380&id=9d70a869e7&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",

I do want to bring your attention to one final important aspect of the JavaScript code. The options variable is used to pass information to the Ajax call when checking for validation. You’ll notice another subscription URL in the jQuery, but if you have a keen eye you should notice this isn’t the same URL as before!

It’s very important that you have both of these URLs set properly. The form action calls a URI with /subscribe/post while the jQuery URL is calling /subscribe/post-json. Even if you copy/paste from my demo just updating these two URLs with your own will be enough to get the script working for you.

View Live Demo – Download Source

Conclusion

This has been a fast-paced introduction to setting up an iOS App website using MailChimp. We’ve downloaded an iPhone PSD from the Internet and setup a small application graphic. We’ve also utilized some basic jQuery and CSS3 modeling to create a fantastic e-mail signup form using Ajax. And with all of this tied into MailChimp you’re getting a great subscription service totally free.

Let us know your thoughts or questions in the comments area below. Additionally if you implement the tutorial code anywhere we would love to see it live! Include a link to your web page if you’ve set up a similar iPhone or iPad app template design.

In this tutorial we’ll be creating a magazine-style drop down nav menu. This will be created with some fancy CSS3 techniques to work in standards-compliant browsers. Even if you are shaky with jQuery you should be able to keep up with this little bit of code, and possibly learn something new. Check out the live demo script in my example.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Try it Out

View Live Demo – Download Source

Structuring our Page HTML

We should start off by constructing the basic page layout. I’ve done this in HTML with an unordered list for menu links. Both the CSS styles and jQuery library are excluded externally which saves a bit of space. Added below is the heading to our HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DesignShack Sexy Magazine-Style Dropdown Menu</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>

The jQuery library v1.6.2 is hosted on Google’s servers for web developers to use. This can often cut off some of the load to your own servers. Differences are especially noticeable if you are processing tens or hundreds of thousands of visitors daily. I’ve also set my doctype to HTML5, not that it should affect our script.

Moving down a bit in the code let’s take a look at the inner body content. Below is a copy/paste of everything inside the body tag. I have removed the final jQuery code since we’ll be looking at that in a later section.

<div id="head">
	<div class="wrap">
		<h1><img src="images/logo.jpg" alt="Blog Magazine Logo" /></h1>
	</div>
</div>
 
<div class="wrap">
	<ul id="nav">
		<li><a href="#">Homepage</a></li>
		<li><a href="#">About the Mag</a>
			<ul>
				<li><a href="#">Company</a></li>
				<li><a href="#">Authors</a></li>
				<li><a href="#">Write for Us?</a></li>
				<li><a href="#">Advertising</a></li>
				<li><a href="#">Get in Touch</a></li>
			</ul>
		</li>
		<li><a href="#">Freebies</a>
			<ul>
				<li><a href="#">PSD</a></li>
				<li><a href="#">AI Vectors</a></li>
				<li><a href="#">Patterns</a></li>
				<li><a href="#">Icons</a></li>
			</ul>			
		</li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">HTML5</a></li>
				<li><a href="#">CSS3</a></li>
				<li><a href="#">jQuery</a></li>
				<li><a href="#">PHP MySQL</a></li>
				<li><a href="#">Ruby on Rails</a></li>
			</ul>
		</li>
		<li><a href="#">Web Tools</a>
			<ul>
				<li><a href="#">Performance</a></li>
				<li><a href="#">Browser Testing</a></li>
				<li><a href="#">CMS Plugins</a></li>
				<li><a href="#">Cheat Sheets</a></li>
			</ul>
		</li>
		<li><a href="#">Originals</a>
			<ul>
				<li><a href="#">Website Design</a></li>
				<li><a href="#">Mobile</a></li>
				<li><a href="#">User Interface</a></li>
				<li><a href="#">Freelancing</a></li>
				<li><a href="#">Inspiration</a></li>
			</ul>
		</li>
	</ul>
</div>

So this should finish up our main HTML structure. All the nested lists are using ul elements which are positioned inside a parent list item. Not too difficult if you have a basic grasp in web design and coding. So let’s move right ahead into the CSS styles.

Designing with CSS

I’ll break down each segment of the small style.css file attached with the demo code. We start with a group block resetting margins/padding for the whole document. A simple man’s page reset, really.

* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }
 
/* @group structure */
#head { background: #e1ecf6; height: 100px; padding-top: 15px; border-bottom: 1px solid #d5dce8; }
.wrap { width: 800px; margin: 0 auto; }

The head content will hold a small logo graphic I made in Photoshop. I’ve used .wrap as a class so we can re-use the same styles with our nav menu. This wrapper creates an 800px content div and centers it on the page.

The next group is a bit larger, providing styles for the root nav menu and its list items. Note the #nav selector is on our original unordered list element, so we can use this to select all sub-ul elements later on.

/* @group core nav menu */
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
 
#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }
 
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none;  color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }

On the root UL I have added 3 solid borders: left, right, and bottom. The top border spans the entire website and this is added in the header area. I’ve additionally rounded the bottom left and right corners. This technique done in CSS3 using -moz, -webkit, and the standard border-radius properties.

The list items are given a z-index of 999 to appear above all other elements. So in this way we would hover off the original li onto our subnav and lose the popup. Instead the li element expands to take up the full height of our new sliding menu and stay on top as we mouse over links. Also position: relative; is added to properly use absolute positioning on the inner list.

The anchor links aren’t too interesting in themselves. They highlight with a white background on hover with two additional borders to the left and right side. On the final hover selector I added another class .hov to be used by jQuery. This will make it so when you move the mouse cursor over sub-menu links the original nav link stays hovered! Pretty neat.

Sub-Navigation Menu Styles

This last CSS code will style our sub menu links. We use absolute positioning to move around our sub-ul element directly to the top of its container. Also a great drop shadow effect using some new CSS3 properties.

/* @group subnav */
#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }	
#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }

The individual properties I’ve used and their supporting browsers can get a bit confusing. Below is a small translation guide.

• -moz-box-shadow – Firefox/Mozilla Engine
• -o-box-shadow – Opera
• -webkit-box-shadow – Standard WebKit browsers, Google Chrome or Safari
• box-shadow – Most others including Microsoft Internet Explorer

Each sub-nav list item is set 180px in width. This defines the max size our menu will pop out to be. If you port over the code you should change this to accommodate sizes in your own template.

#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform:  uppercase; color: #797979; font-weight: normal; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
 
* html #nav ul { margin: 0 0 0 -2px; }

Each sub-menu anchor is set to a height and line-height of 20px. This will keep the menu text centered vertically in each menu block. On hover effect I’ve hidden the borders which are inherited from the parent nav links. All fairly straightforward with CSS styles, and now the final bit of JavaScript to piece it all together.

jQuery Show/Hide Sub Menu

Directly after the final .wrap div our content area ends. So right here I’ve added a new script tag and placed all the jQuery code inside. This makes editing a lot easier, and our code is fairly small anyways.

$(document).ready(function() {	
	$('#nav li').hover(function() {
		$('ul', this).slideDown(200);
		$(this).children('a:first').addClass("hov");
	}, function() {
		$('ul', this).slideUp(100);
		$(this).children('a:first').removeClass("hov");		
	});
});

Start the script by checking if the page document has finished loading. We want to trigger our first function after the user hovers over a list item in the root #nav ul. The first block of function code is made up of two lines.

It targets our inner ul element and adds a slide-down effect to complete in 200 milliseconds. Secondly we need to add the .hov class onto the currently selected anchor link. This keeps the hovered effect in the main link even when moving over sub-navigation links. The second function is our callback parameter for the .hover() method which happens on mouse off.

This is also comprised of 2 simple lines of code. These actually just reverse what we’ve done in the first area. The inner ul is forced to slide up in a quicker animation (100 milliseconds long) and we remove the hover class as well.

View Live Demo – Download Source

Conclusion

I’ve left the menu fairly basic so other designers can tweak the template to fit their own website. It is quite impressive what is possible with just a couple lines in jQuery! If you have implemented anything similar on your own site please let us know. And don’t forget to download and play around with the demo source code.

I have designed the functionality to look and feel like a private messaging solution. This is perfect to implement on a user profile page or author’s page in a blog. We will be using some handy CSS3 techniques along with coding the page structure in HTML5. You don’t need to be a master jQuery artist to understand this tutorial, but it wouldn’t hurt to brush up on the basics. Check out my live demo example and download the project source code below.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Try It Out

View Live Demo – Download Source

The HTML Structure

Before we dive into jQuery let’s examine a bit of the HTML first. If you’re interested in examining the whole document layout I suggest downloading from the source code. But I’d like to focus on the modal box HTML code for further explanation.

I split the template using HTML5 <section> tags. Inside I have a div with the class .containmsg which holds our modal box and button to show/hide the contents. The modal container uses the class .mainCompose. This is also how we target in jQuery – let’s look at the HTML code for this below.

<!-- begin modal msg box -->
<div class="containmsg">
	<p><img src="img/compose.gif" alt="compose" class="compose" /></p>
 
	<div class="mainComposeD">
		<div class="calloutUp">
			<div class="calloutUp2">
			</div>
		</div>	
		<div>
 
		<form name="sendprivatemsg" action="#" method="post">
			<label for="tofield">To</label>
			<ul class="userslist clearfix">
			<li><a href="http://designshack.net/author/jakerocheleau/" target="_blank" class="recipient">Jake Rocheleau</a></li>
			</ul>
 
			<div class="break"></div>
			<label for="mymsg">Message</label>
			<textarea name="mymsg"></textarea>
			<p>**Enter some text!</p>
			<div><a class="sendbtn">Send Message</a><img src="img/ajax-loader.gif" class="loader" /></div>
		</form>
		</div>
	</div>
</div>
<!-- @end modal -->

Inside our form element there aren’t any surprises. A small label and input message field. Also a to: field with a link to the user’s page. In this demo I linked to my DesignShack author page. It’s not required, though. You could even remove the link altogether and still keep the CSS styles in-tact. The users list is coded as a UL element so you could support messaging to more than one person.

Now before we dive into jQuery there’s one more technique I wanted to cover. If you click the compose icon you’ll notice our modal box has a small triangle tip at the very top. You could use images for this technique, but there is a simpler alternative using strictly CSS.

Cool CSS Tooltip Triangles

There is a small div which appears directly above the message form. This contains two classes labeled calloutUp and calloutUp2. The former behaves as a continuation of our outer border (the darker tan) while the latter connects to the center of our form area. Using both we can create matching triangles in a tooltip style connector.

This works because of a setting in CSS that makes all borders come together in center as a triangle. So we can set both of these divs to have no height or width, but massive borders. If we only give color to one of the borders and the rest are transparent we create the triangle effect seen here. Check out the CSS classes for both of the callouts.

.calloutUp { height: 0; width: 0; border-bottom: 12px solid #f0ecd0; border-left: 12px dotted transparent; border-right: 12px dotted transparent; left: 0px; top: 0px; margin-left: 30px; z-index: 10; }
 
.calloutUp2 { position: relative; left: -12px; top: 8px; border-bottom: 12px solid #faf7e3; border-left: 12px dotted transparent; border-right: 12px solid transparent; z-index: 11; }

I’m also setting details for the surrounding borders because this keeps the div block looking square. Otherwise our shape would turn rectangular, and then our triangles would come out lopsided with jagged edges. The z-index property is also important so that our inner tip will stay above the outer tip. The other styles are used to mockup our fonts in the demo example, certainly nothing extraordinary.

Developing Interactions with jQuery

Now we can delve into the good stuff! If you have used jQuery before you’ll likely be familiar with starting off a new document. First include the latest version of jQuery into your page. If you don’t wish to download and host the file yourself Google offers all versions of jQuery live for developers. The latest I’m using is library 1.6.2 mini.

Once that’s included you should open another script tag for JavaScripting. I decided to write my code within the head block of the same HTML page. But you could alternatively move this to the body, footer, or even into an external file. The first snippets of code I’ve added below.

$(document).ready(function() {
    $(".mainCompose").hide();
    $('.loader').hide();
    $('#errortxt').hide();
 
 
    $('.compose').click(function() {
    	$('.mainCompose').slideToggle();
    });
});

We call our $(document).ready() function to hold off on any actions until the page is finished loading. The first task is to hide 3 page elements right away. These are .mainCompose to hide our modal box, .loader to hide the ajax loading gif, and #errortxt which only displays if the user hasn’t entered anything and tries to submit the form. Each of these elements will only be displayed under certain conditions so it’s best to keep them hidden immediately.

And finally our first scripting action is checking for a click event handler. The .compose class is actually tied to our compose image even though there is no anchor link to be clicked. jQuery can handle the click events and call slideToggle() either way. Now the last bit of code to examine is how we can pull data out from user input.

Processing the Modal Form

We are only checking for one more final event handler. This is tied to the click event of our .sendbtn, which is actually tied to an anchor link in our modal box. Directly next to this is our animated ajax .gif image which was hidden right after the page loaded.

$('.sendbtn').click(function(e) {
	e.preventDefault();
	$('.sendbtn').hide();
	$('.loader').show();
 
	if($('#mymsg').val() == "") {
		$('#errortxt').show();
		$('.sendbtn').show();
		$('.loader').hide();
	}
	else {
		$('sendbtn').hide();
		$('.loader').show();
		$('#errortxt').hide();
 
		var formQueryString = $('#sendprivatemsg').serialize(); // form data for ajax input
		finalSend();    		
	}

The execution function right after our button is click now has a parameter. function(e) just passes the instance of our click event right into the function as a variable. We use this event selector to call the preventDefault() method so that our link doesn’t behave as a link. We also immediately hide the .sendbtn and replace it with our .loader image.

Next we pass into a standard if/else clause checking the #mymsg textarea value. If this contains no text then we know the user hasn’t entered anything. In this case we display our error message and re-hide the loading image while displaying our button again. Otherwise we enter the else{ } clause which assumes we can send the message!

I haven’t written any Ajax/PHP code since it jumps out of range of this tutorial. But you should check out the jQuery ajax() function which can speed up backend development tenfold. I have set aside a variable formQueryString which can be used to pass the form data into an Ajax call. Instead I’ll be just finishing up the aesthetics in a small function finalSend();

	// possibly include Ajax calls here to external PHP
	function finalSend() {
		$('.mainCompose').delay(1000).slideToggle('slow', function() {
			$('#composeicon').addClass('sent').removeClass('compose').hide();
 
			// hide original link and display confirmation icon
			$('#composebtn').append('<img src="img/check-sent.png" />');
		});
	}
});

What we want to do now is close our modal box and display a small check icon to let the user know everything is fine and dandy. I’ve used .delay() to keep the modal box open for 1 second before calling our final slideToggle() method. This was added solely for appearances in this tutorial so you can see how it looks waiting for the server to load. If you want to keep your users waiting an extra second you could leave this – but it serves little point otherwise!

After the slide animation I’ve added a callback function. It only includes 2 lines of basic code. First we target the compose icon and change its class from .compose to .sent, then hide it from view. Finally we target #composebtn which is the container div of our icon and append a new check mark icon. Now our users know the message was sent and we’ve barely used any screen real estate!

View Live Demo – Download Source

Conclusion

This tutorial should have gotten you a bit more comfortable building a scalable modal box in jQuery. We have built some great CSS styles and used some basic form processing to enhance the user interaction. There is certainly a lot you could add on but our example lays the ground structure and paves the road for higher possibilities.

If you’re still looking to check out my demo or download the source code you can do so below. Reading code can be confusing after long periods of time, so I recommend downloading the source directly to get a better idea of how this small app functions. Similarly if you have any questions or ideas you can offer them in the discussion area.

Digg is one of the most popular social news networks to date. They garner a massive audience in the millions of members. Recently the company has carved a new direction with the launch of Digg v4. The entire system has been replaced with new statistics and followers/following networking.

One of the most notable changes is in page aesthetics. With the launch of Digg v4 boasts a brand new design with a unique look and feel. In this tutorial I’ll be going over how you can create your own Digg v4 style input form using some basic CSS3 properties.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

We’ll also be using jQuery to manipulate each of the key divisions for a nifty animation effect. We won’t be using any fancy Ajax calls here, although jQuery does support such functionality. The main form we’ll be using is based off Digg’s current submit page.

Live Demo – Download

Working with CSS3 and jQuery

As it may not be implied, there isn’t anything special required to work with CSS3. We don’t need to include any external files or libraries since most modern browsers will support a newer rendering engine. jQuery does have to be included into our file. Lucky for us Google Code hosts all versions of popular scripts online.

Using the Google APIs docs we can start working with jQuery 1.4.1. I’ve included the minified version to save bandwidth in the long run (always a good idea for production environments). Aside from this we’ll also need our core files. In order this will include a simple index.html, global.css for styles and script.js for our jQuery functionality.

Bare Structures

We can first start with our HTML code. It should be fairly straightforward but it doesn’t hurt to break things down into sections.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digg-Style Input Forms</title>
<link rel="stylesheet" type="text/css" href="global.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<Script type="text/javascript" src="script.js"></script>

This is the main heading portion of our HTML document. It contains all meta information along with an XHTML transitional doctype. The only file inclusions we’re working with are CSS and external JavaScript code. Both of these files are stored locally while our jQuery map is included via http://ajax.googleapis.com/.

Next we have some basic code for our core body layout. This will include the Digg heading and logo portion of the page. This also includes our small form with a few input buttons and div boxes.

<body>
<div class="header-wrapper">
 
	<div class="header group"><a href="#" class="sprite digg-logo" id="header-logo">Digg</a></div>
 
</div>
 
<div class="page-wrapper group">
	<div class="column full group">
    	<h1>Submit to Digg</h1>
 
        <div id="submission-form-container">
 
        <div class="flexible-input" id="submission-url-row">
            <input type="text" name="submission" placeholder="Submit a link" class="text-input" id="url-submit-url" value="" />
        </div>
 
        <div id="submission-editor-wrapper" style="display:block;">
    	<div id="submission-editor" class="group">
 
        <div class="submission-detail-field">
            <a class="edit-input" id="edit-title">Edit</a>
            <p id="submit-title">Destiny Islands Blog</p>
            <div class="flexible-input">
                <input type="text" name="submission-title" value="Destiny Islands Blog" class="text-input" id="user-title-text" />
            </div>
        </div>
 
      <div class="submission-detail-field">
            <a class="edit-input" id="edit-description">Edit</a>
            <p id="submit-description">Enter a description</p>
            <div class="flexible-input">
                <textarea class="text-input" rows="4" id="user-desc-text" placeholder="Enter a description">Enter a description</textarea>
            </div>
        </div>
 
  <div class="submission-buttons group">
            <div class="buttons-wrapper">
                <button type="submit" name="submit" class="btn btn-special has-tooltip" id="submit-create">Digg it <span class="sprite digg-it-large"></span></button>
                <a class="float-right" id="submit-cancel">Cancel</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Next it should be simple to cover some of the common CSS queries. There are a few properties and IDs that should be understood well when editing a similar style script. Also we have used a few CSS3 properties new to modern browsers.

Next Generation CSS

Our file starts off simple with resetting margins and heading/body styles. There really isn’t much in the way of fonts, block areas, or other common elements. Since the purpose of our code is tutorial-driven I didn’t bother to create an extensive list of CSS properties.

* { margin: 0; padding: 0; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
 
.header-wrapper{background:#1b5790;}
.header{height:45px;margin:0 auto;max-width:1000px;min-width:800px;padding:5px 20px 0 20px;}
.header.size-medium{min-width:800px;max-width:800px;}
.header.size-simple{max-width:680px;min-width:680px;padding:5px 0 0 0;width:680px;}
.header .digg-logo{float:left;margin:5px 20px 0 10px;}
 
.sprite{background:url('master.png') no-repeat 0 0; display:-moz-inline-stack; display:inline-block; *display:inline; vertical-align:top; zoom:1;}
 
.digg-logo{background-position:0 -109px;display:block;height:30px;text-indent:-999999px;width:62px;}

Notice how there is a small class called “sprite”. This uses a master.png file which holds all icons and graphics for Digg’s layout. This is a spriting technique used to save bandwidth and server calls for background graphics.

Further down the page we have some newer blocks related to CSS3 queries. Many of the form’s input fields and buttons include effects generated in-browser through CSS. As one example all input text fields have -webkit-box-shadow set with an inset fall.

This produces a 3-D effect unlike many seen before. The new web standards generate beautiful tonality and with these CSS properties we can design amazing interfaces.

.text-input,.text-input-flat{background-color:#fff;border:1px solid #80a1c1;color:#80a1c1;font-size:1.16666666667em;padding:7px 9px 6px;margin-bottom:30px;}
.text-input:focus,.text-input-flat:focus{color:#666;}
.text-input{box-shadow:inset 0 1px 2px #d0d0d0;-moz-box-shadow:inset 0 1px 2px #d0d0d0;width:950px;-webkit-box-shadow:inset 0 1px 2px #d0d0d0;}
button{cursor:pointer;overflow:visible;padding:0;width:auto;}
button::-moz-focus-inner{border:0;padding:0;}
label{cursor:pointer;}
.block-label{color:#373529;display:block;font-size:1.16666666667em;font-weight:bold;margin-bottom:8px;}
.block-label .faded{font-weight:normal;}
.inline-label{color:#666;font-size:1.16666666667em;margin-right:10px;}

A bit lower we have a block of code catered to a few classes. submission-detail-field and now-editing contain some interesting properties that should be examined a bit further. Initially all content inside a now-editing class has no display. This is changed using jQuery to manipulate how we should our forms.

Submission forms are set by default to look like labels. Once you click to edit them we change the parent division class to now-editing and remove the display:none; clause. From here we can alternate between the two states with ease.

These CSS styles can work with almost anything. You will notice a few bugs in the system right away. As a short example any buttons or links inside the div won’t show a mouse pointer on hover. Instead you’ll get the text bar used to highlight blocks of text – this can be changed through CSS’ cursor property.

.submission-detail-field{background:#fff;margin-bottom:10px;padding:10px 40px 10px 10px;position:relative;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.submission-detail-field .flexible-input{display:none;}
.submission-detail-field.now-editing{background:transparent;padding:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
.now-editing p{display:none;}
.now-editing .edit-input{display:none;}
.now-editing .flexible-input{display:block;}
#submit-title{color:#356190;font-size:1.33333333333em;font-weight:bold;}
#submit-description{color:#80a1c1;font-size:1.16666666667em;line-height:1.33333333333em;}
.edit-input{color:#578cca;padding:5px;position:absolute;cursor:pointer;right:6px;top:6px;}
.edit-input:hover { text-decoration: underline; }

Building our Script

The JavaScript required is fairly straightforward to work with. Luckily jQuery helps by shaving off many lines of code required to target and manipulate DOM objects.

$(document).ready(function() {

We start with our standard ready event checking for our document to finish loading. This is a more precise way of targeting script development since all we really need is a fully loaded Document Object Model to get moving. Many smaller assets throughout the page will continue loading, but instead of waiting our script is executable instantly.

Inside our ready function parameters we pass a new function() designed to handle event listeners. These will check for a certain event to occur and when it does it’ll execute code set inside of a new function.

This will make more sense with an example, so let’s start with the first input field.

$('.edit-input').bind('click', function() {
    var dic = $(this.parentNode).attr('class');
    var curid = $(this).attr('id');
 
    if(dic == "submission-detail-field") {
        $(this.parentNode).removeClass('submission-detail-field');
        $(this.parentNode).addClass('now-editing');
    }
 
    if(curid == "edit-title") { $('#user-title-text').focus(); }
    else if(curid == "edit-description") { $('#user-desc-text').focus(); }
 
});

The first line is checking our document for any element(s) with the class “edit-input” and binding an event handler to it (or them). The event we’re looking for is a click event which means whenever the user clicks this element we call another function. In our HTML code .edit-input is a class applied to our edit links.

Once the function begins we are pulling the class name from our containing parent element. We are also grabbing the current ID of our edit link since we can determine if we’re editing the story title or description. Further down we have code to swap the two classes making our text field editable.

Afterwards there are a few lines of code needed to auto focus the text field and save any results. We could have used an Ajax call to save the data into a database with each click, however the details to do so range beyond this tutorial’s scope. We would also need support from a backend language such as PHP or Ruby.

$('#user-title-text').bind('blur', function() {
    var txt = this.value;
 
    $('#submit-title').text(txt);
    $(this.parentNode).parent().attr('class', 'submission-detail-field');
});
 
$('#user-desc-text').bind('blur', function() {
    var txt = this.value;
 
    $('#submit-description').text(txt);
    $(this.parentNode).parent().attr('class', 'submission-detail-field');
});

There is a similar bind event tied to our two form field divisions This will check for the text area containing our story description and works in a similar manner as above. Note that you are able to chain multiple event listeners in this manner to create dynamic form scripts in minutes.

Conclusion

This tutorial has given a strong overview of newer CSS3 techniques and classic jQuery functionality. Our final product looks very similar to the Digg submit form without pulling images from a URL which requires Ajax techniques.

All CSS styles and designs have been created in a very similar manner to Digg v4. Better yet, many of the code blocks have been made simple to copy and manipulate into your own page.

As stated previously I have updated both the live demo code and offered a .zip file for download. You can check out my Digg demo code here on DesignShack and also download the archive for your own works. If you have any questions/comments feel free to offer your ideas in the discussion area below.

It may sound like a lot of work but with jQuery and Zoomooz.js, it’s a snap! I’ll walk you through the process step by step as we build a stunning zooming thumbnail gallery.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What We’re Building

Live Demo: Click Here

Zoomooz.js: Basic Introduction

When working with new libraries, it’s always best to start out with a dead simple example, just so you can get a feel for how everything works. With this project we’ll build a basic page to test out the zooming functionality of the script, then move onto a more practical example by creating a full on thumbnail gallery.

HTML: The Inclusions

This project has a ton of stuff to include in the head portion of your HTML. The first thing you want to do is head over to the Zoomooz.js homepage and download the library. You’ll see that it really contains not one but several JavaScript libraries. Luckily, in the download you’ll find instructions for running a script to combine and minimize everything so it’s not so big and messy (I’ll leave this step to you).

With that in mind, our little experiment will require the following code to begin:

<head>
	<title>Zooming Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
	<script type="text/javascript" src="sylvester.js"></script>
	<script type="text/javascript" src="purecssmatrix.js"></script>
	<script type="text/javascript" src="jquery.animtrans.js"></script>
	<script type="text/javascript" src="jquery.zoomooz.js"></script>
</head>

The JavaScript

Next up, copy and paste the script below into your HTML. As you can see, what it does is target the class “zoom” and applies the “zoomTo” method from the library. Then, we apply the same thing to the body, which allows the user to click outside of any element to zoom back out to the normal level.

$(document).ready(function() {
	$(".zoom").click(function(evt) {
		evt.stopPropagation();
		$(this).zoomTo();
	});
	$(window).click(function(evt) {
		evt.stopPropagation();
		$("body").zoomTo();
	});
	$("body").zoomTo();
});

Don’t sweat it too much if you don’t understand this. Just keep in mind that we’ll need to apply the “zoom” class to elements that we want to be zoomable. This same exact snippet will be applied in both of today’s projects so feel free to just copy it over.

The HTML

Next, we want to set up a basic testing ground. To do this, we need to create a container, an outer div and an inner div. The container may seem arbitrary but by including it and setting a width/height, it helps the zooming effect work properly on the outermost element.

<body>
	<div id="container">
		<div id="outer" class="zoom">
			<div id="inner" class="zoom">
				<p><a href="#">Click here to zoom</a></p>
			</div>
		</div>
	</div>
</body>

Also notice that we’ve applied the “zoom” class to both the outer and inner divs. The link at this point is really just a dummy element to help guide the user. The script works perfectly fine without it.

The CSS

Next, we apply sizes and positioning to each element. Again, a defined container size makes the zoom function properly, as does the “position: absolute” statement on the “inner” div. The script can be a little quirky so make sure you get these items right.

#container {
	width: 800px;
	height: 500px;
	margin: 0 auto;
}
 
#outer {
	width: 400px;
	height: 200px;
	background: #aaa;
	margin: 50px auto;
	padding: 70px;
}
 
#inner {
	width: 400px;
	height: 200px;
	background: #eee;
	margin: 0 auto;
	position: absolute;
}

Text CSS

Finally, here we just toss in some basic text styling for the paragraph along with a hover state. Again, feel free to ditch the link completely.

#inner p {
	text-align: center;
	font: 25px/200px Helvetica, sans-serif;
}
 
#inner p a {
	color: #000;
	text-decoration: none;
}
 
#inner p a:hover {
	text-decoration: underline;
}

Demo

With that, our simple demo is all finished. Launch the demo page to see it in action. Notice that clicking on each div gives you a different zoom level and clicking out in the body zooms you all the way out.

Zoomooz.js: Thumbnail Gallery

Using this same technique, we can build an awesome thumbnail gallery with a zoom in effect. It’s important to note though that this plugin probably works best for elements rendered with the browser. When we use it for images, as we will below, the unfortunate reality is that you have to load everything in at its zoomed-in size.

So, despite having a page full of small thumbnails, we actually load in a page full of large images, which can take several seconds depending on the user’s connection speed.

Despite this limitation, it’s still fun to push things to the limit and see what’s possible.

HTML

The HTML for this project is actually going to be super simple. I start out with a div containing some descriptive text, basically just a quick header and paragraph tag to explain what’s going on. Next, I created a large unordered list containing the images. That’s pretty much it!

Notice that I’ve applied the “zoom” class to both the “gallery” div as a whole and to each image within the div. This will give us two levels of zooming to play with. The library is intelligent enough to automatically handle relative zoom levels based on parent/child relationships.

Also, make sure you grab the head code and JavaScript from the previous example. I’m using the same exact setup, only my body HTML and CSS will be changing.

<body>
 
	<div id="headline">
		<h1>Zoom Gallery</h1>
		<p>Click on an image below to zoom into it, then click outside to zoom out. Pretty neat eh?</p>
	</div>
 
	<div id="gallery" class="zoom">
		<ul>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/1"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/2"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/3"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/4"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/5"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/6"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/7"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/8"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/9"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/city/10"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/food/1"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/food/2"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/food/3"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/food/4"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/food/5"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/food/6"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/food/7"/></li>
			<li class="zoom"><img src="http://lorempixum.com/600/600/food/8"/></li>
		</ul>
 
	</div>
</body>

Headline CSS

Next, we want to style the headline to look decent. Here I center-aligned the text, added sizes and line-height and set up some font-families.

* {
	margin: 0;
	padding: 0;
}
 
/*Text Styles*/
 
#headline {
	text-align: center;
	margin: 20px 0;
}
 
h1 {
	font-family: 'Arvo', Georgia, Times, serif;
	font-size: 50px;
	line-height: 65px;
}
 
p {
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 25px;
}

Notice that I’ve used “Arvo” and “PT Sans”, both of these are Google fonts and require some extra code back in the HTML, so if you want to use them too, just add this code into the head portion of your document:

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

With that, your headline should look something like this:

Gallery CSS

Now it’s time to finish off our project by styling the gallery. First, we want to style just the “gallery” div, which serves as the container for our thumbnails. I gave it a width of 720px, a height of 370px and a gray background color. I also included a little padding so that the thumbnails don’t bump up against the edges and a margin of “0 auto” to center the div horizontally (this only works if you specify a width).

/*Gallery Styles*/
 
#gallery {
	width: 720px;
	height: 370px;
	margin: 0 auto;
	padding: 10px;
	background: #383131;
}

After you’re done styling the gallery container, it’s time to make our big list of images conform to a grid. To do this, declare “none” as the list-style-type and float the “li’ elements left. Also notice the positioning context and the hover effect. For the latter of these, I dropped the margins upon hover so that the border wouldn’t affect the layout. So to start, each thumbnail has a margin of 10px, then on hover a thumbnail has a margin of 7px and a 3px border (7+3=10).

/*List Styles*/
ul {
	list-style-type: none;
	position: absolute;
	width: 720px;
}
 
#gallery ul li {
	float: left;
	margin: 10px;
	background: white;
	height: 100px;
	width: 100px;
}
 
#gallery ul li:hover {
	border: 3px solid white;
	margin: 7px;
}
 
#gallery ul li img{
	height: 100px;
	width: 100px;
}

With that, we’re all done! Click the image below to launch the demo.

Conclusion

Today we used HTML, CSS and JavaScript synergistically to create a crazy web gallery that zooms way into a thumbnail when you click. As we showed in the test demo, this same effect can work on any element you want!

We’ve barely scratched the surface of what Zoomooz.js can do. Stop by the project page to see how to do even more with this awesome plugin.

Along the way we’ll be using some extremely basic HTML, CSS and jQuery. Open up a text editor and follow along to build your own!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Inspiration

I was recently browsing through our awesome design gallery and came across Jessica Kripp’s photography portfolio, shown below. I was instantly impressed with the sort of photo slideshow wall that occupied the homepage.

Here we have not just one, but three distinct photo slideshows running independently, yet designed in a synergistic fashion as a single unit. It’s a really cool effect that I’ve never seen before. It may be a little processor intensive, but it’s still quite fun.

Today we’re going to jump in and build one of these to see how it’s done. We’ll be using HTML, CSS and jQuery, but don’t let any of that intimidate you, it’s all very easy and will be perfect for any beginners.

Step 1: Basic HTML

The simplest way to approach this project is to get the basic page layout and design work out of the way before we start playing with the JavaScript. What that means is that we’ll design the page with static images and then go back and add in the slideshow functionality.

To begin, create a basic container followed by three divs, each containing one image. I know, we’re already getting a little div heavy, but the jQuery plugin that we’re going to be using later for the slideshow requires that each of these images has its own parent container.

<div id="container">
	<div id="bigPhoto">
		<img src="http://lorempixum.com/800/300/city/1" />
	</div>
	<div id="smallPhoto1">
		<img src="http://lorempixum.com/400/200/city/4" />
	</div>
	<div id="smallPhoto2">
		<img src="http://lorempixum.com/400/200/city/7" />
	</div>
</div>

You might notice that my images seem a little odd. I’m using LoremPixum, an awesome new service that allows you to insert placeholder images of any size. In the above code I’ve grabbed three images: one at 800x300px and two at 400x300px.

Step 1 Preview

At this point, your page should just contain three images stacked on each other like so. Next we’ll style this up to look pretty.

Step 2: Basic CSS

First up, let’s add some basic body styles. Here I’ve tossed in the most basic of resets, colored the background and centered the container div. For the container, I’ve given it a width equal to that of my largest image, offset it 50px from the top of the page and set the left and right margins to “auto”, which centers the div horizontally.

* {
	margin: 0;
	padding: 0;
}
 
body {
	background: #291616;
}
 
#container {
	width: 800px;
	margin: 50px auto;
}

Next up, we style the photo divs. The most important thing here is that I set the float of the smallPhoto1 to left and that of smallPhoto2 to right. This will ensure that they flow correctly and bump right up against each other (if you still have layout issues, experiment with a clearfix div). I also added in height values for each. Long-term these don’t seem to be necessary but I was having some layout issues at this stage without them.

#bigPhoto {
	height: 300px;
}
 
#smallPhoto1 {
	height: 200px;
	float: left;
}
 
#smallPhoto2 {
	height: 200px;
	float: right;
}

Step 2: Preview

After the CSS above, your page should look nice and clean with a dark background and a tight photo grid as shown in the preview below.

Step 3: Third Party Tools

Now that our page is basically finished as far as layout is concerned, it’s time to get ready to make the page more dynamic. To do this, we’ll need to load in two JavaScript tools.

The first is a library that requires no introduction. jQuery is everyone’s favorite JavaScript extension that generally makes life easier whether you’re creating complex animations or simply want a better way to target specific elements.

To make sure I have the most current version of jQuery, I always jump over to ScriptSrc, where you simply click a button to copy the latest build’s link to your clipboard.

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

The real engine behind our slideshows today will be jQuery Cycle a plugin that makes it super easy to build jQuery slideshows on the fly.

We’ll see how to implement this in the next step. For now you can include the following script in your header.

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

Modernizr

If, like me, you like to use HTML5 and CSS3, you’ll want to also toss in Modernizr just to make sure everything stays as compatible as possible with IE.

Step 4: Bringing the Slideshows to Life

Implementing jQuery Cycle is super easy. There are tons of options and effects but for today’s purposes we’re going to use a bare minimum of the available functionality.

To get started, let’s refine our HTML a little. jQuery Cycle will look for anything with the class of “slideshow” and create a slideshow from its children. To accommodate this, we add the slideshow class to our three image divs and add two more images to each. This will make is so that each image cycles through three iterations.

<div id="container">
 
	<div id="bigPhoto" class="slideshow">
		<img src="http://lorempixum.com/800/300/city/1" />
		<img src="http://lorempixum.com/800/300/city/2" />
		<img src="http://lorempixum.com/800/300/city/3" />
	</div>
 
	<div id="smallPhoto1" class="slideshow">
		<img src="http://lorempixum.com/400/200/city/4" />
		<img src="http://lorempixum.com/400/200/city/5" />
		<img src="http://lorempixum.com/400/200/city/6" />
	</div>
 
	<div id="smallPhoto2" class="slideshow">
		<img src="http://lorempixum.com/400/200/city/7" />
		<img src="http://lorempixum.com/400/200/city/8" />
		<img src="http://lorempixum.com/400/200/city/9" />
	</div>
 
</div>

Next, we want to define some specific functionality for each of the three slideshows. This is done by targeting each ID with jQuery and then applying a few specifications. Below I’ve set a delay, speed and effect for each section, feel free to play with these so that you have something unique.

For now, the only property I’ve changed between the three is delay. I did this to create a sort of staggered effect with the image changes. By default, each slideshow would progress at the same rate, as with the photography site we saw at the beginning of the article. However, I thought it seemed a little more interesting to have the slideshows offset.

<script type="text/javascript">
$(document).ready(function() {
 
    $('#bigPhoto').cycle({ 
       delay: 300,
       speed: 2000,
       fx: 'fade'
    });
 
    $('#smallPhoto1').cycle({ 
    	delay: 3000,
    	speed: 2000,
    	fx: 'fade'
    });
 
    $('#smallPhoto2').cycle({ 
        delay: 5000,
        speed: 2000,
        fx: 'fade'
    });
});
</script>

Step 4 Preview

With that, your triple slideshow should be up and running! Click here or on the image below to see a demo.

Step 5: Finishing off the Page

With that, we could be finished, but our page is looking a little plain so let’s add a little bit of interest shall we? The first thing I want to do is add a simple headline.

Headline

For the headline HTML, all we have to do is throw in an h1 right above our bigPhoto div.

<h1>Design Shack: Slideshow Example</h1>
 
<div id="bigPhoto" class="slideshow">
	<img src="http://lorempixum.com/800/300/city/1" />
	<img src="http://lorempixum.com/800/300/city/2" />
	<img src="http://lorempixum.com/800/300/city/3" />
</div>

Next up, we throw in some basic CSS to style the headline. I wanted to make the font as thin as possible so I threw in CSS-Trick’s Better Helvetica setup along with a text-shadow.

The text-shadow is my own trick for creating thinner typography. It turns out, if you apply a text-shadow that’s the same color as the background, the result is a slightly thinner looking font. If it only works in a few browsers, no biggie, the other styles are still enough to make the type look nice.

/*Headline Styles*/
h1 {
	color: #00bdf2;
	margin: 0 0 20px 0;
	font-size: 40px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	text-shadow: #291616 0px 0px 5px;
}

Below you can see the result of our efforts. It’s not much, but when combined with the next step it will definitely help create a more finished-looking product.

Photo Tag

The next thing I want to do is add a label over the top of the slideshow. This is an important exercise because jQuery Cycle has some weird effects on the page hierarchy that make this a bit difficult.

The first step here is to create a new div that will serve as our little tag. This requires only a single line of HTML right under the h1 that we just set up.

<h1>Design Shack: Slideshow Example</h1>
<div id="slideshowTag">Photographic Slideshow Wall</div>

Now let’s add some styling. We’ll make the background the same color as the the headline for consistency and add some padding to give it some weight. Also, I set the position to absolute and gave it some negative margin so that it will stick out from the slideshow a little on the left side. Finally, I added a basic box shadow to help it show up on different colors.

/*Slideshow Tag*/
#slideshowTag {
	background: #00bdf2;
	color: #fff;
	font: 20px Helvetica, sans-serif;
	margin: 50px 0 0 -10px;
	padding: 15px;
	position: absolute;
 
	/*Shadow*/
	-webkit-box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
 
}

The problem here is that, even though the tag is higher in the HTML hierarchy, it ends up getting covered up by the slideshow. You can only catch a quick glimpse of it between slides:

This is easy enough to fix with a little z-index magic. Simply set the z-index of the tag to “1″ and that of the bigPhoto div to “-1″. This will make is so that the tag sits on top of the slideshow.

/*Slideshow Text*/
#slideshowTag {
	background: #00bdf2;
	color: #fff;
	font: 20px Helvetica, sans-serif;
	margin: 50px 0 0 -10px;
	padding: 15px;
	position: absolute;
	z-index: 1;
 
	/*Shadow*/
	-webkit-box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
 
}
 
/*Slideshow Photos*/
#bigPhoto {
	height: 300px;
	z-index: -1;
}

Finished Product: Live Demo

With that, we’re all done! Feel free to have a look around the live demo to see our creation in action.

Conclusion

Hats off to the designer behind Jessica’s site for the cool idea of combining multiple slideshows. Duplicating this effect made for a great tutorial on using HTML, CSS and JavaScript to create simple but stunning slideshows.

Be sure to push beyond the example above and experiment with different layouts and effects. Obviously, as you add more slideshows the more your page will get bogged down but otherwise you’re limited only by your creativity!

First, it’s not always easy to find a quality, free slideshow template to start from, and if you’re not a Flash developer, this could lead to significant costs. Secondly, the world is in quite the love/hate relationship with Flash at the moment, with many developers switching to JavaScript, CSS3 and HTML5 where possible.

So today we’re going to build a beautiful, Javascript-powered photography site with a full-screen slideshow. Literally all of the heavy lifting will be done by an awesome free jQuery resource so our job will be mostly customization. Let’s get started!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What We’re Building

It’s always good to see where it is that you’re going before you get there, click the link below to see a live demo of the page we’ll be building today.

Click for Live Demo

Getting Started: Finding the Perfect Plugin

The great thing about working with jQuery is the immense amount of free resources out there that you have to work with. Other developers have gone before you and spent hours creating quality plugins that you can use completely free of charge.

We’ve addressed the idea of a full-screen image background on Design Shack in the past, but the plugin we used had no slideshow feature so we were pretty much stuck with a static image. Photography websites frequently want to show off as much of their work as possible right off the bat, and nothing makes a strong impression quite like a giant slideshow that fills the browser window.

After no small amount of searching, I came across a simply fantastic plugin from the guys over at BuildInternet called Supersized, you may have noticed this plugin in this week’s freebie roundup.

If you want to follow along, go download this plugin and duplicate the “Default.html” file located inside. There are a few sample HTML files included and this one will provide the best place to start for our project.

Next, open up this file in your browser to get a sense of what we have to work with. As you can see, there’s already an awesome full-screen slideshow in place and some really nifty controls at the bottom.

I actually really love these controls but to show you that you’re not stuck into this design, we’ll be scrapping those and letting the slideshow run autonomously. We’ll get into the usability implications of this later. First, let’s put aside the plugin for now and design some slides.

Slide Design

The layout of our basic homepage will be almost completely taken up by our photo slideshow. If you have good photography to work with, your job as a designer has the potential to become significantly easier because you need only leverage that imagery properly.

To make things easy, we’ll throw in what little message we want into the slides. It won’t be live text so SEO definitely suffers a bit, so you can incorporate actual text and lay it over the slides if you think this is a major issue. Basically you would just create an absolutely positioned div, fill it with some text and make sure it stands out properly against your background images. We’ll see this process in action later with our navigation menu.

To begin, we’ll create the content slides. These basically just help introduce the site and don’t really contain any information that you wouldn’t be able to find on the About page in a more user friendly format. These slides will be dispersed among the photo slides and will help break that content up a little.

Create a new 1200px by 800px document in Photoshop and fill it with #0e1120. Next, apply a really heavy Inner Shadow to give it a nice vignetted feel like in the image below.

Now fill this slide with some text and a logo to introduce the site. In the slide below I created a simple welcome message. For the smaller type I used Trajan (cliche but effective) and for the logo I used a free font called Angelic War. You can download this font at DaFont.com.

Notice that I gave a slight Outer Glow to the logo. this helps set it apart from the rest of the text and produces a nice effect on the dark background.

Next, I duplicated this design twice and placed alternate messaging on these slides discussing the other services offered by the photography company. The text closely follows the same formatting as the first slide. Repetition is a simple and very important aspect of design and you should always look for ways to implement it.

Choosing the Photos

For the rest of the slides, we’ll obviously want to use some photography. After the first intro slide (welcome/wedding), we’ll place some wedding photos. After the second intro slide (engagement) we’ll place some photos of happy couples and after the third intro slide (family/senior), we’ll place some family photos.

Our photography business is fictitious, but I just happen to be a photographer so I’ll grab some images from my own portfolio to use as filler for this project. I chose the following six images and saved each out at the same size as our intro slides.

Scrapping the Slideshow Controls

Now, making the slideshow completely autonomous might freak out the usability police a little. If you disagree, simply leave the controls there! Deeper into the site where the individual project slideshows would be, I would definitely place controls so clients and potential customers could easily go back and forth and select specific images. However, on the home page I just want a nice and simple scrolling message that repeats itself without any necessary user interaction.

To accomplish this, go into the Defautl.html file and comment out or delete everything below the “supersized” div and above the closing body tag. The following code should be all that is in your body.

<body>
 
<!--Loading display while images load-->
<div id="loading">&nbsp;</div>
 
<!--Slides-->
<div id="supersized"></div>
 
</body>

Inserting Your Own Slides

Now scroll up to the upper portion of the HTML page where all of the script tags are located. Here you will find the controls for the slideshow, it should be easy to spot the list of slides. Notice that the current slides have titles, links, etc. We don’t want our image to link anywhere and we scrapped the bottom bar that showed the title so we can drastically simplify this section and list out our slides as follows:

$(function(){
	$.fn.supersized.options = {  
		startwidth: 1200,  
		startheight: 800,
		vertical_center: 1,
		slideshow: 1,
		navigation: 1,
		thumbnail_navigation: 1,
		transition: 1,
		pause_hover: 0,
		slide_counter: 1,
		slide_captions: 1,
		slide_interval: 6000,
		slides : [
			{image : 'slides/slide-1.jpg'},
			{image : 'slides/slide-2.jpg'},  
			{image : 'slides/slide-3.jpg'},
			{image : 'slides/slide-4.jpg'},
			{image : 'slides/slide-5.jpg'},
			{image : 'slides/slide-6.jpg'},
			{image : 'slides/slide-7.jpg'},
			{image : 'slides/slide-8.jpg'},
			{image : 'slides/slide-9.jpg'}
		]
	};
 $('#supersized').supersized(); 
});

Notice that I’ve set the “startwidth” and “startheight” to the size of our slides. I’ve also set the “slide_interval” to 6000. This will slow down the slideshow a bit from its default setting. You can leave the rest of these settings right where they are, just make sure your slides are listed at the bottom and that your slide JPGs are located in the slides folder.

Navigation HTML

Now your slideshow should be up and running with your very own custom slides. However, it’s not a homepage until you have a way to find the rest of the content. To finish off our site, we’ll build a simple navigation menu and place it at the bottom of the page where the slideshow controls used to be.

The HTML here is super simple, just throw an unordered list below the “loading” div in your body.

<body>
 
<!--Loading display while images load-->
<div id="loading">&nbsp;</div>
 
<div id="navBar">
	<ul>
		<li><a href="default.html">ShutterPics Photography</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Wedding</a></li>
		<li><a href="#">Engagement</a></li>
		<li><a href="#">Family</a></li>
		<li><a href="#">Prices</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
 
</div>
 
<!--Slides-->
<div id="supersized"></div>
 
</body>

Navigation CSS

Now, we want to style this to be a bar along the bottom. Fortunately, there already was a bar along the bottom when we first downloaded the plugin so we can just steal some of this styling and tweak it for our own purposes. Below, I made the bar 40px high and set its color with RGBa so I could have some transparency.

#navBar {
	width:100%; 
	height: 40px; 
	position:absolute; 
	bottom:0; 
	overflow:auto; 
	z-index:4;  
	background: rgba(0, 0, 0, 0.8);
}

Next, we need to apply lots of styling to different parts of the unordered list. We need to style the list itself, float the list items so they appear inline and define the link/hover colors.

#navBar ul {
	list-style: none;
	margin-left: 60px;
	line-height: 40px;
	font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px;	  
}
 
#navBar ul li {
	float: left;
	margin-right: 30px;
}
 
#navBar ul li a {
	color: #fff;
}
 
#navBar ul li a:hover {
	color: #52caf5;
}

Now, for my final trick, I want to style the first element in the list a little differently. This will serve as an ever-present identifier for the site and a link back to the homepage. By styling the first child of the list, I can give this element different margins and a different type treatment to set it apart from the others.

#navBar ul li:first-child {
  margin-right: 60px;
  font-family: Georgia, sans-serif;
  font-variant: small-caps;
  font-size: 18px;
}

You can see the effect of this in the image below. The item still serves the same basic purpose as everything else in the list, it’s simply given special visual treatment because it’s also the name of the site.

Conclusion

With that, we’re all finished. From here you would code out the rest of the pages to match the design you’ve setup on the homepage. Once again, be sure to stop by the demo to see it in action.

Leave a comment and let us know how you would improve what I’ve done here. I’d love to hear what you’d change and what you think should stay the same. Thanks for reading!

There are a few random plugins for tooltips and Twitter widgets but most of the resources you’ll find below help with image presentation. Whether you want a 3D carousel or a fullscreen slideshow, there’s something here for you!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Cloud Carousel – A 3d Carousel in Javascript

“There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist, the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript’s favour, I have created this jQuery carousel plugin.”

ColorBox

“A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4. Supports photos, grouping, slideshow, ajax, inline, and iframed content. Appearance is controlled through CSS so users can restyle the box. Completely unobtrusive, options are set in the JS and require no changes to existing HTML.”

JQuery Cycle Plugin

“The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.”

Easy Tooltip – jQuery plugin

“I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release yet another plugin that came from my personal need – jQuery tooltip. I already claimed this to be the simplest tooltip ever. I made some modifications to it so now has some extra features.”

Fullscreenr

“So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image? It is possible with jQuery and the fullscreenr plugin on this page! You can find a demonstration here and as you can see it works perfectly in all javascript enabled browsers. Note that Internet Explorer needs some extra code to enable the transparent png used for the raster over the background image. If you want to add this code I would like to refer you to unitpngfix, but of course you could just not support IE6.”

Facebox

“Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.”

jCarousel

“jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).”

jTweetsAnywhere

“A jQuery Twitter widget with @Anywhere support and lots of customizable options.”

Nivo Slider

“The world’s most awesome jQuery slider. Have a look at the demos to get an idea of what can be done with the Nivo Slider or check out the showcase of sites using the Nivo Slider.”

Supersized – Full Screen Background/Slideshow jQuery Plugin

“Resizes images to fill browser while maintaining image dimension ratio. Cycles Images/backgrounds via slideshow with transitions and preloading. Navigation controls allow for pause/play and forward/back.”

What Did We Miss?

Now that you’ve seen our little collection of jQuery plugins, leave a comment and let us know what plugins you couldn’t live without.

Be sure to check back next week for more Weekly Freebies from Design Shack!

We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build. Let’s get started!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Demo

Just so you can get a feel for what we’re building, check out the demo below. To see the jQuery in action, resize the browser window and watch how the image adapts dynamically.

View the demo

Now that you’ve seen how it works, let’s build it!

Step 1: Grab Fullscreenr

The first thing you’re going to want to do is go to the Fullsreenr website and download a copy. Grab the JS files and throw them into a folder with a basic website framework: html, css and images folder.

Step 2: Start the HTML

To begin the HTML, thrown in the code for an empty page and add the references for the stylesheet and the two JavaScript files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Design Shack + Fullscreenr</title>
	<!-- Stylesheet -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<!-- JavaScript codes -->
	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Step 2: Select a Background Image

Before we insert the code for placing our background image, we’ll need to know the size. Which of course means we need to find an image.

I grabbed the image below by Faisal.Saeed on Flickr Creative Commons. It’s an awesome snowy mountain scene that should make the perfect setting for our site.

Next, I sized the image so that it would be 907px by 680px. These are the dimensions that we’ll use in our next step.

Step 3: Insert the Fullscreenr Snippet

In the demo files of the Fullscreenr download, you should find the following JavaScript snippet to enable the plugin. I’ve customized it a bit with the image dimensions specified above.

<script type="text/javascript">  
	var FullscreenrOptions = {  width: 907, height: 680, bgID: '#bgimg' };
	jQuery.fn.fullscreenr(FullscreenrOptions);
</script>

All you have to do for your own version is change the hight and width to match that of your own image.

Step 4: Body HTML

Next up, there is a chunk of HTML in the demo page that you’ll need to grab. The structure may seem a little funky but really all the developer has done is applied the background image to the body and created a basic container (realBody) for you to then add all the rest of your content to. If you don’t like the div ID names used by the developer, feel free to change them to something more conventional.

<body>
	<!-- This is the background image -->
	<img id="bgimg" src="img/mountains-907x680.jpg" />
 
	<!-- Here the "real" body starts, where you can put your website -->
	<div id="realBody">
 
	<!-- Here the "real" body ends, do not place content outside this div unless you know what you are doing -->
	</div>
</body>

As you can see, all we’ve done here is throw in the background image.

Step 5: Add the CSS

Finally, throw in the CSS below to make everything work properly. This is necessary to make sure your content will scroll correctly and stay positioned properly in the stack.

body {
	overflow:hidden; 
	padding:0;margin:0;
	height:100%;width:100%;
}
 
#bgimg {
	position:absolute;
	z-index: -1;
}
 
#realBody{
	position:absolute;
	z-index: 5;	
	overflow:auto; 
	height:100%;width:100%;
	background: url('../img/raster.png');
}

And with that, you’re done! You should now have a background image that dynamically scales with the browser window. The transition is super smooth and works brilliantly.

The plugin comes with an dotted pattern image overlay, shown below in a zoomed-in view. If you don’t like this effect, simply leave it out!

If you’d like, you can stop here and proceed with your own design. If you’re interested on where to go from here, I’ll finish up with some fun design.

Step 6: Add a Background Div and Header

Now that we’ve got our background image, we want to center a div over the top of it and give it a background fill. We’ll also give it a basic header that I thought seemed appropriate given the snowy background image.

<body>
	<img id="bgimg" src="img/mountains-907x680.jpg" />
 
	<div id="realBody">
		<div id="container">
			<h1>Welcome to Hoth</h1>
		</div>
	</div>
</body>

Next we’ll style these two elements with CSS (insert this in addition to the CSS above).

#container {
	width: 800px;
	height: 1000px;
	margin: auto;
	margin-top: 60px;
	padding-top: 10px;
	background:rgba(0,0,0,.8);
 
}
 
#container h1 {
	color:#fff;
	font-family: 'KitchenpoliceRegular', sans-serif;
	font-size:60px;
	font-weight: normal;
	text-decoration:none;
	text-align:center;
}
 
@font-face {
	font-family: 'KitchenpoliceRegular';
	src: url('KITCHENPOLICE-webfont.eot');
	src: local('‚ò∫'), url('KITCHENPOLICE-webfont.woff') format('woff'), url('KITCHENPOLICE-webfont.ttf') format('truetype'), url('KITCHENPOLICE-webfont.svg#webfontCRDciSXC') format('svg');
	font-weight: normal;
	font-style: normal;
}

This is a big chunk of code but it’s all super basic. First, we gave the container a height and width, then set the margins to auto. This gives us a vertical strip that automatically stays centered on the page. The background color for the container has been applied using rgba. This will give us a nice transparent container that lets some of that nice background image show through.

Next, we used applied some basic styles to the header and customized the font using @font-face. I used a font called Kitchen Police and an @font-face kit from FontSquirrel.

At this point, your page should look like the image below.

Step 7: Add a Header Image

The next step is extremely easy. All you have to do is toss in an image that’s the same width as the container (800px).

<body>
	<img id="bgimg" src="img/mountains-907x680.jpg" />
 
	<div id="realBody">
		<div id="container">
			<h1>Welcome to Hoth</h1>
			<img src="img/walkers.jpg" />
		</div>
	</div>
</body>

And with that your image should fall right into place without any extra styling.

Step 8: Add Some Text

In this step we’re going to add some basic filler text to the page and in the next we’ll add a grid of images. Since the text will hypothetically tie into the images, we’ll throw it all into a “grid” div.

<body>
	<img id="bgimg" src="img/mountains-907x680.jpg" />
 
	<div id="realBody">
		<div id="exampleDiv">
			<h1>Welcome to Hoth</h1>
			<img src="img/walkers.jpg" />
 
			<div id="grid">
				<h2>Good Times on Hoth:</h2>
				<p>Lorem ipsum dolor sit amet...</p>
			</div>
 
		</div>
	</div>
</body>

To style the text, we’ll first add a little margin to the top of the div. Then we apply basic color, size, and positioning to both the h2 tag and the paragraph tag. Notice I used some more @font-face goodness, this time with Lobster.

#grid {
	margin-top: 20px;
}
 
#grid h2{
	color: #fff;
	text-align: left;
	margin-left: 65px;
	font-size: 30px;
	font-family: 'Lobster', sans-serif;
	margin-bottom: 3px;
	font-weight: normal;
}
 
 
#grid p{
	color: #fff;
	text-align: left;
	margin-left: 65px;
	margin-bottom: 3px;
	font-size: 12px;
	font-family: helvetica, sans-serif;
	margin-top: 0px;
	width: 650px;
	line-height: 18px;
}
 
@font-face {
	font-family: 'Lobster';
	src: url('Lobster_1.3-webfont.eot');
	src: local('‚ò∫'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
	font-weight: normal;
	font-style: normal;
}

This should give you a nicely style block of text similar to that in the image below. Now we can move onto the final step!

Step 9: Add the Gallery

To finish the page up, we’ll toss in a simple image gallery that is basically just a grid of nine JPGs. To give the photographers credit, I’ve linked each to the original source images on Flickr.

<body>
	<img id="bgimg" src="img/mountains-907x680.jpg" />
 
	<div id="realBody">
		<div id="container">
			<h1>Welcome to Hoth</h1>
			<img src="img/walkers.jpg" />
 
			<div id="grid">
				<h2>Good Times on Hoth:</h2>
				<p>Lorem ipsum dolor sit...</p>
				<a href="http://ow.ly/35afM"><img src="img/hoth1.jpg" /></a>
				<a href="http://ow.ly/35ah9"><img src="img/hoth2.jpg" /></a>
				<a href="http://ow.ly/35aim"><img src="img/hoth3.jpg" /></a>
				<a href="http://ow.ly/35ajg"><img src="img/hoth4.jpg" /></a>
				<a href="http://ow.ly/35ajY"><img src="img/hoth5.jpg" /></a>
				<a href="http://ow.ly/35alw"><img src="img/hoth6.jpg" /></a>
			</div>
 
		</div>
	</div>
</body>

As the final piece of the puzzle, we’ll toss in some margins and borders to make the image grid look nice and styled.

#grid img {
	margin: 20px 10px 20px 10px;
	border: 3px solid #000;
}
 
#grid a:hover img{
	border: 3px solid #fff;
}

That should space everything and and finish up your page! Feel free to keep going and add in a navigation section, footer, sidebar and whatever else you can think of!

Conclusion

jQuery and the Fullscreenr plugin present the easiest and best-looking solution I’ve found for scaleable background images. If you’d rather try the same effect with CSS, check out Chris Coyier’s methods on CSS-Tricks. Chris presents three possible alternatives, the last of which uses pure CSS and works much better than other CSS attempts I’ve seen.

As always, thanks for reading. If you liked the article give us a tweet, digg or any other social shout out you can come up with!

If you’re not a seasoned web developer, it can be quite intimidating to approach a project where your client is looking for something trendy and interactive such as an Apple-centric slideshow.

Today we’ll teach you how you can create just such a project in mere minutes using some awesome free resources from around the web. We’ll walk you through ten super simple steps so even if you have little to no web experience, this project should be a breeze!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What We’re Building

The purpose of this tutorial is to show you how easy it is to build an awesomely animated, interactive webpage using completely free resources and very little effort to throw them all together. We’ll be using jQuery, a free iPad image and a free image slider plugin to accomplish the following effect.

• Demo Page
• Download Files

Step 1: Start the HTML

The first thing we want to do is get a basic structure for our HTML. Just paste in your typical HTML starter document. I used HTML5 below but you can use something older if you feel that it’s appropriate.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
 
<title>Page Title</title>
 
<link rel="stylesheet" media="screen" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
</head>
 
<body>
 
 	<div id="container">
 
	</div>
 
</body>
</html>

Notice that at this point I’ve included two links: one to a stylesheet and one to jQuery. Make sure you include both of these. Many developers also recommend including a local version of jQuery in case the linked version fails for some reason.

The only real markup we have at this point is a container div. We’ll add more later but for now this is perfect.

Step 2: Download the iPad

Obviously, we’ll need an iPad image. The iPad is simple enough that you could probably create your own fairly quickly, but we’ll just grab a pre-built version to speed up the process.

If you Google “iPad PSD,” the first option that pops up is an amazing free file from Teehan+Lax with not only the iPad itself, but a bunch of UI elements as well.

Download this iPad image and throw it into Photoshop to prepare for the next step.

Step 3: Prepare the PSD

Grab the layers containing only the blank iPad and throw them into a new document with the dimensions set at 883px by 535px. Set the background color to #1b1a1b and size the iPad so that the screen is approximately 460px wide.

To add some visual interest I threw in a shadow and reflection as well. Notice that the reflection fades out before hitting the screen portion. This simplifies things a great deal by canceling the need for a live reflection that updates with every slide.

Step 4: Start the CSS

Now that we’ve got our iPad background image, start a style.css file and set the iPad image as the background.

* {
	margin: 0; padding: 0;
}
 
body {
	background-color: #1b1a1b;
}
 
#container {
	width: 883px;
	height: 535px;
	background-image: url(images/ipad.jpg);
	overflow: hidden;
	margin: 30px auto;
}

As always, I’ve thrown in a basic CSS reset to make sure all the browsers are on the same page with margins and padding. I’ve also set the background color to the same color we had in our PSD. Finally, I threw in the iPad image and centered it on the page by setting a width and using “auto” for the margins.

Progress Preview

At this point your live preview should look something like the image below. As of yet there is only a centered iPad on a solid background but it’s already starting to look quite nice!

Step 5: Add an Image

Before we import the actual slideshow, we’ll want to get our positioning worked out with a single static image. Doing this now just makes things easier on us so we don’t have to position an active item that may or may not be working properly.

First you’ll obviously want to create or grab an image from somewhere. I just used a pic of my ugly mug set to 460 x 345. Throw your image into a “slider” div inside the container.

<div id="container">
	<div id="slider">
		<img src="images/slide-a.jpg" alt="" />
	</div>
</div>

Next, scoot the image into place with the following CSS. If your images are sized differently than mine you’ll have to tweak the margins to make everything line up properly.

#slider {
	width: 460px;
	height: 345px;
	margin-left: 212px;
	margin-top: 79px;
}

Progress Preview

With that little bit of coding your page should really start to take shape. My iPad looks much livelier with a full-color image thrown over the top of it.

Step 6: Download the Nivo Slider

jQuery makes building custom image sliders a breeze, but prebuilt jQuery plugins like Nivo Slider really strip down the amount of necessary work to around zilch and can often provide a beautiful and professional final result.

Go download a free copy of Nivo Slider. This easy to implement slider has nine transition options, supports captions and links, and is fully customizable. It’s a perfect example of the kind of quality freebies you can find on the web if you know where to look.

Grab the following two files from the download and throw them into the root directory of your page:

• jquery.nivo.slider.pack.js
• nivo-slider.css

Remember to link to these files in the head portion of your HTML. You should now have four linked files as in the code below:

<link rel="stylesheet" media="screen" href="style.css" />
<link rel="stylesheet" media="screen" href="nivo-slider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Step 7: Add More Images

Now that we have our slideshow, we’ll want to toss in a few more images. Nivo will automatically grab any images contained in your slider div so we don’t have to do anything special here but drop them in.

<div id="container">
	<div id="slider">
		<img src="images/slide-a.jpg" alt="" />
		<img src="images/slide-b.jpg" alt="" />
		<img src="images/slide-c.jpg" alt="" />
		<img src="images/slide-d.jpg" alt="" />
		<img src="images/slide-e.jpg" alt="" />
	</div>
</div>

Adding these will make your preview look all messed up but fret not, the next step will resolve this problem.

Step 8: Paste in the JavaScript

The Nivo Slider has a number of different settings that you can customize. To get a good feel for what these are, I recommend inserting the expanded example from the download page that includes all the available options.

This action equates to throwing the following code into your HTML.

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
		slices:15,
		animSpeed:500, //Slide transition speed
		pauseTime:3000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
		controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});
</script>

As you can see, there are options for setting the speed, transitions, hover controls, thumbnail previews and more. For our purposes, the settings above will work perfectly. Notice that the script has been set to run when the window loads up.

Progress Preview

At this point you should have a functioning slideshow inside of your iPad! This is awesome but there are still a few things we need to address. Namely, when we hover over the iPad we get some ugly text controls that would be much nicer as images. We’ll address these in the next step.

Step 9: Styling the Controls

Technically, we should probably create all these styles ourselves because the good folks providing the Nivo slider encourage us to do so. However, to wrap up this tutorial quickly, we’ll just use the sample stylesheet that they provide here.

Included in the download is a few images and yet another stylesheet to include in your HTML titled “custom-nivo-slider.css.” Rather than linking to a million different stylesheets, in practice it would probably be a good idea to combine these to avoid overlap.

The key thing you’ll need to do with this stylesheet is ditch the very first section of styles that appear as they will interfere with the positioning that we’ve already implemented. Below you can see how I commented out everything but the background color and loading graphic.

#slider {
/*	position:relative;
	margin:30px 30px 60px 30px;*/
	background:#1b1a1b url(loading.gif) no-repeat 50% 50%;
	/*-moz-box-shadow:0px 0px 10px #333;
	-webkit-box-shadow:0px 0px 10px #333;
	box-shadow:0px 0px 10px #333;*/
}

Step 10: Check Out The Final Product!

As you can see below, that final set of styles really finished off the slideshow nicely. We now have arrows that take us forward and backward as well as a horizontal list of bullets to navigate and track the progress of the slideshow.

Be sure to check out the live demo to see it in action. Also spend some time on the Nivo Slider site and browse the various enhancements that are available.

What Else Would You Like to See?

This tutorial sprouted from me finding some great resources on the web and wanting to share them with our readers. Leave a comment below and let me know if there are any other jQuery plugins or web freebies that you’d like to see demonstrated here and I’ll see if I can whip up a quick tutorial to get you going.

Wanna share the article? Here’s a handy shortened URL that you can paste into Twitter or Facebook: http://ow.ly/2xtcZ

This post will briefly point you to 27 great utilities that not only help you store your favorite snippets both locally and in the cloud, but also make sharing with others a breeze. Enjoy!

Full-Scale Storing and Sharing

The sites below are a great way to build a personal code repository that you can access from anywhere and easily share with others. They’re also great sites to find helpful snippets in a number of languages.

I haven’t used them all in-depth but my preferred site is Snipplr. I really like the interface, the huge library of snippets, the versioning options, etc. They’re definitely all worth checking out though.

Snipplr

“With Snipplr you can keep all of your frequently used code snippets in one place that’s accessible from any computer. You can share your code with other visitors and use what they post, too. Did we mention that Snipplr works with TextMate? Yeah, we rock.”

CodeSnippets

“Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)”

Home | byteMyCode

“byteMyCode is a project designed to make the task of sharing source code easier. We have modeled a community around making it easy to find, share, revise, comment on, and rate code snippets.”

SnippetsMania

“Organize and share your code snippets. Snippetsmania is a free accessible collection of code snippets. It currently supports 34 different programming languages. The database holds a total count of 99 code and programming snippets and examples.”

codesnipp.it

“codesnipp.it is a social site for developers to post their snippets, follow and share code with other devs and get coding help. ”

Paste and Share Quickly

The apps below are similar to those we just looked at but place much more emphasis on fast code sharing as opposed to organized code storage. Most just require a copy and paste and you’re ready to go!

Snipt.org

Share source code on Twitter and the Web.

New – Pastie

“Clean user interface with sensible defaults. Need to nickname, describe, set tab settings and more? You’ll have to look elsewhere. One text box, paste, done. Simple.”

Smipple – Social Code Snippets

“Smipple is a social service for saving, storing, organizing, and sharing snippets of code with your friends and coworkers. Make friends. Improve your coding skills. Earn bragging rights.”

Gist – GitHub

“Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.”

Copy Paste Code

“Copy Paste Code allows you to publish your code with colored syntax for most popular programming languages out there. After publishing you can share your code to colleagues and friends, and they can debug and use your code snippets.”

CodeTidy

A quick and easy, no-frills code sharing utility.

Ideone

“Ideone is something more than a pastebin; it’s an online compiler and debugging tool which allows
to compile and run code online in more than 40 programming languages.”

Pastebin

One of the most popular tools of this kind, Pastebin supports a huge list of languages.

Mystic Paste

PasteSite.Com – Easy Usable Pastebin

“PasteSite.Com is a tool which allows you to submit a sample of code which can then be viewed with syntax highlighting from the website.”

Slexy 2.0

“Slexy.org is a powerful, slick, and sexy pastebin designed with the user in mind. Use Slexy.org to paste errors for debugging, show off your code or your tech specs, or share anything else with other Internet users worldwide.”

Mac Applications

In my search for online snippet sharing tools I came across a number of Mac applications that are great for building code libraries so I figured I’d toss them in as well. Check out jCodeCollector and Snippely first if you’re looking for a solid free option.

Snippet: $12.95

“Easily create Snippets from selected text anywhere.”

Snippets: $39.95

“Snippets is a powerful application for Mac OS X that stores the most valuable pieces of code you can reuse in different projects many times.”

Snippely: Free

“Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location. A snippet is a collection of one or more pieces of code and notes. Snippets are stored in groups for organization and quick retrieval.”

jCodeCollector: Free

“jCodeCollector is an application that helps you to manage your code snippets. Using jCodeCollector you can: store, tag and comment your snippets, find quickly the code you need.”

Code Collector Pro: €20

“When you spend all day writing code, it is only natural to start having feelings of déjà vu. Didn’t you write that same few lines of code a few days ago, and again a few days before that? Why are you wasting time re-writing that code again and again? Code Collector Pro is the answer, giving you the ability to store snippets of code and retrieve them with a few keystrokes”

MySnippets: $14.95

“All of your snippets, the files you need, drafts, parts of a text, CSS templates and anything else you still need in order to deliver outstanding results: All of that is now just one single click, one single keystroke away. ”

Droplr: Free

Unlike the apps above, Droplr is not the ideal place to store code snippets. However, among other things, it is a super easy way to share snippets of code. Just select some text and drag it to your menu bar. A URL will automatically be placed in your clipboard for you to paste in anywhere you want.

Text Expanders

One special breed of snippet applications is those that allow you to type a few characters which then automatically expand into a larger chunk of text. I’ve recently started using TextEpander and it has completely revolutionized the way I work. Now I can’t imagine trying to code without it!

I’ve searched for hours in vain in an attempt to find a free text expanding utility, leave a comment if you know of one.

TextExpander: $34.95 (Mac)

“TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings and images.”

Typinator: €19.99 (Mac)

“Typinator boosts your productivity and eliminates errors by automating the process of inserting frequently used text and graphics and auto-correcting typing errors.”

FastFox: $34.99 (Windows & Mac)

“FastFox is an easy to use text expander that can create and store keyboard shortcuts that expand to an entire phrase, paragraph or document.”

SnippetMonkey

“Snippet Monkey saves you countless hours monkeying around by allowing you to create shortcuts for phrases you frequently type. We call the phrases snippets and Snippet Monkey allows you to create new snippets from the clipboard or via our easy to use snippet editor.”

What Are Your Favorites?

There are a lot of utilities here to choose from and I would love to hear your feedback on those that you’ve tried. For my own purposes I use TextExpander to quickly insert code, Snipplr to store random bits long-term, and Droplr to quickly share snippets. What combination will fits your workflow best?

Today we’re going to use this technique to create a simple and fun sticky note that a user can play with and move anywhere on the page. Along the way will be using lots of CSS3 so make sure you’ve got a decent browser!

Sneak Peek

To check out what we’ll be building, click the picture below and view the live demo.

Step 1: The HTML

We’ll start off by building our sticky note just like we would on any site and finish by making it moveable. The HTML for this tutorial is super simple and contains only a couple divs and elements.

<div id="container">	
	<div class="stickyNote">
		<h1>Drag Me</h1>
		<p>Lorem ipsum dolor sit amet, etc.</div>
	</div>
</div>

I kept the placeholder text simple here so you can easily see how simple the code is, but you can type in anything you like!

Step 2: Create The Background

To create the background, you’ll want a nice cork bulletin board texture. I ran a quick Google search and came up with this one.

You’ll need to crop out a small section and convert it to a seamless background. This can be easily accomplished in less than two minutes by following my tutorial on creating seamless backgrounds.

Step 3: Background CSS

Once you’ve got your seamless cork background image created, start your CSS with a basic reset and drop in the JPG.

* {
	margin: 0px;
	padding: 0px;
}
 
body {
	background-image: url(Bkg-pic.jpg); background-repeat: repeat;
	color: black;
}
 
#container {
	width: 960px;
	margin: 100px auto;
}

I’ve also styled the container here just a little by setting a width of 960 pixels and a top-margin of 100 pixels. The auto snippet automatically centers the div.

Step 4: Basic Sticky Styles

Next we’ll give our sticky some really basic styling.

.stickyNote {
	margin: auto;
	width: 300px;
	background: yellow;
}

Here we’ve basically just set a yellow background and a width. This background will serve as the default for browsers that don’t interpret the CSS3 we’ll be adding next.

At this point your sticky should be just starting to take shape and look something like the image below.

Step 5: Advanced Sticky Styles

To make our sticky note look a lot better we’ll add in a gradient, box-shadow and some padding.

.stickyNote {
	margin: auto;
	width: 300px;	
	background: yellow; /* Fallback */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBEB00), to(#C5C500));
	background: -moz-linear-gradient(100% 100% 90deg, #C5C500, #EBEB00);
	padding: 20px 20px 20px 20px;
		-webkit-box-shadow: 0px 10px 30px #000;
		-moz-box-shadow: 0px 10px 30px #000;
}

Notice that we’ve applied the gradients and shadows using both the Webkit and Mozilla syntax so it will work across as many browsers as possible. For the gradients, we’ve specified two colors and essentially told the gradient to spread vertically over the entire element. Note that the order of the color values must be reversed on the Mozilla version to produce the same gradient.

For the shadow, we’ve applied it after the padding with the following values: 0px horizontal offset, 10px vertical offset, 30px blur, and black for the color.

You should now have a decent looking sticky note with a shadow and a gradient!

Step 6: Using @Font-Face for a Handwritten Font

I want the “h1″ text to look a little more handwritten but I don’t want to use an image so I’ll cruise over to FontSquirrel and download one of their excellent @font-face kits. With these kits all the work is done for you. All you have to do is download the fonts, copy them over to your root directory and grab the provided CSS snippet.

I chose the GoodDog kit. GoodDog is a nice thick handwritten font.

As I stated above, copy over the font files along with the following CSS provide by FontSquirrel with your download:

@font-face {
	font-family: 'GoodDogRegular';
	src: url('GoodDog-webfont.eot');
	src: local('‚ò∫'), url('GoodDog-webfont.woff') format('woff'), url('GoodDog-webfont.ttf')
	format('truetype'), url('GoodDog-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

To learn more about the syntax here, check out Paul Irish’s bulletproof @font-face syntax. All we need to know for now is that the first line tells how to refer to the font elsewhere in our CSS. So anywhere we want to use this font, we’ll type in ‘GoodDogRegular’.

Step 7: Header & Paragraph Styles

To finish off our sticky note, add the following CSS:

.stickyNote h1{
	font-size: 100px;
	font-family: GoodDogRegular, Helvetica, sans-serif;
}
 
.stickyNote p {
	font-family: GoodDogRegular, Helvetica, sans-serif;
	font-size: 30px;
	line-height: 35px;
	margin: 10px 0 10px 0;
	width: 280px;
}

As you can see, we’ve applied the GoodDog font to the h1 and the p tags and finished off with some basic positioning styles. Now after updating the placeholder copy to something more useful, here’s the finished sticky note:

Step 8: Make it “Moove”

Now our only step is to add the JavaScript that makes the item moveable. First import a copy of MooTools 1.11 into the header section of your HTML. The reason we’re using 1.11 is because the section we’re using hasn’t made it into MooTools 2.

After you’ve got that imported, add the following JavaScript to your HTML to make our sticky note moveable:

<script type="text/javascript">
window.addEvent('domready', function(){
	$$('#container div').each(function(drag){
	new Drag.Move(drag);});	
}); 
</script>

The second line here is the important one. It tells MooTools to make any div inside the container moveable. You can customize this section to do anything you want. For instance, if you wanted any “p” tag inside a div with an id of “greatBigBox” to be moveable, just change the code to:

<script type="text/javascript">
window.addEvent('domready', function(){
	$$('#greatBigBox p').each(function(drag){
	new Drag.Move(drag);});	
}); 
</script>

There you have it! That’s literally all you need to know to start making elements on your site moveable.

Conclusion

As you can see, creating the sticky note was really the hardest part of the process. MooTools took care of the heavy lifting to make the element moveable and reduced our JavaScript work down to just a few lines!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

For those who don’t know, Cu3er is an awesome 3D image slider that’s free to use and easy to setup.

This section will examine how to tweak your slideshow using some of Cu3er’s many customization options. We’ll mostly be editing an XML page but don’t worry about it getting too techie. Even if you don’t know what XML is, it’s all pretty straightforward and easy to understand.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Previously on Design Shack

In part 1 of the Cu3er tutorial, we downloaded Cu3er and modified the example page to see how easy it is to incorporate the slideshow into your designs.

Before we get started, you might want to check out the demo and download the source files.

The Config File

If you followed along last time your config.xml file should be untouched from the original file we downloaded from the cu3er website.

The demo and associated files above have been altered slightly to include an auto-start feature but today we’ll start back at the default file just to have a clean slate.

Get your example ready to go and open the config file and we’ll get started! There should only be two sections in this file: settings and slides. By default, the settings section contains only the code for the previous and next buttons to navigate the slideshow. Feel free to play with or eliminate these settings on your own, but we’ll leave them as is because I like having the ability to manually navigate the slideshow.

Auto Start

By default, the Cu3er slideshow is static and won’t change images until you click the next button. However, there are plenty of instances where you might want the slideshow to just run automatically when the page loads.

To accomplish this, copy and past the following code from the Cu3er documentation into the settings section of your XML file.

<auto_play>
	<defaults symbol="circular" time="3" />
	<tweenIn x="500" y="50" width="35" height="35" tint="0xFFFFFF" />
</auto_play>

The first part of this code controls how long the timer is on each slide and what it looks like. You have two options here: linear or circular. The circular option is a pie chart that fills up gradually and the linear option is a rectangle with a horizontal sweep. The time is the number of seconds the slide will be show before moving on.

The tweening part is an animation principle and has to do with the linearity of the speed of the animation over time. The more important values here are the x,y coordinates, which allow you to set the timer’s position, the height and width, which allow you to set the timer’s size, and the tint, which gives you control over the color of the timer.

So if we wanted a circular timer, a two second duration, with a size of 50px and a color of blue, we would use the following code:

<auto_play>
	<defaults symbol="circular" time="2" />
	<tweenIn x="500" y="50" width="50" height="50" tint="0x005ea5" />
</auto_play>

Customizing Slides

Adding extra slides is super easy. Just go to the slides section and copy and paste a portion the portion of code between the slide tags and change the image name to the name of your jpg.

If you wanted to place an image called sunrise.jpg, the code would look like this:

<slide>
	<url>images/sunrise.jpg</url>
</slide>

Adding Links to Slides

Use the following snippet to add a link so that when a user clicks on a slide, the link is opened (replace the link with your own).

<slide>
	<url>images/slide_1.jpg</url>
	<link target="_self">http://designshack.net/</link>
</slide>

Adding Descriptions to Slides

Cu3er gives you the ability to add both a heading and a paragraph to each slide. This description can optionally have an associated link that is different than the link attached to the slide.

The code snippet to accomplish this comes right after the slide url.

<slide>
	<url>images/slide_1.jpg</url>
 	<link target="_self">http://designshack.net/</link>
	<description>
		<link target="_self">http://13styles.com/</link>    
		 <heading>This is a Heading</heading>
		<paragraph>This is some descriptive paragraph copy.</paragraph>
	</description>
</slide>

This will yield a result similar to the one below.

Customizing the Description Box

To customize the description settings, insert the following code into the settings area and tweak it to your own preferences.

<description>
	<defaults
		round_corners="5, 5, 5, 5"
 
		heading_font="Helvetica"
		heading_text_size="19"
		heading_text_color="0xFFFFFF"          
		heading_text_margin="10, 0, 0,10"  
 
		paragraph_font="Arial"
		paragraph_text_size="13"
		paragraph_text_color="0xFFFFFF"
		paragraph_text_margin="10, 0, 0, 10"       
	/>
	<tweenIn tint="0x000000"  x="150" y="180" alpha="0.8" width="300" height="100" />
	<tweenOut time=".5" x="600" />
	<tweenOver tint="0xCAEA15" alpha="1.0" />
</description>

Here you can assign fonts, text size, text color and text margin for both the heading and the paragraph. The tween information allows you to position the box holding the text as well as decide its height, color and animation properties. Since my slides are 600px wide, I set my x value and my width so that x times two plus width is equal to 600 (150*2+300) to center the description horizontally on the slide.

These setting give me the following results:

Defining the 3D Transition

The final customizable attribute we’ll go over is the most fun: the 3D transitions. Cu3er gives you complete control over the nature of these transitions. To illustrate, let’s look at the following code:

	<slide>
		<url>images/slide_1.jpg</url>
	</slide>
	<transition num="10" slicing="vertical" direction="down" shader="phong"/> 
	<slide>
		<url>images/slide_2.jpg</url>
	</slide>

As you can see, here we’ve placed some transition attributes in between two slides. First we tell Cu3er how many slices we want in the transition. This can be any number you want, just keep in mind the animation starts to get choppy around 30. You can also decide if you want to slice the image vertically or horizontally. If vertically, you choose whether you want the direction to be up or down. If horizontally, you choose a left or right direction.

Also shown above is the shader. The options here are none, flat and phong, the latter of these being a sort of vignette.

You can also set the cube color (0×333333), duration (in seconds), and delay (in seconds) for each transition. Just remember to always place the transition properties between two slides and not within a slide.

Conclusion

Hopefully, you can now easily throw a Cu3er slideshow into a web page and customize most of its settings. For further information on tweaking the slideshow, be sure to stop by the documentation page.

Cu3er is quite the hot item and is used in a number of top selling themes on ThemeForest. Working it into your portfolio of offerings is a great and simple way to wow potential clients.

Let us know if there are any other plugins or shiny web toys you’d like to see us go over. We’re always looking for cool new technologies to learn and share!

Today we’re going to build a simple web page with an amazing and free tool: Cu3er.

Cu3er is a really neat 3D image slider with crazy visual transitions and lots of customization options. Though it’s built with Flash and JavaScript, you don’t really need to know either of these to use it.

In this article, we’ll get the page built and the slideshow up and running. Next time we’ll return and see how to customize some of Cu3er’s many features and variables.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What We’re Building

To see how easy it is to incorporate Cu3er into a design, we’ll build a simple web page that contains a header, footer, paragraph copy, and a navigation area.

Before we get started, you might want to check out the demo and download the source files.

Note: In my own testing, cu3er works great in Safari and Firefox but has some troubles in IE (surprise). Due to this as well as the little bit of CSS3 we’ll be using, be sure to view the demo in Firefox or Safari.

To keep things interesting, we’ll also be using a little CSS3 and learning how to setup a “sticky footer” that stays anchored to the bottom of the page. Let’s get started!

Step 1: Grab Cu3er

The first thing you’ll want to do is stop by the Cu3er website and hit the download button. When you open up the .zip you should see the following files:

The first thing you’ll want to do is to copy this entire folder and put it in a safe place so you’ll always be able to revert back to the original versions of any or all of the files.

Once you’ve done that, open up demo.htm in your favorite IDE or text editor.

Step 2: Customize the Demo Page

When you open up the demo page, you’ll see that it’s pretty straightforward and already contains a centered div with a working version of cu3er. I told you this would be easy!

We need only to add content and restyle this page and we’ll be all finished. To begin this process, replace the Step 1, Step 2, etc. comments in the head portion of the document and add something more descriptive. Also delete any inline styling and insert a link to an external stylesheet. You should have something like the following.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CU3ER - demo!</title>
 
<!--  Path to SWFObject JavaScript -->
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>
 
<!--  Configure SWFObject JavaScript and embed CU3ER slider -->
<script type="text/javascript">
		var flashvars = {};
		flashvars.xml = "config.xml";
		flashvars.font = "font.swf";
		var attributes = {};
		attributes.wmode = "transparent";
		attributes.id = "slider";
		swfobject.embedSWF("cu3er.swf", "cu3er-container", "600", "300", "9",
		"expressInstall.swf", flashvars, attributes);
</script>
 
<!--  Path to CSS -->
<link rel="stylesheet" href="style.css" type="text/css"
 
</head>

Next, go into the body of the HTML and throw the cu3er-container into a “slideshow” div.

<body>
 
	<!--  Cu3er -->
	<div id="slideshow">
		<div id="cu3er-container">
			<a href="http://www.adobe.com/go/getflashplayer">
			<img src="http://www.adobe.com/images/shared/download_buttons/
			get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</div>
 
 
</body>
</html>

Customizing the Pictures

Before we go any further, you might want to customize the slides in the “images” folder. To do this, simply open up the jpgs, drop in your own artwork and save over the files.

You can use whatever you like, but in case you’re curious, I just stopped by Flickr and grabbed five photos:

• Misty Lepelenburg, Utrecht – black & white
• Esso Black & White
• Pencil Crayons Black & White
• Rainy Day Black & White
• Hamburg Fair 1 black & white

Step 3: Add a Header

Next we’re going to throw everything into a single page wrapper and add a header. The wrapper will serve as a way to center everything on the page and easily define a width for the content. The header will simply be a little text with a CSS background.

<!--  Begin Page Wrap -->
	<div id="page_wrap">
 
		<!--  Header -->
		<div id="header">
			<p>Design Shack</p>
		</div>
 
		<!--  Cu3er -->
		<div id="slideshow">
			<div id="cu3er-container">
				<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/
				get_flash_player.gif" alt="Get Adobe Flash player" />
				</a>
			</div>
		</div>
 
	</div>

The Header Graphic

The header will be fairly basic and could easily be done with CSS, but to keep things simple we’ll use a repeating background image. In Photoshop, make an image with a thick horizontal black bar and a thin red bar (#5c0000) like the one below.

My final file was 15px wide by 55px high. Yours can be as wide as you want but if you’re following along make sure you get the height right so everything will line up.

Step 4: Start Some CSS

Create a style.css file and add in the following CSS.

 
/* Reset */
 
* {
	margin: 0px;
	padding: 0px;
}
 
/* Float Clear */
 
.clearDiv {
	clear: both;
}
 
/* Body Styles */
 
html, body { 
	background: #4a4a4a url(images/header_repeat.jpg) repeat-x;
	text-align:center;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial,
	"Lucida Grande", sans-serif;
	font-weight: 300;
	height: 100%
}

Let’s go over these chunks of code one at a time. First off, I added a simple margin and padding reset just make sure various browser defaults don’t screw up our layout. Next is a trick I learned from Chris Coyier at CSS-Tricks for clearing floats (so yell at him if you don’t think it’s semantic). We’ll be floating a few things in this design and now that we’ve setup this CSS we can just throw in a .clearDiv class to make sure the content following that section will be reset back to where we want it.

Next, I’ve assigned a few text styles such as font-family and font-weight. I’ve also set the background to a dark gray and inserted out header graphic. Make sure you set the header slice to repeat so you get a bar that stretches all across the page. Finally, I’ve set the height at 100% and made sure these styles applied to both the html and body portions. This has to do with the sticky footer trick we’ll be setting up later. For now just make sure these styles are present.

Your file should be coming along nicely now and look roughly like the image below.

Step 5: Style the Page Wrap and Header

Next up, add the following text to your CSS:

 
#page_wrap {
	width: 850px;
	margin: 0 auto;
}
 
/* Header Styles */
 
#header {
	color: #fff;
	float: left;
	margin-top: 10px;
	font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
	font-size: 25px;
}

Here we’ve set our page wrap to 850px (a little unorthodox, but it just seemed right) and our margin to auto. This centers all of our content nicely within the browser window.

Next I’ve set the text to white, floated it left, set it apart from the top and assigned a font family and size. This should position the “Design Shack” text nicely in your preview.

Step 6: Position the Slideshow

Before we add the navigation into the header, we need to get the slideshow out of our way. To do this, first place the clearDiv class we talked about earlier after the header and before the slideshow in your HTML.

 
<!--  Header -->
		<div id="header">
			<p>Design Shack</p>
		</div>
 
		<div class="clearDiv"></div>
 
		<!--  Cu3er -->
		<div id="slideshow">

Now that we’ve cleared the float from the header, we can go into our CSS and add some styles for the slideshow.

 
/* Slideshow Styles */
 
#cu3er-container {
	width:600px;	
}
 
#slideshow {
	background: url(images/cube_shadow2.jpg) no-repeat;
	background-position: top center;
	height: 350px;
	margin-top: 70px;
 
}

Here we’ve added most of the styling to the wrapper around the slideshow. This is so we can keep the cu3er-container div at 600px (the width of the slideshow) while having a shadow graphic that extends beyond this boundary.

You can either make your own shadow in Photoshop or just grab mine from the source files.

Now your slideshow should be positioned perfectly on top of a nice shadow graphic to give it a sort of floating illusion.

Step 6: Add the Navigation

Now that the slideshow is out of our way, we can add in the navigation area. We’ll keep this pretty basic and just use an unordered list of links. Like the header, the navigation will use a float so place the navigation HTML after the header and before the clearDiv.

 
<!--  Header -->
	<!--  Begin Page Wrap -->
	<div id="page_wrap">
 
		<!--  Header -->
		<div id="header">
			<p>Design Shack</p>
		</div>
 
		<!--  Navigation -->
		<div id="nav">
			<ul>
			<li><a href="http://designshack.net/">Home</a></li>
			<li><a href="http://designshack.net/articles">Articles</a></li>
			<li><a href="http://designshack.net/gallery/">Gallery</a></li>
			<li><a href="http://twitter.com/designshack">Twitter</a></li>
			</ul>
		</div>
 
		<div class="clearDiv"></div>

Now we’ll need a large chunk of CSS to style everything involved with the navigation. We need to cover the navigation div as a whole, the unordered list, list items, list item links, and list item link hover effects.

 
#nav {
	float: right;
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	margin-top: 15px;
}
 
#nav ul {
	list-style: none;
}
 
#nav ul li {
	float: right;
	padding-left: 20px;
}
 
#nav ul li a{
	color: #fff;
	text-decoration: none;
}
 
#nav ul li a:hover{
	color: #fff;
	text-decoration: underline;
}

Everything here is pretty straightforward. The navigation is floated right (this sets it to the right side of the page and puts the elements in a line), set to white, positioned into place and transformed to uppercase. We’ve set the list-style to none to ditch the bullet points and eliminated any link text decoration except on hover, where we applied an underline.

And with that our navigation is finished. Now all that’s left is some superfluous text and the footer and we’ll be all finished!

Step 7: Add the Text Below the Slideshow

Just to round off the design a little, we’ll add a heading and paragraph under the slideshow. Just a few lines of html is all we’ll need:

 
<!--  Text Under The Slideshow -->
	<div id="tagline">
		<h1>Cu3er Slideshow</h1>
		<p>A Design Shack Tutorial</p>
	</div>

Then we’ll style both the h1 and the paragraph tags individually. Notice I used the letterpress technique we learned in the Google Fonts article. This uses a CSS3 text-shadow that’s lighter in color than the background to give the illusion of inset text.

 
/* Tagline Styles */
 
#tagline h1{
	font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
	font-size: 70px;
	font-weight: bold;
	color: #272727;
	text-shadow: 0px 2px 3px #555;
}
 
#tagline p{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
	    Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 20px;
	font-weight: 300;
	color: #272727;
	text-shadow: 0px 2px 3px #555;
}

That brings us to the end of most of our design. You can even stop there if you wish but I’m going to press on and show you a neat sticky footer trick I learned this week.

The image we use below for the footer is the exact same as the header image, only rotated 108 degrees so the red is on top and the black is on the bottom.

Final Step: Add the Footer

If you’re wondering what a sticky footer is, it’s simply a footer that adheres to the bottom of the page as you resize the window. This can be tricky to implement but Ryan Fait has created a pretty ingenious method of accomplishing it with very little code; see that method here.

The basic idea is that you can use negative margins and a “push” to keep the footer at the bottom of the page. The first thing we need to do is insert the push and footer divs into our html. Place the push div inside of the page wrap and the footer div outside of the page wrap (so it will extend to the edges.)

 
		<!--  Text Under The Slideshow -->
		<div id="tagline">
			<h1>Cu3er Slideshow</h1>
			<p>A Design Shack Tutorial</p>
		</div>
 
		<!--  For the Sticky Footer -->
			<div class="push"></div>
 
	</div>
	<!--  End Page Wrap -->
 
 
	<div id="footer">
	</div>