Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.

Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width.

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

What Is a Masonry Layout?

When you float objects in CSS, the browser arranges elements first horizontally then vertically. When we fill a container with a bunch of equally sized objects and float them left, we get a nice grid of images.

However, if the objects have variable heights, the results are much more difficult to predict. Instead of a nice tight grid, we get something that tends to be fairly scattered.

The obvious quandary here is how to pull off a nice tight grid that with items that have variable heights. It’s a pretty interesting topic and various developers have come up with several ways to go about it. Let’s take a look at three of the current best solutions.

To go one step further, we’re going to make sure that all three solutions are responsive, meaning the grid will reflow as the window size changes.

jQuery Masonry

jQuery Masonry is the most popular solution to pull off this type of layout. It utilizes some pretty fancy JavaScript to reflow a series of divs.

Putting Masonry into practice is pretty easy, all you need is a container that holds a series of divs that you want to arrange masonry style. You can place anything you want inside the divs, in this case I threw in some placeholder images.

Once you have that in order, toss in jQuery and jQuery Masonry. Then you need to create a simple function that identifies your container and targets the class that we used for our Masonry images divs. Here’s a basic example:

<div id="container">
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/200/food/1" alt="" />
	</div>
 
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/150/food/10" alt="" />
	</div>
 
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/250/food/3" alt="" />
	</div>
 
	. . .
 
</div>
 
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
  $(function(){
 
    var $container = $('#container');
 
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.masonryImage'
      });
    });
 
  });
</script>

CSS

As long as we have a width set on our container div, the code above performs the magic we need it to and reflows the elements. If you set the div width to a percent, jQuery Masonry even automatically reflows the items as the page resizes.

Even though this is the case, things can get messy if you want to keep your container centered. I found it easier to apply a static width to my container, then use media queries to reflow the columns as the page size decreases past the container size.

#container {
	width: 1200px;
	margin: 0 auto;
}
 
/*Media Queries*/
@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#container {
		width: 1000px;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#container {
		width: 800px;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#container {
		width: 600px;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#container {
		width: 400px;
	}
}
 
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
	#container {
		width: 200px;
	}
}

See It In Action

This gives us a nice tight image gallery that perfectly responds to various browser window sizes. I’ve taken all the spacing out to illustrate just how tight you can get your images, but feel free to build in some margins so your images are spaced out a bit more.

Demo: Click here to launch demo

Wookmark

Another popular JavaScript solution for achieving the same type of layout is Wookmark.js, which is the driving plugin behind the Pinterest-like Wookmark.com.

Wookmark.js is in my opinion a little trickier to implement than jQuery Masonry because of the lack of documentation, but it’s still pretty basic stuff. All we need to do to start is toss a bunch of images into an unordered list. The catch with this plugin is that we have to declare inline height values for each of the images.

<ul id="myContent"> 			
	<li style="height: 206px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/206/animals/1" alt="" /></li>
	<li style="height: 256px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/256/animals/2" alt="" /></li>
	<li style="height: 216px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/216/animals/3" alt="" /></li>
	<li style="height: 276px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/276/animals/4" alt="" /></li> 
	. . .
</ul>

Once you’ve got that set up, then you insert the JavaScript at the bottom of the body just like last time. Insert both jQuery and Wookmark.js, then set up the simple function below, which targets the list items in our #myContent unordered list.

I tossed in another simple function here which essentially reloads the script as the window changes size. This will ensure that the columns automatically reflow and provide that responsive functionality. This time around we’ll ditch the media queries and let the JavaScript handle all of the layout.

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.wookmark.js"></script>
 
   <script>
		$('#myContent li').wookmark({offset: 2});
 
		window.onresize = function(event) {
		    $('#myContent li').wookmark({offset: 2});
		}
   </script>

CSS

The CSS for this version is super minimal. All we need to do is set our ul width with a percentage and use position:relative. Then we set a specific width for each list item. That’s it!

#myContent {
	width: 80%;
	position: relative;
}
 
#myContent li {
	width: 200px;
}

See It In Action

Just like last time, the result is a tight grid of images. However, even though spacing options are adjustable with Wookmark.js, I couldn’t get it to work at zero so we have a little bit of spacing in between the images.

Demo: Click here to launch demo

Pure CSS

The JavaScript solutions are probably the safest and most widely compatible ways to go about a masonry layout, but the CSS nerd in me knew there had to be a way to pull it off without JavaScript.

It turns out, it’s actually pretty easy using some fancy CSS3. This technique was pioneered by Radu Chelariu at SickDesigner and though it’s definitely not as powerful, flexible, or cross-browser-compatible as the previous options, it’s still extremely impressive given that it’s all CSS.

To start off, let’s use the same unordered list that we did last time (no inline styles necessary), thrown into a container div.

<div id="container">
	<ul id="myContent"> 			
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/206/nature/1" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/256/nature/2" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/216/nature/3" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/276/nature/4" alt="" /></li>
		. . .
	</ul> 
</div>

CSS

Here’s where the voodoo happens. To start, apply a width to the container and center it. Then use the new CSS columns functionality to lay out the content into six columns with zero gap. Finally, target the images directly and set the display to inline-block with a width of 100%. Inline-block allows us to flow elements inline without floats while maintaining block level functionality.

#container {
	width: 1200px;
	margin: 0 auto;
}
 
