1stwebdesigner - Graphic and Web Design Blog » Coding

jQuery Mobile – What You Need to Know

Rochester Oliveira — Mon, 30 Jan 2012 10:00:22 +0000

jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now.

I’m sure you’ve heard about jQuery. So, its mobile version is pretty close to what you already are used to, but with a lot of enhancements for mobile screen events (like touching instead of click, and there is no hover) and browsers (this one is tricky since there are plenty of browsers and devices out there) and capabilities (pluggable components).

The crazy thing is how simple it is to initiate and build a fully working mobile site. Actually, we’ll be talking about concepts, tips, codes, and in the meantime you can build your own app, in no more than one hour. Yeah, noob to ninja in one hour, this is what you’ll get here :)

So, let’s rock!

jQuery Mobile’s Main Concept

Cross browsing, a nightmare that was coming back

Those who used to code anything between 2001 and 2008 (while < IE6 was pretty huge, and Firefox / Chrome were just the new kids on the browser block) faced the nightmare of cross-browser issues. I mean, if you think that putting a vendor prefix before CSS code is cross-browser, try to get things working well on IE5.5, IE6, Opera and Firefox without CSS / JS hacks.

That, dear Padawan, was crazy.

Back to 2010, mobile was getting bigger and bigger. So were the types of browsers out there. Each smart phone and tablet has its own capabilities and its own particularities. Try mixing that with touch oriented screens and a huge range of screen sizes. Sound familiar?

Then, the hero arrives

Credits: bizior (photo) & Rochester Oliveira (edit)

jQuery Mobile comes with a huge compatibility table, with lots of devices and platforms well covered. All you’ve got to do is include their libraries, and try to stop your jaw from hitting the floor when you see the amazing features.

Oh, and it’s not just about cross browsing. It also covers a lot of UI elements that are already standards out there. And if you want a little more customized look you can easily change that, without messing up functionality.

Awesomeness proven, let’s code!

Ok, now you know why this project is so great, let’s take a look at some of the overall effects, components, good practices and code that you may want to use.

Basic structure

Just to get started, let’s grab our files from jQuery’s CDN. We’ll need just 3 files:

jQuery Mobile stylesheet
jQuery JS
jQuery Mobile JS

So your code will look like:




	Starter page
	
    
    
	
	
	


	
		
			Header
		
		
			Lorem ipsum
		
		
			Footer

As you may notice it uses HTML5 markup and data-* attributes to get things working. This snippet will output this (all tests done with iOS 5.0.1 @ iPod):

Important note, any “traditional” jQuery call should be placed before the call for mobile framework.

Basic UI components

jQuery Mobile uses data-* attributes to define UI components. Actually you just saw 4 of them above. Let’s see a small list of them and their correspondent data attribute:

data-role=”page” : you can set divs inside your HTML page to behave as pages. SO what we’ve done above is to create a page “home” inside our file
data-role=”header”: used to mark divs as top toolbars. You can set up data-position=”fixed” as well so it’ll behave as fixed toolbar
data-role=”content”: the main part of your website / app. Images, buttons, actions and all the magic happens here!
data-role=”footer”: defines a toolbar at the bottom of current page. May use data-position=”fixed” too so it’ll force to stay at the bottom of the screen
data-role=”button”: it’ll be useful together with elements. You may use also data-transition to define how it’ll load next page. Options: slide, slideup, slidedown, pop, fade, flip. Another cool thing is data-icon, which gives you a lot of default icons. You may also reduce its size using data-inline=”true”.
data-theme=”a/b/c/d/e”: Define color scheme used for elements.

Let’s wrap up all those attributes in a simple 2-page linking. Output:

Second page:

Code:




	Starter page
	
    
    
	
	
	


	
		
			Header
		
		
			Lorem ipsum
			 Second page
		
		
			Footer
		
	
	
		
			Header second page
		
		
			I'm second page!
		
		
			Footer second page

Navigation, Lists, Form & Dialog Components

Then we have a bunch of other default components that are easily implemented with jQuery Mobile:

data-role=”navbar”: Used to create menus. Then you should place a ul item with li’s and a’s (BTW, that’s the way you should create menus, always)
data-role=”listview” + data-filter=”true” : Awesomely easy way to create searchable lists. Really useful!
data-role=”fieldcontain”: This is a container for form elements
select data-native-menu=”false”: creates a cool select element as “floating” element instead of default select which stole half of screen area
select data-role=”slider”: Creates a “on / off” slider, useful for options pages
input type=email, tel, number, url..: accepts any HTML5 data format, and adjust keyboard to better fit data type
input type=range: same as before, but this one uses new HTML format and creates an actual slider, good for numbers range inputs
data-rel=”dialog”: is an anchor attribute that makes target page opens as dialog box.
data-add-back-btn=”true”: add this attribute to your page and you’ll have a “back” button. Cool, huh?

Now we’ll edit our demo file a little bit. It’ll be 4 pages now:

Home screen will have a dialog box
Form elements page will use all we have mentioned
List page will have a searchable list so you can try it
Alert page has target content when user clicks the alert link

Previews:

Alert page:

Form page:

Lists page:




	Starter page - 1stWebDesigner.com
	
    
    
	
	
	


	
		
			Alert element
		
		
			Open alert
		
		
			
				
					Form Elements
					List element
				
			
		
	
	
		
			Form elements
		
		
			
				Choose:
				

				Select slider:
				

				Input slider:
				

				Email Input:
				

				Number Input:
				
			
		
		
			
				
					Home
					List element
				
			
		
	
	
		
			This is a list
		
		
			
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Aliquam vitae leo metus, quis suscipit nulla.
				Maecenas accumsan urna sit amet justo commodo accumsan.
				Nulla vitae lacus augue, vel eleifend tellus.
				Integer at ligula turpis, at fermentum nisl.
				Nam dapibus risus at massa sagittis egestas.
				Praesent hendrerit purus vitae enim faucibus tincidunt.
				Curabitur sit amet lectus neque, id facilisis elit.
			
		
		
			
				
					Home
					Form element
				
			
		
	
	
		
			Alert!
		
		
			I'm alert page!

Custom font embedding

Probably no method will beat @font-face. So I suggest you go to Font Squirrel and generate your font files.

Compress images

You should do this all the time, actually. But when you are designing for the mobile world, even a few kb’s makes big difference. So save your user’s bandwidth and compress not only your code, but all your images.

JPEG mini has the best compressing service I’ve ever seen, and it’s quite easy to use, you should give it a try!

Remove components

We talked about just a few of many jQuery Mobile’s components. So it’s more likely you won’t be using them all.

The good news is that you can easily remove them, by making your own build :)

Now it’s your turn?

So, how are you planning to use jQuery Mobile? Have another cool tip to share? Don’t be shy and comment!

Mouthwatering Collection Of jQuery Plugins And CSS3 Tricks

Costin Găman — Wed, 30 Nov 2011 21:00:31 +0000

I’m sure that at one point or another you were designing a website and thought it could use a little something extra. That bit of something that adds extra functionality or enhances what it already has, making it not only easier for the user to receive the information they seek, but also present it in a neat package.

In no particular order, I give you a handpicked collection of jQuery plugins and some CSS3 tricks to top it off. Surely, with these in your designer arsenal, your creations will stand out more than ever before.

jQuery

1. Fly-out menu

Excellent when using enlarged text for emphasis along with visual content.

2. Grid portfolio

A very elegant way of displaying items with the possibility of quickly previewing the content.
Suggestion: use with other resizing elements so that the user can see them rearrange.

3. Slide out contextual tips

Expanding tool tips with a smooth animation, revealing extra content only when the user wants it.
Suggestion: use with images that display several products (e.g. furniture) or when explaining the highlights of a design in your portfolio.

4. Quicksand – reorder and filter

Organise and reorder items to make it easier to find exactly what you need. Click once and just watch everything slide into place.

5. Sunday morning – translation plugin

A little old, but still awesome. It adds a simple and appealing way of translating a website or just parts of it.

6. jVectorMap

Interactive map with the possibility of expanding for other uses. Includes the world map, US, Europe and Germany.

7. Shuffle letters effect

An interesting effect that can be added to make text elements more eye-catching. Basically, it shows random characters as it reveals the actual text.
Suggestion: use sparingly so as not to make everything confusing.

8. Mosaiqy – picture shuffle

Display pictures in a simple grid that shuffles the elements in a Rubik’s cube fashion.

9. Sponsor wall flip

Although the title says “sponsor wall flip”, that’s just one of the many uses for this plugin. Show visual elements and put bite-sized information on the back.
Note: contains a little PHP.

10. Colourful jQuery clock

Add a colourful and modern clock to your design or perhaps even adapt it into a countdown for when launching a new website!

11. MopTip2

MopTip2 is a plugin that lets you add customizable tooltips to various elements. The tooltips can close automatically or be manually closed and they may also display images.

12. Grumble

Another tooltip plugin with the added bonus of being able to use virtually any CSS styles and transform them into whatever you may want.

13. jQuery Timelnr

Timelnr is a stylish timeline gallery with the option of placing it horizontally or vertically, and having it play automatically.

14. Flexible nav

By just marking certain elements in the HTML, this plugin will automatically create a navigation menu for you, acting like small bookmarks placed neatly on the side of the window.

15. Deck – HTML presentations

Ever thought PowerPoint or Keynote presentations were cumbersome? Then look no further! With Deck you can create online HTML presentations with a multitude of uses, perhaps enhancing an e-learning product.

16. Apple-like Retina effect

Enhance your content by letting users see the finer details with this Retina-like plugin.

17. jQuery pageSlide

Simple and effective, pageSlide reveals information by pushing the entire page to the side, thus not disrupting the positions of other elements.
Suggestion: it could be used to hide a vertical navigation, leaving room for full-page content.

18. jqFancyTransitions

A simple and sleek gallery with strip transitions and several formats.

19. Panning slideshow

A more interesting slideshow which pieces together the slides and pans through them with a slightly elastic effect.
Suggestion: given the effect, the slides could actually be parts of one big image for something more special.

20. jqZoom

Similar to the Retina plugin, jqZoom can be customized in more ways and has more zooming options, such as drag-zoom or through simple mouse-over.

21. 3D tag cloud

Add a little creativity to your tag cloud by turning it into a tag sphere! Just click and drag to rotate it and use the mouse wheel to zoom in and out. The plugin simply transforms all divs that have the class “tags” and contain an unordered list with links inside.
Suggestion: since all it needs is a div, why not be creative and apply it to a navigation?

22. JEffects

JEffects is a plugin containing more effects that can be applied to various elements within your website. For instance, it can be applied to input fields to create a very pleasant effect.
Note: not free.

23. PhotoShelf

PhotoShelf is an elegant gallery that allows you to scroll through a collection of images and zoom in on portions of the selected image. It can also add separators in the stack to organise your items.
Note: not free.

24. Grid accordion

A double accordion, if you will. It smoothly expands to an easier to read width and makes room for subcategories, also displayed inside an accordion.

25. Latest tweets tooltip

A very interesting plugin that lets you display the latest tweets about a certain topic inside a resizeable tooltip.

Bonus: a few CSS tricks

1. CSS3 Transitions, Transforms and Animations

Everything you wanted to know about CSS3, plus some tutorials on how to create some nifty enhancements.
Note: some tutorials contain some JavaScript.

2. Pure CSS Accordion

As the title implies, this simple but versatile effect is made with pure CSS transitions, taking advantage of anchors.

3. OS X dock

Create an OS X dock with CSS3 properties, including reflections to make your design stand out.

4. CSS media query

Learn how to hide and display elements according to the size of the screen. A step towards responsive web design.

5. CSS3 multi column

With just one line of code you can split a text container into columns, lending itself nicely to dynamic content.

Simon’s Google Doodle – HTML5 + JS jQuery Game

Rochester Oliveira — Wed, 24 Aug 2011 10:00:05 +0000

Dude, you’ve heard a lot about Google doodles haven’t you? What about that Pacman one? It is just addictive. Company owners know how a funny game and unlimited search powers could be dangerous for productivity. And how it can be a marketing boost. The most amazing thing is that we can create our own addictive HTML game. Actually, this is why we are here today. With this tutorial you’ll see how to use some of JavaScript and HTML capabilities to build simple yet funny games.

So, let’s rock!

Demo first, please

You can download or try our online demo. Please, don’t forget to come back here if you want to just go playing first :)

“Well, actually I don’t know what a Doodle is..”

Google Doodles started when Larry and Sergey played with the corporate logo to indicate their attendance at the Burning Man festival in the Nevada desert. Since that day we’ve seen a lot of funny Doodles, and Google’s homepage is used to remind us of all kind of important facts.

But they are more than just paintings, games or experiments. They are made with the best current practices (some of them, created specifically for a Doodle). And Google being as supportive as they are of open source technology, usually release the commented source code, so you can just take a look and try to understand what those amazing guys are doing.

Oh, and I don’t know if you knew about it, but today is Simon’s day according to 1stWebdesigner’s official fake holiday calendar. Seems important, right? This is why we’ll build a game for it.

So, what will we be doing?

Simon is one of my favorite games (just after Sudoku and Gammon). Can you think of an easier game to code? You know, four buttons, easy actions. I just can’t think of a better starting point to learn HTML5 gaming.

Well, first of all you need to know what this Simon thing looks like. I just found a picture of it at Mercado Livre (kind of a Brazilian e-bay) and made my own version in Photoshop.

Since we are doing it via HTML5, the colors shouldn’t be directly on image (otherwise you won’t be able to change colors, make your own console…). So I’ve used Chris Coyier‘s technique for color animation. Basically we make our non-colored elements, and leave everything else transparent. Then our HTML5 will take care of the color itself (via CSS, background-color). Our final game background will be something like this:

Ok, then. Let’s start the fun part.

Basic HTML + CSS

Since our target isn’t basic HTML itself, I just grab a copy of HTML5 Boilerplate with a few edits to make it cleaner:




  

  Google.com - Simon's day  (1stWebDesigner.com game :D)

Now we need our gaming HTML stuff. As we’ve done it ready for different colors we will need to have two layers:

Background color- sets the color and will be animated when you activate a button
Link – activates all actions for each colored button.
Alerts – since they are part of the game itself, we’ll put them with all other game controls (level up, new game, game over)

Our HTML for this part will be something like this:

	
	
		 
		 
		 
		 
	
		 
		 
		 
		 
	
		
			Ready? let's rock!
		
		
			Oh Yeah!
		
		
			Oh Noes... Almost there!

As you can see, the four “div.box” elements are the background color for each button (red, blue, green, red).

So when someone clicks #box-click-0 it will “activate” the button #box-0. We have a lot of id’s because they result in better JS performance.

Our CSS for that will be:

#main {
	position: relative;
	left: 155px;
	width: 200px;
	height: 200px;
}
	.box {
		display: block;
		float: left;
		width: 100px;
		height: 100px;
	}
	a.box {
		position: absolute;
		text-decoration: none;
		background-image: url("../img/bg_game.png");
		background-repeat: no-repeat;
	}
	a.box:focus {
		outline: none;
	}
	.btnTL { background-position: top left; }
	.btnTR { background-position: top right; }
	.btnBL { background-position: bottom left; }
	.btnBR { background-position: bottom right; }
		 .btnTL, .btnTR {
			top: 0;
		 }
		 .btnBL, .btnBR {
			bottom: 0;
		 }
		 .btnTL, .btnBL {
			left: 0;
		 }
		 .btnTR, .btnBR {
			right: 0;
		 }
	#box-0 {
		background: #c00000;
	}
	#box-1 {
		background: #1506a3;
	}
	#box-2 {
		background: #046606;
	}
	#box-3 {
		background: #ea8f0c;
	}

Here is our effect: all our links have the console background, bg_game.png (positioned according to what it should be, of course). Since they are on top of divs, what we will see is the bg_game.png AND the element’s color ( #c00000, #1506a3…).

Ok, we won’t be long on this. Maybe this is enough topic for a single article :)

Search form

Have you noticed the recent (ok, maybe not that recent) Google’s switch to real time results? That’s pretty cool, yeah, I know. But it makes a little bit harder to link directly to a search results page.

Since our demo has a search form and we want to make it work, let’s put a little JS magic on it:

Javascript:

$(function(){
	$("#search").submit( function(event) { event.preventDefault(); googleRedirect(); } );
});
function googleRedirect() {
	var query = $("#query").attr('value');
	var url = "http://www.google.com/#q=" + query + "&fp=1";
	window.location = url;
}

This way it will work ;)

Cookies? No, no, local storage instead!

Well, Cookies are great for some things, but this time they aren’t the very best option. Here we will make use of Local Storage. This is basically the same idea as Cookies, it allows you to store data related to your site, the difference is that it’s faster and very useful in some situations.

As its name suggest it is local, so it won’t be sent to the server (you save a few kbytes and processing). Cookies are limited to 4kB and 20 Cookies per domain. With local storage you can record up to 5MB of user data.

The only downside is that it works only on real browsers and IE8+. So, forget about IE7 this time (maybe later with some jQuery data fallback).

Another huge advantage is that it is surprisingly easy to set / remove;

localStorage["level"] = 15; // create it with 15 as value
var level = localStorage["level"];  //now var level is 15
localStorage.removeItem( "level" ); //remove it!

So, this is why we will use it this time.

A few options

Then we need to have a way to start the game, see which level we’re playing, these sort of trivial things. For this, we’ll just put a simple HTML box with Google’s logo:


	
		Level: 1
		New Game
		High Score: 1
		Credits

Well, what is important here is that our counters have id’s wrapping them, so we can easily change their text.

Let the game begin

Random sequence