#myContent {
	-moz-column-count: 6;
	-moz-column-gap: 0px;
	-webkit-column-count: 6;
	-webkit-column-gap: 0px;
	column-count: 6;
	column-gap: 0px;
	width: 1200px;
}
 
#myContent img{
	display: inline-block;
	margin-bottom: 0px;
	width: 100%;
}

That’s all we need for the masonry layout, but we still have the responsive bit to go. We’ll basically use the same trick that we used for the first layout, only this time we’ll change the column count and container width when the window size gets too narrow.

@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#myContent {
		-moz-column-count: 5;
		-moz-column-gap: 0px;
		-webkit-column-count: 5;
		-webkit-column-gap: 0px;
		column-count: 5;
		column-gap: 0px;
		width: 1000px;
	}
 
	#container {
		width: 1000px;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#myContent {
		-moz-column-count: 4;
		-moz-column-gap: 0px;
		-webkit-column-count: 4;
		-webkit-column-gap: 0px;
		column-count: 4;
		column-gap: 0px;
		width: 800px;
	}
 
	#container {
		width: 800px;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#myContent {
		-moz-column-count: 3;
		-moz-column-gap: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 0px;
		column-count: 34;
		column-gap: 0px;
		width: 600px;
	}
 
	#container {
		width: 600px;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#myContent {
		-moz-column-count: 2;
		-moz-column-gap: 0px;
		-webkit-column-count: 2;
		-webkit-column-gap: 0px;
		column-count: 2;
		column-gap: 0px;
		width: 400px;
	}
 
	#container {
		width: 400px;
	}
}

Compatibility

The big problem here is that IE doesn’t have support for CSS columns until IE10. This means that you’ll have to use jQuery Masonry as a backup for IE users if you want to implement this technique in a real world scenario.

See It In Action

Here’s our third and final masonry layout demo. At a glance, the effect is exactly like we saw with jQuery Masonry. Not bad for plain old CSS!

Demo: Click here to launch demo

Conclusion

In a recent article on Pinterest, I discussed just how powerful masonry layouts can be from a UX perspective, especially when combined with infinite scrolling.

You can definitely expect this budding trend to increase in popularity and before you know it you’ll have clients asking for a layout like the one they see on Pinterest. When this happens, you’ll now be prepared with not one but three possible solutions!

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!

The main goal of any website is to lead visitors through your pages. This is accomplished via a navigation of some type, most commonly links. You can build tab bars, banners, block elements, or even float a nav menu off to the side.

Follow us in the guide below as we look through common trends in web navigation menu design. Both designers and developers have come up with tricks for expediting the process of building websites. And we hope to do the same by offering some unique tips for UI navigation.

Plan a Webpage Outline

Before the design process begins, you should take a moment to consider the many styles of dynamic navigation available to you. You could have fly-out or dropdown sub-menus appear from a nav bar or fixed block, but alternatively you could have sub-links slide, fade in, or maybe you don’t even need sub-navigation. These are all important ideas to work through before you dive into Photoshop.

With the above example, Fork CMS is using a simple top-bar navigation which fits in very well. Nothing comes off as confusing or difficult to find and you have access to all of the important site information.

Your situation may greatly differ based on the number of important pages in your own website. This is why I suggest sketching out a diagram to build a more solid idea of how the navigation should work. This could take the form of a flowchart, where you draw in arrows to point towards the next page in a segment.

Attaching Sub-Menus

As an example, the popular design magazine Speckyboy features a sub-nav dropdown menu within each category. WordPress can set this up by default but you still need to utilize some form of jQuery. Meanwhile the niche gaming site Destiny Islands uses jQuery for a slide-down sub-menu for each game in the sidebar area.

You may also notice the header navigation is coupled with replacement images on mouseover. This small effect is handy if your layout works well holding fixed-width link buttons. jQuery is an option but CSS3 transitions may feel like a better alternative. Both CSS3 and JavaScript boast flaky support in mobile OS’, But for older legacy browsers you’re likely to see more success using a jQuery-based method.

And a sub-menu doesn’t have to stick within the standard formats, either. I think the newest Smashing Magazine re-design says it best with their small tag cloud. Hover over the icon next to their site logo and a menu of blog categories and tags appear. Keep these small yet refined ideas in mind for your own pop-out menus.

Ajax Tabs

To contain a large number of links in a smaller area, some content needs to be hidden by default. Hidden dropdown menus are one way, but a container with tabs is another option. And with Ajax you can asynchronously pull out data from your database or another webpage with each different tab on the div.

WordPress blogs are notorious for these kinds of features. The above screenshot from Webdesigner Depot focuses on a sidebar widget to pull out the most popular and recent articles. If you feel this method will suit your layout, it is one way of containing links in a very reduced space.

If You Go Big, Go Fancy!

Those of you who frequent design galleries have most likely stumbled across Coda’s page before. They use both a tabbed content area for loading dynamic information and a heading area with 3 links: Download, Buy, and Help.

This is just one perfect example of taking your web navigation to the next level. Big and bold lettering is often attention-grabbing if designed appropriately. And the hover effects added over each link area tack onto the magical feeling of the whole layout. This is all without mentioning the delicious pixel-crazed icons featured next to each large block.

This is a very flashy display of website effects and will not always be realistic within the scope of every project. But for low-numbered navigation links it’s almost better to jack up the size quite a bit. If you only have 3-4 pages these should be easily found and glossed over exquisitely. As for the icons, there are so many resources to check out it’s most likely you’ll run into something cool!