The very first thing to do when you start this game should be to generate a random sequence. Because this sequence will be the “right path” to be followed by players. We could generate it on-the-fly as our gamer reaches new levels, but it will be easier to do this way.

So we will create a simple function that just generate a random sequence with 50 digits (levels) and only with numbers from 0 to 3 (our colors!):

function randomSequence() {
	var chars = "0123"; // four colors!
	var string_length = 50; //pretty hard, isn't it?
	var sequence = "";
	for (var i=0; i < string_length; i++) { //we'll have from sequence[0] to sequence[49]
		var rnum = Math.floor(Math.random() * chars.length);
		sequence += chars.substring(rnum,rnum+1);
	}
	return sequence;
}

Binding clicks and hovers

Now we need to prepare our all a.box elements to recognize clicks and to animate properly our div.box when you hover any of them.

This time we will need jQuery .hover() and .click() functions:

$(function(){
//caching our elements for better performance
box0 = $("#box-0");
box1 = $("#box-1");
box2 = $("#box-2");
box3 = $("#box-3");
clickbox0 = $("#box-click-0");
clickbox1 = $("#box-click-1");
clickbox2 = $("#box-click-2");
clickbox3 = $("#box-click-3");
clickbox0.click(
	function(event){
		event.preventDefault();
		clicked(0);
	}
);
clickbox1.click(
	function(event){
		event.preventDefault();
		clicked(1);
	}
);
clickbox2.click(
	function(event){
		event.preventDefault();
		clicked(2);
	}
);
clickbox3.click(
	function(event){
		event.preventDefault();
		clicked(3);
	}
);
var minHover = 0.7;
var maxHover = 1;
var timeHover = 500;
clickbox0.hover(
	function(){
		box0.stop().animate({opacity: minHover}, timeHover);
	}, function() {
		box0.stop().animate({opacity: maxHover}, timeHover);
	}
);
clickbox1.hover(
	function(){
		box1.stop().animate({opacity: minHover}, timeHover);
	}, function() {
		box1.stop().animate({opacity: maxHover}, timeHover);
	}
);
clickbox2.hover(
	function(){
		box2.stop().animate({opacity: minHover}, timeHover);
	}, function() {
		box2.stop().animate({opacity: maxHover}, timeHover);
	}
);
clickbox3.hover(
	function(){
		box3.stop().animate({opacity: minHover}, timeHover);
	}, function() {
		box3.stop().animate({opacity: maxHover}, timeHover);
	}
);
});

It is pretty important caching all our elements, since it improves a lot our performance.

Magical JS variable variables and easy error detection

At this point you have coded all the hover and click elements, but when you click them nothing happens, of course. Let’s fix it:

// yeah, someone is playing it!
function clicked( color ) {
	// refresh my memory, how long have you gone so far?
	var level = localStorage["level"]; // this is our current level
	var clicks = localStorage["clicks"]; //this is our current item INSIDE one level
	var speed = localStorage["speed"]; //to make it more fun, when you get right it goes faster
	// blink it!
	window['box' + color].stop().animate({ opacity: 0.3 }, (speed * 0.5) ).animate({ "opacity": "1" }, (speed * 0.3) ); //variable variables in js via window[varname] :)
	// well, this time you've got it right?
	if ( localStorage["sequence"][clicks] == color) {
		//oh, yeah!
		localStorage["clicks"]++;
		//have you finished this level?
		if ( level == clicks) {
			nextLevel();
		}
	} else {
		//oh, noes!
		endGame();
	}
}

Every variable in javascript can be accessed via its own name, like box1 OR as an index inside window array, just like window['box1']. With this we can easily select which is the right element to blink (when you click any button, it should blink, right?).

Ok, you are right! Let’s go to the next level

When you get it right, the game should get you to the next level and the events should accelerate a little bit.

Then when you get it right you should also know which is the right sequence at your current level + 1, so let’s do it:

function nextLevel() {
	//Oh, Yes
	showBox("#ohYes", 1000);
	// you deserve it, let's move on
	localStorage["level"]++;
	levelCount.text(localStorage["level"]);

	localStorage["clicks"] = 0;
	//let's show you how it'll be
	current = 0; //since it's used just for animation, let's leave it as global var
	if ( localStorage["speed"] > 300 && (localStorage["level"] / 5) == 0 ) { //our maximum speed, and we'll only acelerate it each 5 levels
		localStorage["speed"] = localStorage["speed"] * 0.8;
	}
	setTimeout( function() { rightPath(); } , localStorage["speed"] );
}

Function showBox just shows our div and hides it after one second.

As you can see this piece of code isn’t complete, we will need the function rightPath() to see what comes next. Let’s go:

function rightPath() {
	if ( current <= localStorage["level"] ) {
		var sel = localStorage["sequence"][current];
		window['box' + sel].stop().animate({ "opacity": "0.5" }, (localStorage["speed"] * 0.5) ).animate({ "opacity": "1" }, (localStorage["speed"] * 0.3) );
		setTimeout(
			function() {
				rightPath();
			},
			(localStorage["speed"] * (1.5) )
		);
		current++;
	}
	for (var i=0; i <= localStorage["level"] ; i++) {
		var time = 1000 * (i + 1);
	}
	i = 0;
}

This is kind of crazy, isn’t it? This is a simple recursive function. It will call itself, blink the right button for one position and then go to the next until we reach user’s current level.

What if you get it wrong?

Maybe instead of click the right button you can just click the wrong button. Then we need to punish you and ban you from the entire world wide web. Let’s see our function for that:

function endGame() {
	//let's see if you have a high score, and save it
	if ( localStorage["hs"] == undefined || localStorage["level"] > localStorage["hs"] ) {
		localStorage["hs"] = localStorage["level"];
		$("#hs").text(localStorage["hs"]);
	}

	localStorage.removeItem( "level" );
	// Oh, noes!
	showBox("#ohNoes", 2000);
}

Well, here we just check if you’ve done something better than this play and then remove your current level so you can restart a new game and try a little harder :)

By the way, did I mention how will you start a game? No? Sorry, my bad.

Sorry, NOW the game will begin

What do we have to do in order to start a match is to reset almost anything we have here and then show what is the right path.

// just like starting over!
function newGame() {
	current = 0;
	levelCount.text(1);
	//let's call our sequence and memorize it
	localStorage["sequence"] = randomSequence();
	//wow, we haven't got anything right until now :)
	localStorage["level"] = 0;
	//clicks binding
	localStorage["clicks"] = 0;
	//let's make things slow for now
	localStorage["speed"] = 1500;
	//let's show our welcome warning
	showBox("#letsRock", 2000);
	//and let's show the first color
	rightPath();
}

What is your best score?

Hope you enjoy this quick HTML5 game tutorial and that you find some easter eggs, you know, since it’s a JS game we can’t hide a lot of things on it :)

But the most important thing here is: what is your best score?

jQuery Plugin Development: Hover to Reveal Masked Password

Rochester Oliveira — Sun, 24 Jul 2011 10:00:47 +0000

We talked about how to improve your HTML forms performance a couple of days ago. There we covered a pretty controversial topic “Don’t mask your passwords”, discussing how bad masking your passwords could be for usability.

At this moment, we basically have two options: mask password field and don’t ask for any feedback, or show password field as text and potentially decrease security.

This is why I think a hover revealing password could be a really good alternative: You can increase your security, and if you are unsure about what you’ve typed just go and hover over it.

So, what we will be doing today is a jQuery plugin to do that, and additionally, we will have a behavior pretty similar to what many mobiles does, where we can see the last character for a couple of seconds. This is a good chance to learn more about plugins, dynamically generated content, and some good coding practices.

Moreover with this technique we could apply different effects and a lot of variations since all this things are based on non-obtrusive and almost only decorative javascript.

So, let’s rock!

Demo, download and preview

Let’s begin with the best part. You can see our working demo or download our files and jQuery plugin.

Usability background

Before any coding I think it’s important to know why are we doing all these things. It is all about user experience and to make things the best they can be.

The man who started discussing masked passwords (as far as I know) is Jakob Nielsen, with his extremist opinion expressed in stop password masking article. But I really think we don’t need to stick with just two options. I think we can improve all these techniques, like what mobile developers have done, improving user experience by creating a “new” way to input password data.

Don’t get me wrong, sometimes we do need to just keep masking passwords for security reasons. You know, sometimes we are near suspicious people or jealous girlfriends just waiting for a single mistake to steal our password and make big damage to our online life. But sometimes we don’t. I mean, we don’t need to let our software ready only for the worst case.

We have to be ready for the worst and the best. From IE6 (argh!) to Chrome 14.0.803.2 beta. From jealous girlfriends to hurried surfers. This is the tricky part, trying to be the best in most cases.

This is why we can’t just let passwords to be masked by default. We have to give a better option to our loyal users.

Getting started

What we will do here is to get a common password field, change it to text and create a mask above it, which is filled as you type. With this you can do anything with the “mask” without affecting the input content itself.