Ruling HTML5 Standards

The web has advanced a long way since 2001. In the past 10 years we have seen tremendous leaps of innovation between techies all around the world. And now HTML5 has swept the design world by storm offering a sound, stable declaration for even some convoluted page elements.

One such example is the <nav> tag which is slowly taking over the unordered list formats (or even coupling the two together). Here’s a great Stack Overflow question about semantic HTML and using the nav element properly. As quoted from the specs page “the nav element represents a section of a page that links to other pages or to parts within the page“.

A personal favorite article published earlier this year is titled How HTML5 Changes the Way We Think of Navigation and expresses a lot of strong benefits towards the switch in coding. The basic confusion stems from so many developers growing accustomed to XHTML and HTML 4.01 standards.

Conclusion

This guide has looked more into the semantics and markup of building a dynamic navigation menu. Between the new CSS3 animation effects and jQuery UI library there are tons of customizations you can build. Front-end web development has never been this much fun! And it’s easy to find great support communities for newbie developers just picking up the trade.

Have you built any dynamic menu systems on your own website? Or maybe you’ve run into a few really cool effects on other websites. Let us know your thoughts and ideas in the discussion area below.

Below I’ll be going over how to build a small Apple-styled input form with some basic structure and scripting. All code included is based off XHTML Transitional Doctype along with newer CSS2/CSS3 techniques. We’ll also be using the jQuery 1.4.1 library to support our display label functions.

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

Here’s a sneak peak of what we’ll be building. Check out the demo page to see it live and download the example for a closer look.

Live Demo – Download

Building our HTML and CSS

Before we can start developing it’s important to get frontend code structure in order. Luckily this process is very simple and shouldn’t take long at all to complete. Below I’ve included a stripped copy of the HTML code from our example “index.html” document. This should all be standard code to display a very basic input form, nothing further than any basic HTML developer’s knowledge.

<!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>Apple-style Input Field</title>
</head>
 
<body>
 
<div id="c">
	<form id="basicform" action="#" method="post">
	<input type="text" name="username" id="unameblock" title="Enter your username" class="u1" />
    <input type="password" name="password" id="pwblock" title="Enter your password" class="u1" />
    <br /></br />
 
	<input type="submit" id="submitbtn" value="Submit Button!" />
    </form>
</div>
 
</body>
</html>

Here I’ve set up 2 very important input elements under the IDs “unameblock” and “pwblock”. These stand for username block and password block, respectively, and will be very important later in our script. Now that our code is looking good it would be wise to jump into CSS styles.

These are the real bare-bones structure rules since CSS is what gives all HTML elements their form. There aren’t many changes we will be including. Some basic resets for global variables along with alignment and positioning for input fields. Below are clips from the source code, explained in bit intervals.

* { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; padding-top: 150px; background: #dbe9f7; }
 
#c { width: 850px; margin: 0 auto; }

Here we have our global reset with the asterisk (*) selector removing all browser-standard margins and padding. We also give some styles to the body element for positioning our form front and center. The #c division is our container div which has been centered for the sake of our demo.

input.u1 {
	padding: 6px 12px;
	font-size: 1.6em;
	color: #787878;
	letter-spacing: -0.02em;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	background: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#ffffff));
	background: -moz-linear-gradient(top,  #e0e0e0,  #ffffff);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #717171;
	margin-right: 20px;
	-webkit-box-shadow: 1px 1px 0px #efefef;
	-moz-box-shadow: 1px 1px 0px #efefef;
	box-shadow:  1px 1px 0px #efefef;
}
input#submitbtn { font-size: 1.3em; padding: 4px 9px; font-family: Arial, Helvetica, sans-serif; letter-spacing: -0.05em; color: #444; }
input.fail { -webkit-box-shadow: 0px 0px 5px #ff4848; -moz-box-shadow: 0px 0px 5px #ff4848; box-shadow: 0px 0px 5px #ff4848; }
input:focus { -webkit-box-shadow: 0px 0px 5px #007eff; -moz-box-shadow: 0px 0px 5px #007eff; box-shadow: 0px 0px 5px #007eff; }

The first noticeable block is used to style our input fields. It targets all input elements with a class of “u1″ which both our username and password fields run. Instead of placing 10-20 style declarations on a single line it’s much easier for editing to keep this in block-level.

In here we have the styles to configure how our input fields will look. Padding, font-size, among many borders and text manipulation properties as well. We’re using many new CSS3 techniques here which should be apparent to all CSS developers.

New CSS3 Entities

Two brand new CSS3 functions we’re using are -webkit-gradient and -moz-linear-gradient which can generate gradients on-the-fly. This is an amazing feature which hasn’t been discussed in many CSS3 articles. This removes the need for any images in creating standards-compliant background gradients.

We also have -webkit-box-shadow and -moz-box-shadow. Similar naming schemes help with confusing between Webkit browsers and Mozilla-based Gecko browsers.

Further down we have 3 more styles which attack our submit button along with states for our input forms. The :focus pseudo-targeting means CSS will only apply our styles when the user is focused on either input field. These styles will display a blue glow for focus and red glow for errors (very useful when debugging user logins and registration forms).

So far this all looks great! In fact all we need to do is include a few scripts/styles in our header section to really get started on our dynamic effects. If you take the current document and include our stylesheet we can get the hover effects immediately.

Working with jQuery Effects

jQuery is an amazing JavaScript library which has proven useful time and again. Your average web developer is heavily focused on speed and precision of scripting. This is something jQuery takes in and internalizes with their ideas.

Below is a small section which needs to be added between the head tags of your document. I’ll explain a few of these below and also get into some of the behind-the-scenes code.

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/tip-yellowsimple.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.poshytip.js"></script>

Our style.css is the file which includes all of our CSS rules listed above. Another inclusion is tip-yellowsimple.css which hasn’t been mentioned yet. It’s a script written through jQuery as a plug-in for tooltip hovers. With this stylesheet (download with demo source) we are able to style tooltips on any action.

Our two JavaScript files are really basic and self-explanatory. We’re accessing jQuery 1.4.1 min so as to cut down on processing and download speeds. We’re also reading through Google’s APIs code database which stores all previous and active versions of popular scripts. This is a tremendous effort and helps development projects surge forward without the need to constantly download the jQuery library manually.

The second file we have “jquery.poshytip.js” contains our plug-in code. Poshytip is a jQuery class written by Vasil Dinkov to support dynamic tooltips. The code is vast and unnecessary to learn in-detail. However if you’re a jQuery geek feel free to check out his manual efforts to see how these methods are called and what variables you could edit.

Basic Action Call

All we need now is our infamous call to action! This is our main function which will load on document load and prepare to launch upon whatever signal we call. In this case we’re looking for an event which happens when a user focuses on one of the input fields.

One last step is to add this code into the head beneath all our file includes. This is straight JavaScript code so it should be encapsulated with a script tag. For easing I’ve removed the tags in the code below so we can focus on just the js functionality.

$(function(){
	$('#unameblock').poshytip({
		className: 'tip-yellowsimple',
		showOn: 'focus',
		alignTo: 'target',
		alignX: 'inner-left',
		alignY: 'top',
		offsetX: 10
	});
 
	$('#pwblock').poshytip({
		className: 'tip-yellowsimple',
		showOn: 'focus',
		alignTo: 'target',
		alignX: 'inner-left',
		alignY: 'top',
		offsetX: 10
	});
});

So what we’re doing is calling a generic function() {} to check on some events. We are creating 2 new instances of the poshytip() method based off our input forms. This can be seen when we parse the DOM for the element IDs “unameblock” and “pwblock”.

Each of the individual settings in place expands on the functionality of poshytip. If you’d like to view documentation for all methods there is a great collection which Vasil has put online. Namely showOn is our most important variable which tells the parsing engine to check for any focus activity in these two elements.

AlignX and AlignY are important in regards to placement. These hold the values for where our tooltip will show up in page. This can be bottom, center, top, along with offset placements such as inner-left and inner-right. Try messing with these if you’d rather have the tooltips pop up on the side or bottom instead of the top.

What you may not have noticed by now is where our text is loaded from. Poshytips makes it simple here, too, where the value of our title attribute is displayed in tooltip text. This makes targeting specific elements extremely simple and very productive!

Conclusion

These are some of the most basic steps towards building an Apple-style input field. There are many other unique effects which can be applied using jQuery that range out of the scope on this tutorial. Check out some demos from Apple’s website for more inspiration. Also if you’d like to download the entire demo package you can do so here.

Most web designers these days know at least a little HTML and CSS, giving them the ability to bring their designs to the web. Advanced functionality, for the most part though, is handled by programming languages, which have a much higher barrier to entry. This leaves countless designers intimidated while wishing they had a firmer grasp of the most essential of these: JavaScript.

Do you wish you could finally scratch “learn JavaScript” off of your todo list? Does a hefty learning curve keep you from taking the plunge? Maybe you just need the right book. Today we’ll take a look at “Eloquent Javascript: A Modern Introduction to Programming” by Marijn Haverbeke to see if it’s what you need to become a JavaScript ninja.

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

A Manageable Task

I have a JavaScript book in my closet that I picked up in college a few years ago. It’s 1,000 pages long and is heavier than a good family bible. After one look at this impressive tome, most non-programmers would give in to the hopelessness of actually having the time to learn and master the material within.

As I mentioned in the introduction, if it’s your first foray into real programming, JavaScript can be pretty intimidating and the last thing you want to find out is that you’ll need to get a new degree just to understand it.

The very first thing you’ll notice about “Eloquent JavaScript” is its size, especially if you’ve come face to face with one of the beast manuals I just mentioned. This book, by contrast, is thin, light and comes in at under 200 pages of reading material!

One look at this book and you feel a sense of relief: I can do this. The task before you is still challenging, but feels much more like a long jog than a decathlon.

Who Is It For? Absolute Beginners!

Given the fact that it’s a fairly brief volume, you might expect that there is a lot of knowledge that you need going into it, but make no mistake, this book is perfect for someone who has never written a line of JavaScript in their life.

Of course, it’s definitely recommended that you figure out HTML and CSS first if building webpages and web applications is your ultimate goal. In truth, you could make it through most of the content in the book just fine without these skills, but they really help put the information into context; I guarantee that it will make more sense if you figure out the basics first.

An interesting thing about programming is that the biggest hurdle to learning your first language is actually learning the process of programming. Once you learn this, picking up new languages is more of a matter of mastering semantics than learning from scratch. One of this book’s primary focuses is to teach you how to program. This will prove an invaluable skill as you expand your knowledge in the future.

Who Wrote It?

Marijn Haverbeke is a programmer and tech writer with an impressively large body of open source projects such as Code Mirror and Mold.

Though, from what I can tell, this is his first book, he does have a ton of writing experience on technical topics ranging from JavaScript to Machine Fundamentals.

Haverbeke’s writing style definitely helps make a fairly dull and technical subject more approachable. He’s quite fond of using bizarre circumstances and humor to make his point. For instance, one project in the book is explained through a narrative about a recluse whose hut is struck by lighting, which results in him being burned alive. Needless to say, it’s not your typical JavaScript introduction.

What’s In It?

In the introduction, Haverbeke writes a great little summary of all of the twelve chapters. I’ll be using select quotes from this to explain and divide each section.

Introduction

“The first three chapters will introduce the JavaScript language and teach you how to write grammatically correct JavaScript programs.”

• Chapter 1: Basic JavaScript: Values, Variables and Control Flow
• Chapter 2: Functions
• Chapter 3: Data Structures: Objects and Arrays

Advanced Techniques

“The next four chapters discuss more advanced techniques–things that should make you capable of writing more complicated programs without them turning into an incomprehensible mess.”

• Chapter 4: Error Handling
• Chapter 5: Functional Programming
• Chapter 6: Object-Oriented Programming
• Chapter 7: Modularity

Tools

“The remaining chapters focus less on theory and more on the tools that are available in a JavaScript Environment.”

• Chapter 8: Regular Expressions
• Chapter 9: Web programming: A crash course
• Chapter 10: The Document Object Model
• Chapter 11: Browser Events
• Chapter 12: HTTP requests

How Is It?

“Eloquent JavaScript” does an admirable job of making the complex simple. It actually goes through a ton of theory very quickly by giving you enough to gain an understanding without being so much that it overwhelms you and puts you to sleep. As I mentioned above, the author has an entertaining writing style that I particularly enjoyed.

As previously stated, the book itself is around 200 pages. If you’re looking for something full-color with lots of pretty pictures to keep you interested, look elsewhere. This book is largely text and code snippets and contains only a few quick and simple B&W images (this translates to a fairly low price). Visual learners that like a lot of charts and tables may not find what they’re looking for here.

One thing that I would’ve like to have seen is more solid explanation and examples for how to put the theory into practice in real life websites. A lot of people don’t really have a strong grasp of what to use JavaScript for outside of big web applications and some more guidance for daily use would’ve gone a long way.

On the whole though, it’s a fantastic book. HTML and CSS are the type of thing that can be picked up easily from scattered free tutorials online but JavaScript is one of those things that seems best to learn from start to finish in a consistent and structured volume. “Eloquent JavaScript” is surely among the best original book on the subject in recent years, though I can easily imagine the publisher expanding this into a series: Eloquent PHP, Eloquent CSS, etc.

The bottom line is, if you’re still reading at this point, you’re probably someone who genuinely wants and needs to learn JavaScript. A $30 book that promises to help you achieve this in less than 200 pages is possibly too good to pass up.

Conclusion

To sum up, “Eloquent JavaScript” is a truly great book for absolute beginners to learn the foundations of both JavaScript and programming in general. It strikes a perfect balance between being brief and lighthearted and thorough enough to give you an extensive knowledge of the subject.

If you’re at all interested in learning JavaScript, making this your first guide could mean the difference between getting discouraged and giving up and really getting into programming as a lifelong venture.

eCSStender can be a bit confusing to figure out on your own but once you figure it all out it will literally take you less than a minute to install and use. Below I’ll walk you through building a basic example that uses a number of eCSStender extensions.

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

What Is eCSStender?

The basic workflow of eCSStender is as follows: find and download an extension, throw it in your website directory, link to it in your HTML, implement the CSS.

The major benefits of eCSStender were discussed in detail in Aaron Gustafson’s recent article, Stop Forking with CSS3 (Aaron Gustafson is the creator of eCSStender). One of the biggest problems with CSS3 is of course the lengthy code necessary to implement it in a cross-browser manner.

For instance, if we have a simple box that we want to give rounded corners and a drop shadow, the following code is necessary:

.myBox {
  -moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3-4 */
  border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
}

We’re essentially only adding two styles, yet it takes six lines of code! eCSStender reduces the work necessary here by allowing you to type a single line of code that automatically executes all of the recommended style versions.

To see how this works, let’s build a basic example.

The Box

To keep things ridiculously simple, let’s just build a web page with a square and some text.

The markup here is super basic. Here’s the HTML:

<!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" lang="en">
 
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>sCSStender Test</title>
       <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
</head>
 
<body>
	<div id="theBox">
		<p><a href="#">eCSStender</a></p>
	</div>
</body>
 
</html>

And here’s the CSS at this point:

* {
	padding: 0;
	margin: 0;
}
 
body {
	background: #83d9c5;
}
 
#theBox {
	font-family: helvetica, sans-serif;
	font-size: 50px;
	line-height: 300px;
	text-align: center;
	letter-spacing: -2px;
 
}
 
#theBox a {
	display: block;
	width: 300px;
	height: 300px;
	background-color: #123a31;
	text-decoration: none;
	color: white;
	margin: 100px auto;
}
 
#theBox a:hover {
	background: #1e6152;
}

Downloading eCSStender

To make our boring box more exciting, we’ll first need to download eCSStender. What you get in this download is a big mess of files that will leave you confused and intimidated.

Fortunately, you only need to worry about a single file here. Just grab “eCSStender.js” from the “src” folder and toss the rest. Advanced users should feel free to dig through all of the examples and documentation but for the purposes of this tutorial the main JavaScript file will do just fine all by itself.

Downloading Extensions

eCSStender doesn’t do much right out of the box. Instead, you create and/or download free extensions to complement your needs. Head over to the eCSStender Extensions page to see what’s available.

As you can see, eCSStender is still in the early stages of development so there is only a handful of extensions at the moment, some of which are still under construction.

When you click on one of the links shown above you’ll be taken to a page where you can download the extension, see a demo, and learn about its implementation.

Our First Test: Rounded Corners

To see how this all works, download the backgrounds and borders extension. Here again you are going to get a pretty hefty download just to nab a single file. Grab the file named “eCSStender.css3-backgrounds-and-borders.js” and toss it in your website directory.

Linking the Files

Now that we have both eCSStender and an extension installed, it’s time to load them into your HTML document. This is done exactly like any other .js file, just throw in a link in the head portion of your document.

<script type="text/javascript" src="eCSStender.js"></script>
<script type="text/javascript" src="eCSStenderBB.js"></script>

As you can see, I decided that the filename for the backgrounds and borders extension was way too long and renamed it “eCSStenderBB.js” to keep things simple. Feel free to ignore this step if you like, just make sure your filenames match that shown in your HTML.

The CSS

As you can see, there really hasn’t been much work thus far. Most of the content above is explanation, background, etc. All we’ve really done up to this point is download a file and link it in our HTML, very much like you’d do with jQuery.

When you implement a given extension in the CSS of your site, be sure to consult the download page for proper syntax. In our case, the following code gets the job done:

border-radius: 25px 50px 75px 100px;

That’s all there is to it. eCSStender will do its magic and make sure that this code is appropriately transformed to work in most modern browsers.

Now, you’ll notice that this gave us a pretty funky shape. That’s because each corner is set to a different radius. I do sort of like the basic idea here though so I’m going to reset that so that one corner is fairly sharp and the others are uniformly rounded to a greater degree.

border-radius: 25px 75px 75px 75px;

Adding More

Just to make sure you get the gist, let’s add two more properties. First, download both the transition and transform extensions.

Grab the necessary .js files just as with the previous example and toss them into your site folder. From each extension’s download page we can see that the syntax is as follows:

transition: all 1s ease-in-out;
transform-origin: 0 0;
transform: rotate(-15deg)

As you can see, the transition syntax is fairly basic: select what to transition, set a duration, and set an ease. With the transform property you have to first set an origin, then list the transform you want to take place along with a numerical indicator. In this case we rotated the object 15 degrees.

So to apply this to our example, let’s make a fun hover effect.

#theBox {
	font-family: helvetica, sans-serif;
	font-size: 30px;
	line-height: 300px;
	text-align: center;
	letter-spacing: -2px;
}
 