Maybe this image will better explain how it works:

Well, finally, let’s get started on coding.

We will start with a pretty basic form markup. As you all know it’s quite simple, so let’s add two fields, one that should come with a default value and another in blank, for you to play with as you want.


	Sign Up!
	
		
			Old Password
			This is our awesome password field with default value. Try it out!
			
		
		
			Password
			This is our awesome blank password field. Try it out!

Ok, then we need to call our magic jQuery and plugin files. Let’s do that:

Well, let’s create our basic plugin file. You can see some tips about it in our jQuery Smooth Table of Contents Plugin, where we have a really simple structure.

(function($){
 $.fn.hoverpass = function(options) {
	//Our default options
	var defaults = {
		bullet: "•", //which should be the "masking" character
		font: "'Lucida Console', monospace", //please just use MONOSPACE fonts
		bg: "#fff", // background style for bullets
		free: "", // add your own additional styling here
		freeBul: "float: left; overflow: hidden;", // add your own additional styling for bullets here
		delay: 500, //how long it takes to create the bullet over the last character, in milliseconds
		delayHover: 3000, //how long it takes to hide again a hovered character
		animation: 500, //how long it takes the animation itself
		maxSize: 10 // maximum number of characters, to prevent  bullets exploding input's size
	};

	//let's extend our plugin with default or user options when defined
	var options = $.extend(defaults, options);

    return this.each(function() {
		//our action goes here
    });
 };
})(jQuery);

Above we defined our default variables, let me explain some of them a little bit:

bullet – Is what will mask our password. You can use any character but use just one character or HTML entity.
font – This is really important, this plugin only works with monospaced fonts. Since in other types, each character has his own width, we can’t “mask” it.
bg - If you use any background in your input, then you should apply it to your mask too, since it will be above the input.
free - Here you should add margins in order to compensate any padding that your input has. Furthermore you should set your input’s font-size here.
maxSize – This is important if your password field is too short. If you don’t adjust it you may get some extra bullets exploding your input’s size.

At this point you have a basic plugin, that is called via $(elem).hoverpass(), defined by our second line $.fn.hoverpass = function(){}.
I know, this name sucks. I would be glad if you send suggestions about better names :).

Change our input type to text

I don’t know if you’ve tried this before, but let me tell you something, you just can’t change the type of inputs. This happens due to security reasons, right? Well, seems that just IE will worry about it (you can do it via old JavaScript in real browsers). Anyway, what we have to do then is create a “clone” of current input without type property.
There is several ways of doing this, I’ve done it this way:

return this.each(function() {
	//let's declare some variables, many as a "shortcut" for options
	var  bullet = options.bullet,
			font = options.font,
			bg = options.bg,
			free = options.free,
			freeBul = options.freeBul,
			delay = options.delay,
			delayHover = options.delayHover,
			animation = options.animation,
			lastBul = "";

	//since we just can't change a field's type, we'll remove it and append a brand new text input on it's place
	var oldElement = $(this); // caching element, much better performance
	var inputHTML = ''; //this is our basic input text, with our monopace font
	var input = oldElement.after(inputHTML).next(); //appending our simple text field with our styling (font-family) AND caching it as var "input"

	/****
		we are saying here:
			define the following variables: attr , i (zero), attrs (array with all oldElement attributes), l (size of attrs)
			while our counter (i) is smaller than attributes lenght (l) increase our counter and run this code
	*/
	for ( var attr, i=0 , attrs = oldElement[0].attributes , l =attrs.length ; i < l ; i++){
		attr = attrs.item(i)
		if (attr.nodeName != "type" && attr.nodeName != "style") { //well, we defined our type as text and font-style!
			input.attr( attr.nodeName, attr.nodeValue );
		}
	}
	oldElement.remove(); // bye, bye input type="password"!
});

Create our mask and bullets

Wow, at this point, when you define $(elem).hoverpass() it will turn into a monospaced text input. Pretty cool, huh? But we want more than this.

Now we will create our bullets container. The only really interesting thing in this two lines is that jQuery element caching again. You really should be using this simple technique:

	// let the game begin
	var maskHTML = ''; //our container with his styling
	var maskContainer = input.before(maskHTML).prev(); // appending our container for bullets with styling (font-family, free)

Now we’ll prepare our bullets HTML, since it will be used several times, and add some bullets when we have a “value” attribute defined.

	var bulletHTML = ""+ bullet + "  "; // our bullets HTML with styling (bg, freeBul)
	var countBullet = 0; // this is our counter, it is important to prevent our mask to get bigger / smaller than our input or its maximum size

	//since we use it from different places, it's better to add it via function
	function addBullet() {
		// add our last bullet, but hidden, and show anything that isn't last bullet
		lastBul = maskContainer.append(bulletHTML).find(":last-child").hide();
		maskContainer.find(":not(:last-child)").each( function(){ $(this).show();  } );
		//start timer to show  lastBul
		lastBul.delay(delay).fadeIn(animation);
		countBullet++;
	}

	//first loop adding bullets when we have a default value
	for ( i=0 ; i < input[0].value.length ; i++){
		addBullet();
	}

Well, at this point you should see again a textfield but if you have a value attribute defined, you’ll see a lot of bullets and the last one fading after one second. Although, if you type, nothing happens.

It’s time to play with keyboard

No, we won’t be taking music classes here :)

We now need to append new bullets every time something is typed in our password field, and remove one bullet if the pressed character is delete or backspace.

We could do this via keypress, keyup or keydown.

Thinking about it a little bit with keydown and keypress (they are very similar) we bind “pressing key” and with keyup we bind “releasing key”. Looking a little closer, you might notice that in our case it means that keydown/keypress is called before we have any change in our field’s value but keyup is called after any change occurs.

This is why we need to use keyup here. We have to look at our field’s value and see “hey, have you changed your size?” in order to append or remove bullets. This is because we could have several scenarios when user selects part of the password, press delete in the beginning of the field and much other things that would be too painful to bind as separated actions.

So, let’s do it:

//let's bind all keydown and create / remove our bullets ; we need do use keydown in order to detect special characters in non-gecko browsers
	input.keyup(
		function(event) {
			//check if something was really typed
			if (input[0].value.length > countBullet) {
				addBullet();
			} else { //ooops, delete or backspace?
				//then we check if something was really deleted
				while (input[0].value.length < countBullet) {
					maskContainer.find(":last-child").remove();
					countBullet--;
				}
			}
		}
	);

Finally, hover-revealing field!

Well, now we just have to hide our bullet when someone hovers it. Kind of easy, right? Well, it isn’t that easy. It is because we have to hide our bullet, but we can’t lose it’s width, because if we do, our users would see only the last character of the password (not the ones in the middle). What we can do is to fade it to an insignificant opacity (like 10%) and then change it’s height to 1px, so we still have width.

Ok, now it’s just to use elem.hover() and we’re done, right? Again, no. This is because we have dynamically generated content we should use live() or delegate() to bind it. In my tests delegate had a much better performance, so we will do it this way:

//hide bullets based on a jquery object
	function hideBullets(object) {
		object.stop().css({ "height": "auto"}).animate({ opacity: 1 }, animation).removeClass("hpHiddenBullet");
	}
	//hover function for our bullets
	maskContainer.delegate(".hpBullet",  'hover',
		function(){
			var item = $(this);
			if (  item.hasClass("hpHiddenBullet") != true ) {
				hideBullets( $(".hpHiddenBullet") );
				item.stop().addClass("hpHiddenBullet").animate( { opacity: 0.01}, animation, function() { item.css({ "height": "1px"}); } );
				setTimeout( function() {
					if (  item.hasClass("hpHiddenBullet") == true ) {
						hideBullets( item );
					}
				}, delayHover);
			}
		}
	);

Are you hungry yet?

Wow, hope you guys liked it. Maybe you’re not going to use this effect itself but I’m sure we have a lot of good snippets here that are worth using in other cases.

Talking about the final effect, what do you think about it? Have you seen a better alternative?

Show us your opinion and let’s find what could be the very best implementation to our users!

17 CSS/HTML Effects with Cross-Browsing Alternatives

Rochester Oliveira — Fri, 22 Jul 2011 10:00:01 +0000

Well, we surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser.

You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right?

Thus, our point here is to collect some cool CSS effects that you should be using:

• Min / Max width (IE included)
• RGBA (IE included)
• Opacity (IE included)
• Image rotation / scaling (IE included)
• FullScreen Background (IE included)
• Background pattern or bullet without image file
• Text Shadow (IE included)
• Multiple borders (IE included)
• Box Shadows (IE included)
• Rounded corners
• Screen reader only accessible content
• Don’t use negative text-indent
• Clearfix (IE included)
• @font-face (IE included)
• Pull quotes without image
• CSS for iPhone4 (higher resolution)
• CSS landscape / portrait orientation for mobiles

So, Let’s rock!

Min / Max width (IE included)