#theBox a {
	display: block;
	width: 300px;
	height: 300px;
	background-color: #123a31;
	text-decoration: none;
	color: white;
	margin: 100px auto;
	border-radius: 25px 75px 75px 75px;
	box-shadow: 5px 5px 15px 1px #123a31;
	transition: all 1s ease-in-out;
}
 
#theBox a:hover {
	background: #1e6152;
	font-size: 50px;
	transform-origin: 0 0;
	transform: rotate(-15deg);
}

So now when you hover over the box, it will rotate, change color, and change font-size all with a nice transition.

Each one of these CSS3 properties would’ve normally taken around four lines of code. So as you can see, we’ve definitely saved ourselves quite a bit of coding.

eCSStender vs. LESS: What’s the Verdict?

Overall eCSSstender was definitely fun to play with. However, because I’ve been toying around with a lot of these CSS tools lately, I simply can’t help but compare them all to LESS.

Let’s take a look a few of the areas where each system excels. Out of the box, LESS feels more powerful because it turns CSS into a real programming language with variables, operations etc. This adds a certain flexibility to the coding and syntax that you don’t get with eCSStender. LESS also doesn’t require users to hunt down and download multiple extensions and link to a plethora of JS docs. Finally, LESS can be used immediately by anyone without concern for compatibility because what is ultimately uploaded is plain old CSS.

eCSStender makes it easy for developers to create custom plugins so in the long term, this might actually be the more powerful and robust solution (as long as developers jump on board). eCSStender is also nice because you can skip the compiling step inherent in the LESS method (.LESS files are compiled to .CSS files). There are also a few more technical reasons you might like eCSStender better found under the FAQ section. For instance, “a pre-processor [like LESS] can’t leverage that nuance to implement JavaScript-based animations as an alternative to CSS-based ones if they aren’t supported the because pre-processors (as they are currently built) take a “one size fits all” approach to handling CSS: everyone gets the same thing.”

However, despite all this, even the eCSStender website admits that it’s simply not all that practical to use in many circumstances. For my own part, I can’t see myself ever really using eCSStender for more than a little fun and experimentation (unless some big changes are made).

For whatever reason, eCSStender just took a lot more “fiddling” than LESS to get everything working properly. For instance, I’d get eCSStender up and running on Safari, but then it wouldn’t work in Chrome (bizarre since they’re both Webkit) and would frequently crash Firefox.

Ultimately, tools like these are intended to improve and simplify your workflow. Give them a shot for yourself to see if that intention actually plays out. If SASS, LESS, eCSStender, or any other similar tools result in actually adding time to your coding process, then toss them and revert back to good old HTML and CSS the way they were intended to be.