Well, many of you are used to just replace the lack of min / max width / height for IE with fixed dimensions, right? But you don’t need to do it anymore. IE is not a strict standards browser and sometimes we can take advantage of this to code things that would be awful to see in standard CSS code.

You can, in this case, insert some IE expressions (basically, JavaScript code) to check current body width and adjust element’s width as follows:

#content {
	width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
	min-width: 760px;
	max-width: 1240px;
}

RGBA (IE included)

This time we will need some IE filters to get the job done. You’ll have the standard markup, IE6 correction and IE8 correction.

IE corrections is based on gradient filter, that actually we put just one color to the beginning and the end, and BAM! We have a pretty RGBA background.

The first two digits should be the opacity and the last one should be the color itself. Don’t know why, it just don’t get the opacity right… Maybe its just a bug inside a bug :)

.element {
  background-color: transparent;
  background-color: rgba(255, 255, 255,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}

Opacity (IE included)

Wow, filters again! But this time we have a different syntax for IE8 and earlier versions. And again be sure to put khtml, moz and standard declarations.

.selector {
	ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
	filter: alpha(opacity=50); /* internet explorer 5~7 */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}

Image rotation / scaling (IE included)

Another pretty cool and virtually unused feature is image rotation / scaling. There is another filter that allows you to rotate images, but unfortunately it just allows you 90º increments.

Although you can also mirror images, that makes cool image editing possible to almost every real browser and IE. For real browsers we will use the transform property with each vendor prefix.

	img {
		transform:
			rotate(180deg)
			scale(-1, 1);

		/* for firefox, safari, chrome, etc. */
		-webkit-transform:
			rotate(180deg)
			scale(-1, 1);
		-moz-transform:
			rotate(180deg)
			scale(-1, 1);

		/* for ie */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

		/* opera */
		-o-transform:
			rotate(180deg)
			scale(-1, 1);
	}

Fullscreen Background (IE included)

Sometimes we just need a quick way to get full screen backgrounds. Well, hope you don’t use JavaScript just to do this, because you can do it with a few lines of CSS.

The magic here is to set a div that goes fullscreen and inside it you can put a landscape, portrait or full sized image.

	.content {
		position: relative;
		width: 760px;
		z-index: 10;
	 }
	 .background {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index:2;
	 }
		.portrait {
			height: 100%;
		}
		.landscape {
			width: 100%;
		}
		.full {
			width: 100%;
			height: 100%;
		}


	aaaaaaaaaaaaaaaaaaaaaaaaaaaa

Background pattern or bullet without image file

Pretty sad that IE doesn’t allows you to use base64 encoding instead of real files. The best part is to use it for mobiles, since it saves you some http requests and precious time.
I’ve used it for a custom list style image without images. I just generated the base64 from Patternfy and pasted it in my CSS, like this:

	 ul {
		list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
	 }

Text Shadow (IE included)

Again we will need some IE filters. But this time IE filters can destroy your font’s readability, so try not to use it too much and preferably, only when working with larger fonts.

	p {
		text-shadow: #000000 0 0 1px;
		zoom:1;
		filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);

		-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
	}

Multiple borders (IE included)

When you want more than one border, for real browsers you’ll need to use an outline or :before and :after elements. For IE you could use filters to gain some an extra border.

	div {
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
		filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
	}
	div:before {
		position: absolute;
		top: 0px;
		width: 100%;
		height: 100%;
		border-top: 1px solid #212121; /* top border! */
		content: '';
	}
	div:after {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 1px;
		border-bottom: 1px solid #212121; /* bottom border! */
		content: '';
	}

Box Shadows (IE included)

The same filter we’ve used to create a second border can be used to generate box shadows. Be aware that this filter can mess up an element’s width, so if you want to use it with any grid system, prepare for the headache.

	.shadow {
	    -moz-box-shadow: 0 0 4px #000;
		-webkit-box-shadow: 0 0 4px #000;
		-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
		filter:
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
		box-shadow: 0 0 4px #000;
	}

Rounded corners

The bad part about almost-standard properties is that each browser implements its syntax differently. So for round corners we have a pretty strange behavior, where standards browsers have different ways to say same thing:

.rounded  {
	-moz-border-radius: 10px; /* gecko */
	-webkit-border-radius: 10px; /* webkit */
	border-radius: 10px; /* CSS3 standard */
	-khtml-border-radius: 10px; /* old konkeror */

	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;

	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;

	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;

	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
 }

Screen reader only accessible content

Sometimes you want to improve the accessibility of your site, so you put some fancy links like “Jump to content” or “Jump to navigation”. So you just put “display: none” or “visibility: hidden” and hope it works, right? Well, it doesn’t. Some tests show that many screen readers just ignore the display:none or visibility: hidden part, so you don’t have any accessibility improvement.

What you can do instead is to use position absolute and hide this content above browsers visible area. But you have some risks on this technique, since it hides content, Google can consider it gray or black hat.

.hidden  {
	position: absolute;
	top: -10000px;
	left: -10000px;
 }

Don’t use negative text-indent

Since we’re talking about hidden content, take one more note, never use negative text-indent again. This is a known technique so you have a lot of SEO downsides by using it, since many bots can recognize it nowadays.
Just use alt attribute, that is much safer than hide content.

Clearfix (IE included)

Many of you know about .clearfix method for correcting heights when you use floats. Well, in many of these cases, that amount of code could be replaced by just two lines:

	.clearfix {
		zoom:1;
		overflow:hidden;
	}

@font-face (IE included)

If you’re still using cufon just because you don’t trust @font-face, think again.
Font Squirrel provides an amazing @font-face generator service, that allows you to put really good looking fonts in your site without worrying about all that JavaScript stuff.
The final code provided is something like this:

@font-face {
    font-family: 'MandatoryRegular';
    src: url('font/mandator-webfont.eot');
    src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/mandator-webfont.woff') format('woff'),
         url('font/mandator-webfont.ttf') format('truetype'),
         url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Pull quotes without image

We talked about this before, but it is possible to create curly quotes without any image. And it is not that hard. You just need a :before and blockquote:

	blockquote:before {
		display: block;
		float: left;
		margin: 10px 15px 0 0;
		font-size: 100px; /* let's make it a big quote! */
		content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
		color: #bababa;
		text-shadow: 0 1px 1px #909090;
	}

CSS for iPhone4 (higher resolution)

As time goes by we get more and more powerful mobile devices. It is a good practice to give create a mobile version, with reduced images and overall files size, but we have also to give a better experience for the ones with newer devices.
Since iPhone4 has a higher resolution, if you don’t provide a better (and larger) version of you logo, for example, your users will get a blurry version of it. This is a problem that can be solved with a very few lines:

@media handheld, only screen and (max-width: 767px) {
	.logo {
		/* common low-res and low-size, of course */
		background: url(logo.jpg) no-repeat;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}
}

CSS landscape / portrait orientation for mobiles

This is a nice starting point for correcting layout bugs in each version of each layout mode for many mobiles, provided by stuffAndNoise

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		/* Styles */
	}

	/* Smartphones (landscape) ----------- */
	@media only screen
	and (min-width : 321px) {
		/* Styles */
	}

	/* Smartphones (portrait) ----------- */
	@media only screen
	and (max-width : 320px) {
		/* Styles */
	}

	/* iPads (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px) {
		/* Styles */
	}

	/* iPads (landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
		/* Styles */
	}

	/* iPads (portrait) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : portrait) {
		/* Styles */
	}

	/* Desktops and laptops ----------- */
	@media only screen
	and (min-width : 1224px) {
		/* Styles */
	}

	/* Large screens ----------- */
	@media only screen
	and (min-width : 1824px) {
		/* Styles */
	}

	/* iPhone 4 ----------- */
	@media
	only screen and (-webkit-min-device-pixel-ratio : 1.5),
	only screen and (min-device-pixel-ratio : 1.5) {
		/* Styles */
	}

50 New And Crazy Cool jQuery Plugins From Year 2011

Daniels Mekšs — Sun, 10 Jul 2011 11:00:57 +0000

With 2011 a little over half over it’s the right time to look at, and uncover, the current trends of web design and development. It’s sure been a helluva ride for jQuery and it’s growth just doesn’t stop. With more than 40% of websites using jQuery now it’s no longer possible to ignore this efficient, powerful and lightweight tool.

jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code. This article presents 50 advanced, cutting-edge yet simple jQuery plugins that will enhance your web experience drastically.

1. jbar

jbar is a jQuery plugin that transforms an unordered list

2. e24TabMenu

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands and collapses smoothly.

2.1. RoyalSlider – Touch-Enabled jQuery Image Gallery

RoyalSlider is easy to use jQuery image gallery with animated captions and touch support for mobile devices. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

View Demo

3. Simple jQuery Fluid Thumbnail Menu Bar

The idea of a fluid thumbnail bar is simple: create a list of thumbnails within a space where the overflow can be flipped through page by page.

4. Accordion Multilevel Menu