Join the Conversation

Leave a comment below and let us know which CSS extending or modifying tools you’ve tried. Tell us what you think of LESS and eCSStender. Do you like one and hate the other, love them both, or can’t see a reason for either to exist?

As developers in the real world, you ultimately decide what gets adopted and what doesn’t and we want to hear your opinions!

There is always a lesson or two to take away from these, and it could help you enter the New Year with a variety of new skills in your portfolio.

sIFR Lite

“Once upon a time some really good web developers created sIFR. Their goal was to seamlessly convert HTML headlines into nice fonts. Well, these developers did a great job getting it to work nicely. Looking at their code, I decided I would create a "lite" version of sIFR using a more object-oriented approach. sIFR Lite is a bit easier to read, and more intuitive to use.”

Visit site

DD_belatedPNG

Support for 24-bit PNG alpha-translucency background-image + background-position + background-repeat for IE 6 at last!

Visit site

The EqualHeights jQuery Plugin

“Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements.”

Visit site

jQuery.popeye – an inline lightbox alternative

“The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state."

Visit site

DD_roundies

An easy way to implement round corners in IE.

“No 9-cell tables for one round box. No images. Doesn’t add a half-dozen or more HTML nodes to a container element (more like one, maximum of two, and only in IE).”

Visit site

Niceforms

“Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.”

Visit site

jQuery Corners 0.3

“This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.”

Another round corner script for your benefit!

Visit site

Superfish jQuery menu plugin

“Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements.”

Visit site

JavaScript Will Save Us All

Eric Meyer’s opinion on why we should look to JavaScript to extended standard support badly lacking in many browsers, instead of waiting for the browser vendors to implement them.

Visit site

CSS Sprites2 – It’s JavaScript Time

“A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own.”

Visit site

jParallax

“jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.”

Pure joy!

Visit site

Fixed Footers without JavaScript

A pure CSS technique to position fixed footers, tested down to IE 5.5.

Visit site

Dynamic Layout

“Dynamic Layout is a simple JavaScript library that allows you to easily adjust page layout based on the current browser width.”

Visit site

Stop using Ajax!

“Ajax is a sound and useful idea. But every idea comes down to a practical implementation – a technology that makes it happen – and in this case the technology is immature, because it leaves groups of users behind. Most notable and greatly affected are those using assistive technologies, but also those using less capable browsers that don’t support the necessary scripting objects, or don’t support scripting at all. ”

Visit site

This is how you get sIFR to work

“The goal of this tutorial is to distill the information at the official site for sIFR into a simple step-by-step process of how to implement sIFR on your site.

After following this tutorial you will have a basic understanding of how sIFR works and will be able to expand into more advanced areas.”

Visit site

FancyZoom

Smooth Javascript Image Zooming For Your Web Pages. 

Visit site

Rotating 3D cube in JavaScript

Nothing more, nothing less! Check it out.

Visit site

Super Mario in 14kB Javascript

“Here’s an experiment in keeping things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.”

Visit site

10 Smart Javascript Techniques to Improve Your UI

“Javascript is typically used as an aesthetic language in web development. This means that web developers should almost always be using Javascript for one thing only: Improving the visitor’s experience. There are many clever and useful ways to improve a site from the user interface perspective. A developer can find nearly any snippet of Javascript to achieve what he or she wants to accomplish.”

Visit site

25 Amazing JavaScript Games (Some Fun And Inspiration)

“JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.

Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas).”

Visit site

Top 5 Favorite Bookmarklets

“Bookmarklets are the JavaScript-enabled links you can pull into your bookmarks that interact with whatever page you find yourself on. The best bookmarklets act as you would typically expect a toolbar to, by extending your browsing experience. However, since they’re written in JavaScript, they all by working within the browser and without requiring installation. Here are 5 highly recommended bookmarklets you can drag to your browser’s toolbar or to your bookmarks to extend your browsing experience.”

Visit site

10 Promising JavaScript Frameworks

“Popular JavaScript frameworks/libraries like jQuery, MooTools, Prototype, and YUI (to name a few of the most popular JavaScript frameworks out there) definitely have a solid foothold in the JavaScript framework arena. But for the more adventurous developers looking for new or alternative frameworks/libraries – there are some excellent frameworks outside the popular ones that’s worth checking out.”

Visit site

5 Useful Coding Solutions For Designers and Developers

“Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.”

Visit site

Calling WebServices via AJAX

This tutorial will give you a good idea of how to use JavaScript to interact with WebServices.

Visit site

JavaScript Pretty Date

“… A simple way to format old JavaScript dates in a "pretty" way. ”

Visit site

JavaScript iPhone Apps

“I’ve been watching, with interest, developers create new applications for the iPhone. Owning one myself – and being knowledgeable in JavaScript – I’ve been wondering what options there were for creating downloadable JavaScript applications or the iPhone. In doing some research I found a number of solutions, some simpler than others, some requiring more knowledge of Objective-C than others. ”

Visit site

Most Wanted Ajax Techniques: 50+ Examples and Tutorials

“Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed Ajax technology. When you combine some neat functionality courtesy of PHP with the cleverness of javascript you can produce some pretty cool results. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.”

Visit site

50 Excellent AJAX Tutorials

“AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation.

This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. ”

Visit site

10 things IT needs to know about Ajax

“The introduction of any new Web technology will affect a network’s infrastructure in ways that range from inconsequential to earth shattering. Ajax is one of the more disruptive new Web technologies traveling across networks today. To help you minimize future surprises on your network, we’ve outlined the 10 things you should take to heart about Ajax. ”

Visit site

jQuery timepickr

“jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.”

Visit site

Before we get started, you may like to view a demo of the end result.

How this form works?

When an input field receives focus, a tooltip with a small blue icon is shown under it. On the other hand, if validation fails, an error message is shown in the same place. Both cases are shown on the screenshot below.

Let’s start

We are not going to recreate the entire form, but rather a few fields just to see how it works. Let’s take a closer look at the code sample. Each field row has a label, an input field, an info message and a validation message. Below you can see the HTML structure and CSS classes.

Note that, by default, both info and validation messages are hidden, which is set in tooltipContainer CSS class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<fieldset class=“formContainer”>
    <h3>Join Now! It’s quick and easy.</h3>
    <div class=“rowContainer”>
        <label for=“txtFirstname”>Choose a username</label>
        <input id=“txtFirstname” type=“text” />
        <div class=“tooltipContainer info”>Minimum 4 characters, maximum 15 characters. This is your handle on Digg so don’t make it too personal.</div>
        <div class=“tooltipContainer error”>Rats! Username must be between 4 and 15 characters.</div>
    </div>
   // other rows here
</fieldset> 
 
body{
    font-family:Arial, Sans-Serif;
    font-size:83%;
}
.formContainer
{
    background-color: #F5EFC9;
    border:none;
    padding:30px;
}
.formContainer h3
{
    margin:0px;
    padding:0px 0px 10px 0px;
    font-size:135%;
}
.rowContainer
{
    width:100%;
    overflow:hidden;
    padding-bottom:5px;
    height:34px;
}
.rowContainer label
{
    width:140px;
    float:left;
    color: #758656;
    font-weight:bold;
}
.rowContainer input[type=“text”]
{
    width:200px;
}
.tooltipContainer
{
    height:16px;
    font-size:11px;
    color: #666666;
    display:none;
    float:none;
    background-repeat:no-repeat;
    background-position:left center;
    padding:0px 20px;
}
.info
{
    background-image:url(‘info.gif’);
}
.error
{
    background-image:url(‘error.gif’);
}

Now let’s add some interactivity

So far we have a static HTML structure and hidden messages waiting to be shown. We have to write a few lines of code to make them appear/disappear. Of course, this can be accomplished by pure JavaScript, but let’s involve jQuery. The reason for this is quite simple – less coding.

Like I mentioned at the beginning of this tutorial, an info tooltip should be shown each time an input field gets focus and hidden when it loses it. Turn this into jQuery code and you get this:

1
2
3
4
5
6
7

$(document).ready(function(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

Simple, isn’t it? Now, let’s see how to handle validation messages. We are going to create fake validation just for the purpose of this tutorial. We’ll use jQuery again.

1
2
3
4
5
6
7
8
9
10

function validateForm()
{
    $(”.formContainer input[type=text]”).each(function(){
        var text = $(this).attr(“value”);
        if (text == “”)
        {
            $(this).parent().find(”.error”).css(“display”, “block”);
        }
    });
}

In essence, what the code above does is it shows a validation message for each field that the user hasn’t entered text in. Please keep in mind that this is not real validation, it just simulates what would happen if validation failed. You would have to implement your own logic, eg. check for mandatory fields, email address format and so on.

Ok, after pressing the sign-in button, validation messages will be shown. Signup form on Digg.com hides these messages and replaces them with info tooltips when the user starts to type. So we are missing a piece of code that will hide validation messages that were previously shown.

Let’s do it the dirty way. We’ll extend our jQuery code that controls the appearance of tooltips to hide corresponding validation messages each time an input field gets focus.

1
2
3
4
5
6
7
8

$(document).ready(function(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.error”).css(“display”, “none”);
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

This way we have recreated the Digg.com signup form. You can check out live demo or download full source code.

Conclusion

You saw how to recreate the Digg.com signup form with simple CSS and just a few lines of jQuery code. However, there are a few pieces of advice I’d like to give you:

• Do not overwork the form – there is really no need for a tooltip that says “Enter your first and last name in the field that says First and Last name”. Instead, you can provide a message that shows a constraint, for example “Maximum 35 characters”.
• Use tooltip/validation color other that text color – try hitting the “Continue” button on Digg.com signup form before entering any text. The form becomes very hard to read and it’s difficult to distinguish where one field ends and the next begins.

Transparency rules

Mozilla browsers can display transparency, using an effect specified through -moz-opacity: 0.5; where the value is between 0 (completely transparent) and 1 (opaque).

Internet Explorer uses a filter property to allow you to show transparency. It takes the form filter: alpha(opacity=50); where the opacity value is between 0 and 100.

Some other browsers (and future browsers) will conform to the CSS3 specification allowing the property opacity: 0.5; with the value between 0 or 1 as with the Mozilla effect.

The way to get this working in all browsers is simply a matter of using all three rules at the same time:

#transparent-area {
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
}

Limitations

The main problem with the above CSS code is that it is notoriously browser specific, and thus does not conform to valid CSS standards. This doesn’t stop it working correctly, but does mean that your CSS code won’t validate.

Also, as new browsers are released and updated you’ll need to alter the above. Hopefully as they adopt the CSS3 standard more strictly, simply using the opacity: 0.5; rule will suffice.