The plugin has a boolean initialization option accordion. If you set this value to “true” the menu behaves as an accordion menu. The irrelevant menu items are closed while the relevant slides open.

5. DropKick

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making the menu look good.

6. jQuery Resize And Crop

jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting a person to visually resize an image and place a crop. Then it is
possible to use the coordinates data for any purpose.

7. Cloud Zoom

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatibility across browsers.

8. Simple jQuery Image Hover Effect

This is a simple technique to animate an image when hovering using jQuery’s animate() effect.

9. Easy Image Zoom

Easy Image Zoom gives you the opportunity to see large details of the product while moving the cursor over a medium sized image.

10. ImageLens

Use this jQuery plug-in to add lens style zooming effect to an image,

11. ImageSelect

ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.

12. jQuery Mapz

With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.

13. jQuery Image Gallery

Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.

14. JbhSlider

JbhSlider is a fully customizable slider. You can add/remove navigation or pagination. You can set the effect, the duration and the functions after/before.

15. jQuery.slideBanjo

jQuery.slideBanjo is a plugin, that shows pretty slides on your site. Supports background loading of pictures, simple to customize, full documentation. Compatible with IE7 and higher.

15.1. Estro – jQuery Ken Burns & swipe effect slider

This jQuery plugin uses unobtrusive javascript to transform a block of simple HTML markup into a gorgeous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimized, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.

View Demo

16. Slides

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

17. jShowOff

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg.

) inside a specified wrapper element (eg.

WordPress Plugin Development – Relate Posts as a Series Part 2

Rochester Oliveira — Tue, 05 Jul 2011 10:00:50 +0000

So, we started our dive into WordPress plugin development with the first part of this tutorial where we talked a little about planning, basic plugin structure, custom post types, metaboxes and how to add custom functions to WordPress’s defaults actions.

Today we will talk a little more about metaboxes and jQuery, shortcodes, and front-end functionality.

All these things with a pretty practical example of how to make a plugin that will relate posts as a series.

So, let’s rock!

A little recap… and download!

Last time we completed the first three steps:

Planning – We’ve made our entity-relationship diagram to know which data we would have to store
Create our plugin and custom post type – We’ve created the basic file for our plugin, and registered our series custom post type
Post functionality – We’ve made some metaboxes to store custom data, and added them to WordPress’s default post saving function via actions.

If you didn’t read the first part of this tutorial, I highly recommend you to do this now, but if you don’t want to, you can still understand the functions and logic we are using here and make use of it.

Well, for people who are in a hurry, you can download the fully working plugin and make use of it without having to copy/paste all this code ;).

Step 4 – Series functionality

Registering our metabox

After we have control over all our posts related to series, we need to be able to manually edit the series itself.

In order to do this, we will need some metaboxes on them also. So, let’s edit our plugin with this code (here is just the additional code to avoid any confusion with the code that I explained last time, and won’t explain now):

//this function will register our metabox for wd_series custom post type
	function wd_call_meta() {
		add_meta_box(
			'series-data', // id of the  we'll add
			'Series Custom Data', //title
			'wd_series_options', // callback function that will echo the box content
			'wd_series', // where to add the box: on "post", "page", or "link" page
			'side', //positioning
			'low' //positioning
		);
	}
//with this we call it!
add_action('admin_menu', 'wd_call_meta');
?>

Our HTML metabox and jQuery enhancements

So, as you can see this function doesn’t have the metabox itself, it just says “Hey, WordPress, you should add function wd_series_options as a metabox for this guy!”. So we now need the metabox itself.

This is a tricky part since this box will give the user the ability to add “fake” posts to the series, so our readers could be interested in this series content. So what do we have now is:

Standard posts for a series, added via post editing screen
Fake posts for a series, added via series editing screen
Delete option, to remove a post from a series

We have also the opening / closing option for a series, and a really important attribute, the size of the series, so we don’t get lost in all our counters.

To get this working we will need some jQuery. We will have a “model” row, and when the user wants to add more lines we will get this model and duplicate it inside our form. We have to pay attention in regards to recovering data. We have to dynamically add rows as they are needed by one series. And we have, of course, some CSS for that.

Let’s do it this way:

ID);
		$open      = $custom["open"][0];
		$numFields = $custom["size"][0];

		$openNo = $openYes = "";
		if ($open == "yes") {
			$openYes = "checked = 'checked'";
		} else {
			$openNo = "checked = 'checked'";
		}

		$series_items = array();
		$i = 0;
		while($i < $numFields) {
			$i++;
			$key = "name_".$i;
			$series_items[$i] = $custom[$key][0];
		}
		$numFields++;
?>




Open?

				 /> Yes, it is open.

				 /> No, it is closed



	
		
			
			
			
		
	
	
	
		
			Order
			PostName
			Remove?
		
	
	
	 $name) {
			echo "";
				echo "";
					echo "";
					echo "";
					echo "";
				echo "";
			echo " ";
		}
	?>
	
	
		
Add new line

With this code you should see something like this as your series metabox:

Edit our default post saving function

And when you click on “Add new line”, believe me, it should create a fresh and brilliant new line.

Now we have this pretty box, but when you click “Update” nothing happens. This is why we haven’t prepared our WordPress insert post function to treat this data. What we have to do now it to say to WordPress “Hey, when you see this field in wd_series post type, delete all old data and save this new one for me, ok?”.

One important thing to note here is that we must delete all previous data and use some logic to reorder the series when needed.

Our magic here relies on ksort php function, so we save a temporary array and save all the items in the correct order after run this function.

Well, let’s do it:

post_type == "wd_series"  ) {
			//update series state (open / closed)
			$open = @$_POST["wd_open"];
			update_post_meta( $post_id, "open", $open );

			$size = @$_POST["NumFields"];
			$i = 0;

			$organize = array();
			while ($i < $size) {
				//let's pre-organize all posts
				$survive = $key = $remove = $order = $name = $post = null;

				$key = "remove_".$i;
				$remove = @$_POST[$key];

				if (empty($remove)) {
					//we won't delete this guy, and we'll put he in his right order
					$key = "order_".$i;
					$order = @$_POST[$key];

					$key = "name_".$i;
					$name = @$_POST[$key];

					$key = "post_".$i;
					$post = get_post_meta($post_id, $key, true);

					if (!empty($name)) {
						$organize[$order] = array( 'name' => $name, 'post' => $post);
						$survive = true;
					}
				}
				//we will pre delete everybody, to prevent trash in here
				$key = "name_".$i;
				delete_post_meta($post_id, $key);

				$key = "post_".$i;
				$post = get_post_meta($post_id, $key, true);
				delete_post_meta($post_id, $key);

				$key = "order_".$post;
				delete_post_meta($post_id, $key);

				//if it won't survive, we delete series_id from post_id
				if(!$survive) {
					$key = "series_id";
					delete_post_meta($post, $key);
				}
				$i++;
			}
			//let's correctly order this
			ksort($organize);
			$i = 0;
			foreach($organize as $item) {
				$i++;

				$key = "name";
				$nam = $item[$key];
				$key = "name_".$i;
				update_post_meta( $post_id, $key, $nam );

				$key  = "post";
				$post = $item[$key];
				if(!empty($post)) {
					$key = "post_".$i;
					update_post_meta( $post_id, $key, $post );
					$key = "order_".$post;
					update_post_meta( $post_id, $key, $i );
				}
			}

			$size = count($organize);
			update_post_meta( $post_id, "size", $size );
		}
	}
	//it's me saying to wordpress "Hey guy, don't forget to save this data when you insert or update posts!"
	add_action("wp_insert_post", 'wd_meta', 10, 2);
?>

Now we have our plugin working, let’s improve it.

Step 5 – Shortcodes and theming functions

Before we can output our posts we have to prepare two kind functions:

Common theming functions – Something like wd_series($args), so we can use for theming and widgets
Shortcodes – Something like [wd-series] so we can insert it directly from content edit mode.

Common functions

We will need to run a get_post loop, because probably our series will be shown inside another WordPress loop, so we can’t use WordPress’ default loop. Think about it this way: we will show a series when we are INSIDE a post, right? Thus the best way is via get_post.

Then we will just prepare a simple output function based on current post’s ID so it will show all items for the series related to it.

As we store the series related to this post inside “series_id” custom field, we just need to run a get_post for this series_id and output all metadata about series items.

Since for every item the output function is potentially the same, we will create two functions this time, one for items output and other for complete series output, as follow:

$name";
	} else {
		echo $name;
	}
}
//output!
function wd_series ($series) {
	$title = get_the_title($series);
	$meta  = get_post_custom($series);

	echo "$title";
	$size = $meta["size"][0];
	$i = 1;
	echo "";
	while ($i <= $size) {
		$key = "name_".$i;
		$name = $meta[$key][0];

		$key = "post_".$i;
		$post_item = $meta[$key][0];

		echo "";
			wd_item( $name, $post_item);
		echo "";

		$i++;

		$name = $post_item = null;
	}
	echo "";
}
?>

Shortcodes

So with the function above we can output our series in our template, and it is pretty customizable as you can see. But what if you want to give your writers the ability to decide where the series content should appear? Well, to do this you will need a shortcode.

Long story short, they give the ability to call functions via post content. So while I’m writing this post I could write [wd-series] and BAM! our series content would have to appear just above this text.

It is pretty easy to register a shortcode, and as long as we have our output function defined it will be even easier. With no more than six lines you can do it:

ID, "series_id", true);

              wd_series($series);
}
add_shortcode( 'wd-series', 'wd_series_shortcode' );
?>

After all this code, you will see something similar to this when you write [wd-series] in your content box:

Are you hungry yet?

This code surely could be improved and I know that some of our brilliant readers could point out some things to make it better. So why not leave a comment and share your thoughts?

And finally, I recommend you dig a little deeper into the Shortcodes API, since it is a great tool when well used!

CSS Tricks for Smart Quotes and Tooltips

Rochester Oliveira — Fri, 01 Jul 2011 10:00:31 +0000

The CSS content property is a powerful way to add content to some elements via CSS. It is good because it allows you to add “formatting content”, that is things that you need in your presentation but isn’t the content itself, like quotes, icons (when you have text along with them), titles (not the text title, the HTML attribute).

But you may thinking now “Well, isn’t content always HTML’s job?” Well, most of the time it is.

Think about it a little bit: when you have a fancy quote, image caption, or even a custom icon for certain links (like “.pdf”), aren’t all these things just “decoration”? They are just there to clarify the message of your content, they are meaningless by themselves.

So we will learn simple and cleaner techniques to get some cool results via CSS! Although our title only mentioned smart quotes, we will do show you some other quick examples to get the most of this cool CSS trick.

So, let’s rock.

Our final result

Yeah, let’s start with a preview. Take a look at this demo, or download it and switch off the CSS. You will see that the formatting is completely separated from content.

Smart quotes – the smart way

Typography is a really important part of websites. So are the small typographic details.

First of all, quotes that don’t have opening and closing quotes aren’t “smart”: “This example isn’t smart” – Smart quotes have a clear opening and ending style “Hi, I’m a smart quote”.

This is why smart quotes are much better than “dumb” quotes. I usually use dumb quotes, they are just OK for common text (just OK, if you have option, choose smart ones), but they are really bad in block quotes or citations.

Many people use images to get a better result, you know with that big and fancy curly quote. But let me tell you a secret: They are doing it wrong.

We have two really good pseudo-elements that will help us from now on, :before and :after. They basically give you the ability to add extra content before and after each element on the page. Pretty cool, isn’t it?

So instead of filling our code with unnecessary spans and other unwanted tags, we just write our common markup and adjust anything else with CSS.

In our demo, we have this basic markup:


	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus est, egestas vel aliquet at, pellentesque nec lorem. Pellentesque molestie bibendum eros, eu suscipit nisi volutpat fringilla.
	by Albert Einstein

Nothing really new here, an ordinary block quote. So let’s make it prettier with our magic :before and pretty CSS:

blockquote {
	padding-top: 20px;
	overflow: hidden; /* clearfix alternative */
	font-size: 18px;
	line-height: 150%;
	color: #454545;
}
blockquote:before {
	display: block;
	float: left;
	margin: 10px 15px 0 0;
	font-size: 100px; /* let's make it a big quote! */
	content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
}
blockquote:after {
	content: none;
	/* could be content:close-quote; but lets keep it clean*/
}

As you can see, with a few lines you make all the magic. No images, no hidden secret.

The only downside (as almost anything with CSS) is the cross browser support. Any modern browser supports this feature, but IE8 (really, not a browser) only supports it when you have a doctype declaration.

CSS pure tooltip

Another really good use of it is to combine :after or :before with other pseudo-elements, like :hover. Yeah, I know you are wondering if we could have a pure CSS tooltip, and yes, we can.

What you have to do is just set a good title for your links, and see the magic happen with this snippet:

a:hover:after {
	position: absolute;
	padding: 5px 10px;
	margin: -25px 0 0 -10px;
	font-size: 12px;
	content: attr(title);
	color: #333333;
	text-shadow: 0 1px 1px #909090;
	background: #ffffff;
	border: 1px solid #ffdada;
}

So you can customize it as you want :D

Automatic icons for file-type links

Sometimes we have to link other file types that the user can’t view in their browser. So when you link to anything other than HTML, it is always a good practice let the user know about it, with a simple icon, for example.

For this task you could use the $ attribute comparator. It searches for something at the end of an attribute, so if you have a[href$=".pdf"] it will apply the rules to any link that has an href attribute that ends with “.pdf”. Wow, it is exactly how a link to a pdf file should look!

But, we still need the :before to create a new “element” so we don’t mess up any other common links rules. So, our CSS this time will be:

a[href$=".pdf"]:before {
	padding: 5px 15px;
	margin: 0 5px 0 10px;
	content: "";
	background: url(pdficon.png) no-repeat;
}

Icons for external site links

Sometimes we link to others sites resources, but we can get our visitors lost in the process, since they almost always don’t expect to be redirected to another site.

So it would be good to put a simple icon in our external links, so the user knows they’ll be redirected to another site.

This is a pretty tricky selector. We have the “begins with” selector, via a[href^="#othersite"] . Also we have the “not” selector, so you don’t need to select each site as external, but the support for this is still bad, so I wouldn’t recommend you use it. What you have to do then is to set all your links as “external” (with the icon) and just our sites links we set without the icon.

The CSS should be something like this:

a:after {
	padding: 5px 15px;
	margin: 0 10px 0 5px;
	content: "";
	background: url(external.png) no-repeat;
}
a[href^="#mysite"]:after {
	/* let's reset defined stuff */
	padding: 0;
	margin: 0;
	content: none;
	background: none no-repeat;
}

Image captions

I swear to you, I’ve tried this one, and there is no way to have it working on all major browsers that I know of.

It seems to be a bug that when you set a valid src attribute you can’t use the content property (it is set to null in order to have the external content) so you can’t have a :before or :after declaration, since they need content as a non-null value.

But I hope we will see this working soon with all the browser updates happening.

Are you hungry yet?

I surely missed some cool uses for :before and :after. What do you think about it? Can you think of other uses for this? Why don’t you comment and share your thoughts?

CSS Counters – The Right Way to Organize Your Ordered Content

Rochester Oliveira — Tue, 28 Jun 2011 10:00:14 +0000

It is pretty common to see step-based content. Tutorials, shopping carts, FAQ’s, grandma’s recipes. You know, numbers and steps are really good to grab attention, so many writers use this.

But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.

Well, let me tell you a secret: They are doing it wrong.

Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).

A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!

Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D

So, let’s rock!

Demo!

Take a look at what you will do at the end of this tutorial:

I think you should check out the demo, and download it to try out a little bit more!

So, counter?

Basically a counter is a “variable” that we can create with CSS but the only two possible operations that we can perform with it is to increase or to reset. For such operations we can use counter-reset or counter-increment CSS properties.

A basic usage is the first case mentioned in this post, the organized content. So let’s say you have a multi-step tutorial and want it organized automatically, what you have to do is just add this to your CSS:

body {
  counter-reset: first; /* our h1's counter is zero every time we have a body tag (hope only once) */
}
h1 {
  counter-increment: first; /* so, when we have one h1, our counter will increase one unit */
  counter-reset: second; /* and we will reset our h2's counter */
}
h1:before { /* wow, here we will append a pretty formated Step N - Item */
  content: "Step " counter(first) " - "; /* when you write counter(first) we will get its current value */
  font-size: 0.8em;
  font-weight: normal;
  font-style: italic;
  color: #bababa;
}
h2 {
  counter-increment: second; /* so our h2's counter goes up.. */
  counter-reset: third; /* and we reset the h3's */
}
h2:before {
  content: counter(first) "." counter(second) " - "; /* we will output H1NUMBER.H2NUMBER */
}
h3 {
  counter-increment: third; /* h3 goes up, up, up */
}
h3:before {
  content: counter(first) "." counter(second) "." counter(third) " - "; /* and we output H1.H2.H3 */
}

As you can see its usage is quite simple. Our downside is that we rely on content: property and after (or before) pseudo-element so older browsers won’t see this. But it should work just fine in IE8+ and other browsers.

Multiple counters

Another great thing is that you can have a “general” counter, you just have to separate multiple counters to increase with spaces. Just like this:

body {
  counter-reset: general first;
}
h1 {
  counter-increment: general first;
  counter-reset: second;
}
h2 {
  counter-increment: general second;
  counter-reset: third;
}
h3 {
  counter-increment: general third;
}

Better Ordered lists

Using almost the same code, you can create better ordered lists, with sub-items control. So instead of just 1 – ITEM you can have 2.5.3.1 – ITEM when you have multiple nested OL’s. This is the code I’d use:

ol {
	list-style: none;
	counter-reset: olfirst; /* our father OL must have olfirst item reseted */
	font-family: arial;
}
ol ol {
  counter-reset: olsecond; /* our sub OL's reset the olsecond, third must to be olthird and so on */
}
	ol li {
		counter-increment: olfirst; /* when we have a item that is children of first OL, it increases first counter*/
	}
	ol li ol li {
		counter-increment: olsecond; /* when the item is children of a OL that is children of another OL, so it is a sub OL */
	}
	ol li:before {
		content: counter(olfirst) " - "; /* let's output our pretty number */
	}
	ol li ol li:before {
		content: counter(olfirst) "." counter(olsecond) " - "; /* let's output our "sub-number" */
	}

Are you hungry yet?

This is a pretty tricky attribute so you must to try it out a couple of times until you are familiar with it. But we have some tutorials at W3Schools about CSS counter reset, CSS counter increment and before / after pseudo elements that can help you a lot.

So, it is time for you to talk. Did you know about this property What do you think about it?

An Introduction to Object Oriented CSS

Ranjith Kumar — Mon, 27 Jun 2011 10:00:26 +0000

With richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup.

There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.

This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.

What is OO CSS?

The concept of ‘Object Oriented Programming’, is widespread among developers, and forms the basic for any modern programming language. Features like data abstraction, modularity and inheritance make it a favorite in coding large-scale applications.

Object Oriented CSS, as the name suggests, is implementing the concepts of OOP in structuring and building CSS rules, which are easy to reuse, thereby reducing the loading time and increasing the performance of web pages incredibly! The key point here is, to identify, build and style modular reusable ‘objects’ in a page, and to reuse it in multiple instances by extending them with additional features wherever needed. Here an ‘object’ refers to the basic HTML markup and its CSS rules. Apparently, here, the key challenge is going to be, identifying the ‘object’ and building rules for it.

This is neither a framework nor a technology, but an approach adopted in building the rules, so as to make the code more reusable, maintainable and scalable. You may already have been making use of this concept in coding your style-sheet for years, but may not be aware of this terminology :).

A UI engineer at Yahoo (‘Nicole Sullivan’ ) coined the term. She had made a number of presentations on the topic on various big stages (http://developer.yahoo.net/blogs/theater/archives/2009/03/website_and_webapp_performance.html) and is also included in a feature on Women in Technology.

Nicole, who has been hired by Facebook recently, for optimizing the CSS and web page performance, has been leading the way in implementing this approach in the pages for the social networking giant, and the results are to be seen. A faster loading FB, with significantly less response time! This is exactly what this approach of building CSS promises to give back. But again, like all other frameworks, this too has pitfalls and advantages which we shall discuss in detail.

Following are some key aspects in object-oriented approach to CSS building:

Create a component library
Separate container and content / Avoid Location dependent styles
Separate Structure and skin
Extend base objects using class names
Stick to semantic class names

Create a component library

This is the first thing to do, while building a OO CSS framework for your application, and this is the most time consuming process too. You will have to carefully study the screens of the app, and come up with the recurring reusable UI patterns, and will have to create a library consisting of HTML markup and respective CSS rules of all such components first. This may take some initial time, as you may need to filter out the components and find out the basic structure of a component, and its variations along different screens.

E.g. For a blog, ‘metadata (Refer to the marked area in the figure below)’ will be present in multiple instances of a page. After closer scrutiny, you will come to know that, all the metadata can have the same HTML markup, and the variations can be addressed using CSS (the font size, color, margin and padding are different in each of the occurrences of metadata component). Select a markup, as a base structure, in which you can accommodate majority of the elements that possibly can come in the particular component.

In our example our basic structure of the ‘metadata’ component will be:

Base Markup

Author namecommented on21-02-2010@

Base rule


.metadata{font-size:1.2em; text-align:left; margin:10px 0;}

Thus, ‘metadata’ can be now independently used within any other element in the markup, and will have a consistent look and feel, irrespective of where it is used. But as we can see in the figure above, there are multiple variations of the component. This we will tackle using CSS, and will be discussing in the following points.

This way, figure out all the reusable components, and create rules and markup, and group them separately in the CSS file. (It’s even fine to create a separate CSS for the component library, and then merge it with others later during deployment.)

Separate Content from Container / Avoid location dependent styles

This is one of the primary requirements of following an OO approach to building CSS files. The core idea here is to consciously differentiate the rules of containers and the content that comes within them, so that content can be plugged into any containers irrespective of their parents.

Often while building large-scale CSS rules there will be instances where a single component will be appearing differently in various instances, when put in different containers. One of the solutions adopted by front-end engineers, for addressing this problem was to assign location dependent selectors to that particular component.

E.g. With reference to the example used in the previous point, where there are multiple variations of the same component – ‘metadata’, each instance can be given location dependent rules by combining the base class ‘metadata’ with the relevant classes/IDs for the containers. i.e.,

‘metadata’ in a blog post can be styled as: .post .metadata{overriding rules}
‘metadata’ in a comment can be styled as: .comment .metadata{overriding rules}
‘metadata’ in a comment can be styled as: .comment .metadata{overriding rules}

The OOCSS approach advocates avoiding this type of usage. Instead extend the base class by adding more classes, thereby extending the attributes of the base component to match the variation. We shall discuss the concept of extending the base class in the following points.

Separate structure and skin

In the first point ‘Creating component library’, we discussed the importance of identifying reusable components, and building base classes and base structures for them. While creating those base rules, an important thing to keep in mind is to separate the structure and skin. In other words, while defining a base class in the component library, we should not create skin-level rules, like width, height, background images, border styles, etc, that can make the component more specific to a certain container.

E.g. For our base class, ‘metadata’ with the following rule

.metadata{font-size:1.2em; margin:10px 0;},

Adding more skin-level rules as below,


.metadata{font-size:1.2em; margin:10px 0; width:500px; background-color:#efefef; color:#fff;},

can make it more of a specific component than a generic one, thereby making it difficult to reuse it in many other containers, which would need it to be rendered in a different ‘skin’. Also another danger of not separating structure and skin will be the ‘Specificity war’.

Extend base objects using class names

As discussed in the second point ‘Separate content from container’, avoiding the usage of contextual selectors will make the content independent from their parent containers and hence will be truly usable across the application. So how do we instantiate the variations of the same object in different containers? What is the solution? Well here comes the concept of extending the base ‘object’ (again another term coined by Nicole Sullivan), by adding more class names to it depending on the context, rather than tightly coupling the object with the class names of the containers in which it is to be placed.

E.g. In the first figure of the ‘metadata’ object, where the same object needs to be rendered differently in various containers,

The HTML markup of each of them will look like:

Authornamecommented on21-02-2010@

The CSS rules will be:


.metadata{font-size:1.2em; margin:10px 0;}
.commentmetadata{font-size:1em; margin:0 0 10px 0; color:#063070; }
.postmetadata{ color:#063070; }
.authormetadata{ color:#fff; }

This is a very simple demonstration, to comprehend the concept of implementing OO programming. As the size of the app becomes larger, the UI patterns will become more complex, and there lies the actual challenge and advantage of using such an approach.

Stick to semantic class names

A challenge in building CSS for high-scale web applications is to logically come up with meaningful class / ID names matching with the context and moreover making sure, they are reusable and still make sense. With the concept of ‘extending’ base objects, it’s easy to fall into the practice of creating ‘presentational class names’. Some easy examples are ‘leftCol’, ‘redText’, ‘midCol’, ‘bigText’, ‘bolderText’ etc. Such class names are not reusable and are a hindrance to scalability.

Always stick to logical and semantic class names relating to the logical meaning of the component, rather than its presentational meaning. It means, instead of giving the text block with a yellow background color, the class name ‘yellowText’, ‘notification’ would be a more sensible name, as it is a notification element that pops out to notify some activities within the system.

Pros and Cons?

Following such an approach of building CSS has its own pitfalls and advantages

Here are a few cases, where adopting such a framework ‘may’ backfire:

OOCSS is suited to really large websites / application which are filled with reusable components. It may not give desired results in smaller websites and applications. So decide sensibly depending on the size of the work in hand
If not smartly used, creating the component library can turn out to be a mess, and become a maintenance nightmare for other coders
Documentation is a must. Each block of code should be clearly commented out with the right points for other coders to absorb the concept, which otherwise can become too tedious in case of a knowledge transition

Some obvious advantages of adopting this approach are:

Less lines of CSS code
Cleaner HTML markup, with logically sensible class names and hierarchy
Semantic markup, means more SEO friendly pages
Far better page optimization, with much faster loading times, since most of the components are reused
Scalable markup and CSS code, where more components can be added into the library without disturbing other components, as the base objects are independent of any other containers
Easily theme-able layouts, since changes to the base object can completely change almost the whole presentation layer instantly

Courtesy & Resources

http://www.webdirections.org/blog/object-oriented-css-the-video/

http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/

http://www.iconfinder.com for all the icon resources