1stwebdesigner - Graphic and Web Design Blog » jquery

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!

40+ Fresh jQuery Image and Content Sliders Plugins

Jameel Khan — Wed, 28 Dec 2011 21:00:12 +0000

In this round-up, you will find the best of the freshest jQuery Image and Content Sliders Plugins so that you can take advantage of them and produce startling image and content sliders. You may find it quite difficult to figure out which plugin is best for you because all these plugins have different functionality. Keeping this in mind, we compiled this post. Let’s have a closer look!

1. FlexSlider

( Demo | Download )

FlexSlider is an amazing, totally responsive jQuery slider plugin. It bears uncomplicated, semantic markup, slide and fade animations, and is supported in all major browsers, therefore you won’t have any compatibility issues. Flexslider is built for novices and pros in a similar way.

2. Bubble Slideshow Effect with jQuery

( Demo | Download )

In this tutorial we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as an interesting slideshow, and as the code will be completely modular, you will be able to easily use it and modify it.

3. Responsive Image Gallery with Thumbnail Carousel

( Demo | Download )

With this plugin you can create a responsive image gallery with a thumbnail carousel using Elastislide. The gallery will have a view switch that allows people to view it with or without the thumbnail carousel. We’ll also add the possibility to navigate with the keyboard.

4. Circular Content Carousel with jQuery

( Demo | Download )

With this circular content carousel, you can have some content boxes that can slide substantially (circular). Clicking the “More” link will move the respective item to the left and slide out the content area, so that you can navigate through the carousel where every step will disclose the next or previous content box with its extended content.

5. Lateral On-Scroll Sliding with jQuery

( Demo | Download )

In this tutorial we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport.

6. Scrollbar Visibility with jScrollPane

( Demo | Download )

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. In this tutorial we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

7. Timelinr

( Demo | Download )

This simple jQuery plugin will assist you in providing more life to otherwise your lifeless timelines. With this plugin, you can easily parameterize the majority of attributes: speed, transparency, etc. It also supports horizontal and vertical layouts.

8. SmartGallery

( Demo | Download )

SmartGallery is a lightweight, lightening up fast and completely customizable image gallery that has been exclusively designed to support huge data. SmartGallery comes with 12 different transition effects together with some inimitable transition effect and thumbnail navigation.

9. Xml Driven Vertical News Scroller Script

( Demo | Download )

vScroller demonstrates classified and color-code content is an upright or vertical scroll. Feeds originate from regular XML file and styled with plain CSS3 for a fresh and good-looking interface.

10. jQuery Sliding Content Bar Plugin: PushUp Content

( Demo | Download )

This smart and fast content bar is easy to integrate in any web design or web based application. You can seamlessly integrate this in your website and it will pop up whenever needed. Apart from this, it is highly easy to customize this plugin. You can add your contact details, location map by means of Google Maps, and a plain contact form that visitors can use to make contact with you.

11. Skitter

( Demo | Download )

Skitter is a plugin for producing good-looking slideshows. You can modify every aspect of your slideshow.

12. Diapo

( Demo | Download )

Diapo is a free of charge and open source jQuery slideshow plugin. Most interestingly, you can also use it in your projects and sell it as part of a bigger work (donations are not required, but asked to be considered in this case).

13. Craftyslide

( Demo | Download )

Craftyslide is a small slideshow that is built on jQuery with the intention to be unique by furnishing a simple, no-frills process of displaying images packaged into a small, clean and competent plugin.

14. Responsly.js

( Demo | Download )

Responsly.js is a band of simple responsive widgets, written by means of CSS3 transformations and accessible as a jQuery plugin.

15. Elastislide

( Demo | Download )

This is another very responsive jQuery carrousel that will adjust its size and its performance so as to work on any screen size. Putting in the carousel’s structure into a container with a fluid width will make the carousel fluid as well.

16. Blueberry

( Demo | Download )

This one is an experimental open source jQuery image slider plugin that has been designed with the aim to work with fluid/responsive web layouts.

17. Slidorion

( Demo | Download )

Slidorion is an amalgamation of an image slider and an accordion; and therefore, it demonstrates attractive images together with a changeable length description. Slidorion is a great alternative to the traditional jQuery slider seeing that images are linked to each tab and accompanied by a large array of effects.

18. bxSlider

( Demo | Download )

bxSlider is a jQuery HTML content slider and image slideshow.

19. Minimit

( Demo | Download )

Minimit Gallery is an exceedingly customizable jQuery plugin that does practically everything: galleries and slideshows to carousels and slides and any other thing that has multiple states.

20. Galleria

( Demo | Download )

Galleria is a JavaScript image gallery framework that has been built on the jQuery library. The aim is to make the process of creating professional image galleries easier for the web and mobile devices.

21. jQuery Image Gallery

( Demo | Download )

This is an effortless jQuery image gallery plugin.

22. rlightbox

( Demo | Download )

rlightbox is antoher jQuery UI media box that can put on view several kinds of content for instance images, YouTube and Vimeo videos. It bears several matchless features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.

23. jQuery MB Bgnd Gallery

( Demo | Download )

With this jQuery plugin you can make a suggestive slide show of images as the background of your page; the images will adapt their size to the window size. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

24. PikaChoose

( Demo | Download )

PikaChoose is a lightweight jQuery Slideshow plugin that make allowances for unproblematic presentation of photos with carousels and lightboxes! Pikachoose is created to be effortlessly installed, trouble-free to setup.

25. Fluid Thumbnail Bar with jQuery

( Demo | Download )

With this plugin you can make a fluid thumbnail bar that pages through the images it contains.

27. Elastic Image Slideshow with Thumbnail Preview

( Demo | Download )

Here we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

28. Fullscreen Slideshow with HTML5 Audio and jQuery

( Demo | Download )

In this jQuery tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sound with the HTML5 audio element in order to give life to the gallery and try to recreate the ambiance of this vibrant city.

29. Image Wall with jQuery

( Demo | Download )

With this plugin you can create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

30. Rotating Image Slider with jQuery

( Demo | Download )

31. Moving Boxes Content with jQuery

( Demo | Download )

With this plugin you can create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area.

32. Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

( Demo | Download )

With this jQuery plugin you can create a beautiful full-screen slideshow.

33. Flip Box

( Demo | Download )

Flip is a jQuery plugin that will easily flip your elements in four directions.

34. Innovation Slide – Slide jquery plugin

( Demo | Download )

With this plugin you can create a simple, lightweight, effects-laden and very versatile photo slide. It will allow us to flow in a “different” our content: images, text, etc.

35. TN3 Gallery

( Demo | Download )

With TN3 Gallery you can easily create amazing photo galleries and slideshows with slick transition effects, as well as multiple albums, CSS skinning, XML and Flickr support with a host of additional features. No browser plugins required.

36. Shutter Effect Portfolio with jQuery and Canvas

( Demo | Download )

In this jQuery tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

37. Photobooth with PHP, jQuery and CSS3

( Demo | Download )

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

38. Making a Flickr-powered Slideshow

( Demo | Download )

In this tutorial we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

39. How to Make Auto-Advancing Slideshows

( Demo | Download )

With this plugin we can create HTML5 Slideshow auto advance with a few lines of jQuery.

40. Sliding Contents With JQuery

( Demo | Download )

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

41. Slides

( Demo | Download )

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.

42. Slidy

( Demo | Download )

jQuery Slidy is a plugin that generates a customizable transitions automatically.

Creative Christmas Gift For Geek Lovers – Web & Mobile App

Rochester Oliveira — Wed, 21 Dec 2011 10:00:58 +0000

Oh, Christmas. The magic time when you spend all the money you’ve been saving the whole year. Oh, and we have all that Christmas Spirit, of course.

Now, you probably want to spend a lot on your soul mate’s gift, to show her how deep is your love.

Yeah, money can buy cool things, but guess what: almost every year I make my own gifts for my girlfriend (but I always have to buy something else anyway). And I feel that she just loves when I do something by myself instead of just buying it (unless shoes, she wouldn’t like if I made her a shoe). So I’ll show you, dear Padawan, how to make a cool one-page-gift for anybody that you like.

Our goal here is to do a simple “slider”, where a lot of messages and pictures that you like are shown. In the meantime you’ll learn a little bit about design, jQuery and CSS3.

So, let’s rock!

Demo & Download

This is our final effect. You can check out our live demo and download our source files and start playing with it.

Design stuff

First of all we’ll need a cool background. Snow is not an option for me, since in Brazil we barely know what it’s like. So I’d rather pick a cool christmas tree and change it a little. I’ve found a couple of cool images to use in
Salman’s article full of Christmas resources. I’ve chosen one of them, adjusted its colors, sliced its background and cut the Christmas tree itself.

As our effect’s start point (slider and this stuff) we’ll use a rocking tutorial on how to do an Amazing Slideshow (John Lennnon Tribute). We’ll change it a little bit, but the main effect is just amazing :)

Now we need a good looking font for our design. I suggest you to go with Cartoon. Then just generate its webfont and we can include it in our basic HTML (that one downloaded from Rocking Code).

Our basic HTML will be like this:







Happy Christmas!









Happy Christmas!



Caption text.

[... more .item divs]

And basic CSS:

body {
	background: #feffef url("../img/bg.jpg") repeat-x center bottom;
 }
 #tree {
	position: relative;
	width: 100%;
	height: 100%;
	background: #feffef url("../img/bg-tree.jpg") repeat-x center bottom;
 }
#container {
	position: relative;
	width: 880px;
	margin: 15px auto;
	padding: 20px 20px 20px 30px;
	background-color: transparent;
	background-color: rgba(255,255,255,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32ffffff,endColorstr=#32ffffff);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#32ffffff,endColorstr=#32ffffff)";
	-moz-box-shadow: 0 0 5px #B8B8B8; /* Firefox */
	-webkit-box-shadow: 0 0 5px #B8B8B8; /* Safari, Chrome */
	box-shadow: 0 0 5px #B8B8B8; /* CSS3 */
}
	#container h1 {
		font-family: 'CartonSlab';
		font-size: 20px;
	}
	.item {
		position: relative;
		padding: 0;
		width: 200px;
		margin-bottom: 20px;
		float: left;
		background: #000;
		overflow: hidden;
	}
		.item img {
			width: 100%;
			cursor: pointer;
		}
	.selected {
		border: 2px solid #fff;
		-moz-box-shadow: 0 0 3px #000; /* Firefox */
		-webkit-box-shadow: 0 0 3px #000; /* Safari, Chrome */
		box-shadow: 0 0 3px #000; /* CSS3 */
	}

As you may have noticed, our tree is done with a different HTML element, so it won’t affect our slideshow effect at all.

Oh, and don’t forget to generate favicons. They are really cool.

Setting up pictures and captions

One thing that will really impress your date is to choose romantic messages and cute stuff. So be ready to search for:

Cat pictures (demo with a lot of them)
Hearts
Landscapes
Your own pictures

I’ve found a couple of good quotes on QuotationsPage & RomanticloveMessages and have written my own ones (this is really important).

Then, let’s put them inside our HTML with proper markup. We’ll have captions positioned on top, middle and bottom, this way:



You may not care for me like I care for you But if you ever need me, I will always be around for you.



It's hard to tell your mind to stop loving someone when your heart still does. 



Meeting you was fate, but falling in love with you was beyond my control.

And CSS will be:

.item .caption {
	position: absolute;
	top: 0;
	padding: 10px 20px;
	font-family: 'CartonSlab';
	font-size: 15px;
	color: #ffffff;
	background-color: transparent;
	background-color: rgba(0,0,0,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000)";
}
.item .bottom {
	top: auto;
	bottom: 0;
}
.item .middle {
	top: 50%;
}

Coding Slideshow JS

Our basic logic will be:

It’ll hide all captions and reduce opacity for images on start;
It’ll automatically expand box and show caption, one at a time;
When hovering images, it’ll increase its opacity and automatically stop our timer;
When the person clicks on an image, it’ll expand its box;

First, we’ll make sure that no function will run before all images are loaded (it wouldn’t look good, trust me). This code will do the trick (since we’ve uploaded jquery.images.loaded.js):

//defaults
var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1, timer = "";

$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 220,
		isAnimated: true
	});

	init();
});

This init() will do our first, third and fourth bullet points. Let’s go through it:

function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		//hide captions
		$($items[index]).find(".caption").fadeOut();
		//images setup
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).stop().animate( { opacity: highOpacity } );
					stopTimer();
				}, function() {
					startTimer();
					if(index != current) {
						$(this).stop().animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	startTimer();
}

The coolest thing here is all those chained functions. They improve performance a lot and if you break lines between them (always before “.”) it’ll be much better to understand.

Now we have two important functions, startTimer() and stopTimer(). I’m pretty sure you know what do they do. We’ll use setInterval and clearInterval to control our timer:

function startTimer() {
	timer = window.setInterval( "next()", 6000); // it'll call next function every 6 seconds and will identify this interval as "timer"
}
function stopTimer() {
	clearInterval(timer); //we'll kill timer :(
}

Now we called “next” function every 6 seconds let’s see what it does:

function next() {
	//if we add one item to current we'll still below our total count of numbers?
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}

Now what you’ve been waiting for: expand()

//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "200px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
			curItem.find(".caption").fadeOut();
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "420px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
		$($items[item]).find(".caption").fadeIn();
	} );
	current = item;
}
/*** functions used above **/
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}

Ok, then, let’s group all this stuff inside one script call, and we’re done!

var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1, timer = "";
$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 220,
		isAnimated: true
	});

	init();
});
//runs qwiki function for fisrt item so we'll start loop
function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		//hide captions
		$($items[index]).find(".caption").fadeOut();
		//images setup
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).stop().animate( { opacity: highOpacity } );
					stopTimer();
				}, function() {
					startTimer();
					if(index != current) {
						$(this).stop().animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	startTimer();
}
function startTimer() {
	timer = window.setInterval( "next()", 6000);
}
function stopTimer() {
	clearInterval(timer);
}
// let's go on with next item if we didn't reach end of our set of items
function next() {
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}
//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "200px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
			curItem.find(".caption").fadeOut();
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "420px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
		$($items[item]).find(".caption").fadeIn();
	} );
	current = item;
}

Personal touch: My horrible voice as background music

I’ve been learning guitar for 1 month. I know how to play two songs (“In spite of all the danger” and “Stand by me”) and I sing really, really bad. But when I showed my girlfriend my first “demo” record, well, I understood why so many guys want to learn guitar.

This is my final personal touch, and you could do so with a cool picture, a recorded mesage (video, maybe), or whatever you can imagine.

What do you think?

So, have you liked it? Are you planning to do something really special to the ones you love most? Let me hear your thoughts!

Create Elegant Tags With Sliding Post Count For WordPress

Rochester Oliveira — Mon, 12 Dec 2011 10:00:35 +0000

Tired of the boring category style being always same, like a mini menu? Tired of items arranged horizontally or vertically, styled always the same way? Yes, I’m tired of it too. So let’s make things more interesting now.

Our starting point will be a cool sliding tags design made by Thomas Bosée. Then we’ll learn how to use WordPress wp_list_categories function, how to edit its result, how to code CSS and finally a little of jQuery “Black Magic”.

So, let’s rock!

Demo first, please

So our goal is to achieve the effect seen on this demo. As usual you can download our sample files and edit as you want!

Wp_list_categories()

Wp_list_categories is a function that gets all categories and has a few useful parameters. We’ll be using a few of them:

echo – whether the results should or shouldn’t be displayed. This is quite useful because we’ll have to adjust results a little bit
show_count – this one toggles the display of current post count in each category
title_li – since the default value is a big
Categories
we’ll change it
depth – It’ll be better not to have children categories this time. But if you want it just put it as zero and change ‘hierarchical’ to false

Our php will be like this:


 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	echo $variable;
?>

And this PHP outputs this HTML:


	design (17)
	icon (9)
	grid (3)
	clean (25)
	typography (8)
	minimal (12)
	illustration (1)
	high resolution (6)
	iphone (15)
	interface (21)
	grunge (10)

Oops, HTML is not quite right yet

As you may notice, the default post count is simple text with parenthesis. Well, in our original design we have count as a separate element, so we’ll need to change this default behavior. A simple way of doing this is with str_replace, we’ll search for “(“, replace with “” and then search for “)” e replace with “”.

This is how your category listing function will be:


 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	$variable = str_replace ( "(" , "", $variable );
	$variable = str_replace ( ")" , "", $variable );
	echo $variable;
?>

And now we’ll have right HTML, as follows:


	design 17
	icon 9
	grid 3
	clean 25
	typography 8
	minimal 12
	illustration 1
	high resolution 6
	iphone 15
	interface 21
	grunge 10

CSS, CSS, CSS

(A.K.A. CSS3. Yeah, a really bad joke)

Now we’ll do this with a few cool CSS3 implementations. This is what will help us:

Before and after pseudo elements – instead of putting a lot of additional spans we’ll just use them to create pretty effects
Border-radius - we’ll need slightly rounded corners
Content - this CSS property will be especially useful because we’ll insert an image as content of before count and after count
Element positioning - we’ll have to be aware of positioning since before and after have to always be with our main span element

Let’s go step by step. Basic CSS for background and main div positioning. Nothing really major in here:

body {
	background: url(bg.png);
}
	#container {
		position: relative;
		width: 500px;
		margin: 50px auto 0;
		padding: 10px 0 20px;
	}

With #category and li rules we’ll achieve that side-by-side listing.

#category {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}
	#category li {
		float: left;
		position: relative;
		padding: 0 10px;
		margin: 0 15px 10px 0;
	}

Our link styling will create that “white” part of our little tag. Background is a 1px wide soft gradient:

#category li a {
	float: left;
	padding: 4px 10px 0;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-decoration: none;
	border-top: 1px solid #d3d0cf;
	border-left: 1px solid #cac7c7;
	border-bottom: 1px solid #aeadad;
	background: url(bgTag.png) repeat-x;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

Now we need to create the orange part of our tag. Since we’ll animate just the “middle”, we’ll have to do it in a way that our before and after elements will be “inside” of span but will go to right / left as our main element expands. So this will do the trick:

#category li span {
	position: relative;
	float: left;
	width: 35px;
	padding: 5px 0 0;
	margin-top: 1px;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-align: center;
	background: url(bgCount.png);
	overflow: hidden;
}
	#category li span:before, #category li span:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 3px;
		height: 30px;
		content: url(bgBeforeCount.png);
		overflow: hidden;
	}
	#category li span:after {
		left: auto;
		right: 0;
		content: url(bgAfterCount.png);
	}

jQuery Black Magic

First of all, we need to include jQuery, right? So we’ll do it with a really cool technique that I’ve seen at jQuery boilerplate:

We’ll try to get it from Google. Since almost everybody visits Google often we have a good chance of getting this right from the users cache. But if for any crazy reason Google is down (for instance, if we have been hit by a giant meteor just like our dino friends) it’ll get jQuery from our local file :)

Now we need to show / hide post counts when hovering over them, so our basic logic will be:

FIND all "#category span" tags
	animate their width to 0px
FIND all "#category li" tags
	WHEN mouseenter
		animate this.children("span") width to 35px
	WHEN mouseleave
		animate this.children("span") width to 0px

When translating this to jQuery what you need to be aware of is:

When you animate item to zero jQuery will add ‘display: none’ to it (will hide our before and after tags), so we’ll animate it to 5px instead
You have to chain selectors to get better performance, so we’ll find #category, then get each span, then go up a level (to li’s)
When you animate several elements it’s good to “stop” them before animating so we won’t have a lot of “dancing” tags if user moves randomly mouse over elements

Our final jQuery code will be this crazy thing:

$(function(){
	$("#category")
		.find("span")
		.each(function(){
			$(this).animate({"width": "5px"});
		})
		.parent()
		.hover(
			function(){
				$(this).find("span").stop().animate({"width": "35px"});
			}, function() {
				$(this).find("span").stop().animate({"width": "5px"});
			}
		);
});

So, what do you think?

Hope you enjoyed reading. Don’t be shy and share your thoughts with us!

Using HTML5 Video The Easy Way

Rochester Oliveira — Fri, 02 Dec 2011 10:00:56 +0000

If you haven’t had a good reason to learn HTML5 video, let me give you one: Flash mobile is dead. Mobile is the new black, many people say that by 2014 more people will be browsing with their mobile device than using a desktop. You know, if we get through 2012 of course. So more then using CSS media queries and cool coding tricks, you need to be ready to switch also the way you post videos online.

Now you may be asking yourself if it’s hard to implement HTML5 video, or if it’s worth the effort. Well, dear friend, it’s way easier than you think.

We’ll see today a few different ways you can implement it, and a few more things that you should be aware of.

So, let’s rock!

How tag works

Before HTML5 we used or tags to do this stuff. Don’t know if you’ve had the pleasure of trying to get this working, but I can assure you, it can cause quite the headache.

As you may notice, they are using external sources to process this content. External sources mean plugins, and they’re not always 100% compatible with your default content (how many times have you seen a flash banner above content that it shouldn’t be?).

The video tag is quite simple, you’ll show it which sources it can use, and if it can’t read these sources it’ll show your alternative message:


  
  
  
  Bad news, you can't see the amazing stuff that is here.

Here you’ll need sources as .mp4, .mp3, .ogg, .webm., and if you don’t have any of these formats there are a lot of html5 video converters out there for you to use.

You’ll need different file types because Firefox (3.5+), Opera(10.5+) and Chrome(5.0+) support .ogg but Internet explorer(9.0+) and Safari(3.0+) support .mp4.

Ok, then the good thing is that you don’t need to ask your users to switch to a different browser in order to see your content. You can use a few alternatives to make sure that your users see your videos. We’ll get to those alternatives soon. For now, let’s see now how we can improve this video thing.

Pretty video players

Of course you don’t need to rely on default player controls for the video tag. Actually you can do seriously cool stuff (like applying CSS effects, canvas playing & more) with your video content on the fly, but we’ll see more about this soon.

Here’s how a custom video player is made. Dev.Opera has a great tutorial on this and we’ll outline a few things that you can do.

How this custom controls thing works

Once our video is loaded we’ll use jQuery to remove its default controls and append our own HTML controls on it. Then jQuery will control all attributes we need, like readyState (if video is being played), duration (so we can use a slider), currentTime (so we can show how much time has played), and volume controls.

After doing JS you’ll see that video controls can easily be themed and changed via CSS, as it should be at first place, right?

Source: Opera Tutorial

Ok, ok, let’s do it the smart way

We have a lot of plugins to help us in this process. Let’s see a couple of them:

WordPress Plugin – HTML5 and Flash Video Player

With it you can easily add videos the old flv way, or cool HTML5 with flash fallback, with shortcodes: [videoplayer file="video/video.flv" /] or [videoplayer file="video/video.mp4, ogg, webm" /]

Make an HTML5 video a background with jQuery.VideoBG plugin

Crazy thing! You can add a video to your background, and it gives a pretty cool look, indeed.

Good looking video player with ttwVideoPlayer jQuery Plugin

One of the bests video players I’ve even seen. It looks pretty good, and has nice features.

All in one solution with jPlayer

Take a look at their first demo and you’ll see that isn’t just another jQuery video plugin. It allows you to enhance the default players behaviors in ways that I can only imagine normally doing with flash. Circle player is pretty crazy, check it and see what I’m talking about!

One last good reference – Html5video.org

It has good insights about video tag, news section, players comparison.. well, good things to know about HTML5

Now it’s your turn!

So, have you ever used this? What do you think about?

Do you know about another tool that can help us and is missing here? Let us know!

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.

Definitive Mobile Guide – 40+ Tools, Frameworks And Tutorials

Rochester Oliveira — Tue, 29 Nov 2011 21:00:11 +0000

The mobile market is getting bigger and bigger. A lot of people are spending much more time mobile browsing than desktop. Sometimes I feel like developers aren’t paying proper attention to mobile interfaces. Maybe because we don’t have enough tools to do it, right? No, actually it isn’t.

Despite cool things like Safari Mobile that makes any (non-flash) website “browsable” it’s easy to see that conversion rates are much higher on interfaces design for mobile viewing.

So be ready to see A LOT of tools to help you create cool things for mobile with just what we know (HTML, CSS, JS).

Frameworks, plugins and development tools

Many of us know how to do things with HTML and JS. Sometimes seriously cool stuff using HTML5 effects and some of the newer coding options. Now you’ll see a lot of tools to help you to bring all your knowledge to create mobile interfaces easily.

App Inventor (beta)

If you like drag & drop, this one is for you. Actually you don’t need to know a single line of code to build your android apps with this great software. I’ve tried it myself and it works great despite a final app sizes being a little large.

DHTMLX Touch

One of the most well-known frameworks. Helps a lot when you know a little JS and HTML5 and want to create powerful apps.

EmbedJS

EmbedJS is a JavaScript framework for embedded devices (mobile phones, TVs, etc.). It takes a different approach than other frameworks by shipping just the code needed for each device. That means, there’s less code going over the wire, less code branching at runtime and less memory usage.

Gury

Gury (pronounced “jury”) is a JavaScript library designed to aid in the creation of HTML5/Canvas applications by providing an easy-to-use chain based interface.

iOSFrameworks.com

For those who knows basic Objective-C, this one is a really useful collection of frameworks to help you in your projects. Really useful!

iWebkit

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

iUI

Web UI Framework for mobile devices – iOS, Android, Palm, and others.

JoApp

Framework for mobile development with a lot of cool features, like native-like widgets, multiple ways to code, and heavy use of CSS3.

jQuery Mobile

How could I forget this one? Well, this is our well known jQuery with a lot of mobile-optimized features. With its recent 1.0 launch it will be a default script for many sites (just like jQuery “normal” is now).

jQTouch

At first it may look like just another plugin for responsive layouts. Well, it’s actually almost a UI framework with a lot of cool features that will save you a lot of development hours. :)

Kendo UI

Kendo has a lot of cool features for responsive UI. It does a lot of amazing things, like responsive charts being one of the most impressive performances you’ll find.

Lime.JS

Do you like games? Yeah, you, me and Lime.js do. Build games faster than ever with this HTML5 game framework.

MOBL

Feel like learning a new language? Mobl is a new programming language for mobile devices. Sounds cool, huh?

NEXT Interfaces

NEXT is a free, open source Java and HTML5 framework for building Native Looking web applications for smartphones and tablets.

NimbleKit

NimbleKit is the fastest way to create applications for iOS. You don’t need to know Objective-C or the iOS SDK. All you need is to know how to write an HTML page with JavaScript code.

PhoneGap

Using the free open source framework or PhoneGap build you can get access to native APIs.

Sencha Touch

You’ve probably heard about this one, Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.

The M-Project

It’s a really good framework, with great documentation, built to allow you to develop easily cross-platform mobile apps.

Titanium

Titanium is different because after your development process it generates a compiled app for iOS or android, so you can get a higher performance with native apps without learning a line of Objective-C or Java.

Touchy

More than just a boilerplate, it has a lot of built-in functions to do all the heavy lifting, so you can focus on getting your app out there. Touchy goes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more so you can really rock the mobile web.

WebApp.Net

WebApp.Net is a light weight, powerful JavaScript framework taking advantage of AJAX technology. It provides a full set of ready to use components to help you develop, quickly and easily, advanced mobile web applications.

Wink Toolkit

Wink Toolkit is a lightweight JavaScript toolkit, designed and developed to meet the specific constraints of the mobile environment. The toolkit’s core offers all the basic functionalities a mobile developer would need from touch event handling to DOM manipulation objects or CSS transforms utilities.

Zepto.Js

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

Miscellaneous tools

Here we have everything from validators to image gallery plugins.

320 and up

The ‘tiny screen first’ boilerplate extension. It prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

960 Grid on jQuery-Mobile

jQuery-mobile-960 is a port of 960 grid to jQuery mobile. It merges the flexibility of 960.gs, and the ease of jQuery mobile.

Animatable

It’s not ready to use…yet. But you should bookmark this one. It’ll help us create animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices.

Dynamic carousel

Responsive carousel script. Check it out!

Galleria.Aino.Se

Galleria is a cool image gallery script that works nice from desktop to mobile.

HTML5 Boilerplate / mobile

HTML 5 Boilerplate has a set of cool features for mobile interfaces with a lot of guidelines to get the most from your mobile app.

Initializr 2

Since it uses the HTML5 Boilerplate it has the same cool features.

Masonry

It allows you to use crazy grids that would be just impossible with CSS floats. Plus, with a touch of creativity, you can do cool things, like this Scroll Wall with jQuery Mobile and Masonry.

Mobile Emulators & Simulators: The Ultimate Guide – MobileXWeb

A complete guide of mobile emulators and tools to help you test your apps.

Not Just A Grid

Not Just a Grid is a flexible and modular CSS framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.

MobiReady

The mobiReady testing tool evaluates mobile-readiness using industry best practices & standards.

Treesaver

Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS.

W3C Mobile Validator

It’s from W3C. No more description needed, right?

Wijmo

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts.

WP Touch

WPtouch: A simple, powerful and elegant mobile theme for your website. WPtouch automatically transforms your WordPress blog into an iPhone application.

Tutorials and Articles

Mobile Web Design Trends and Best Practices – DesignModo

A long and very well written guide with all the basics you need to know before getting started with this mobile development thing.

Building Mobile Web Apps the Right Way: Tips and Techniques – SixRevisions

Good guide with a comparison of what you’re used to doing for desktop development and what you should be doing for mobile interfaces.

10 handy jQuery mobile tips and snippets to get you started – WebDesignerDepot

jQuery mobile is a great tool, indeed. But you need to know how to use it. This really helpful guide will help you get started with jQuery mobile!

Build a Responsive, Mobile-Friendly Web Page With Skeleton – DesignShack

I didn’t mention skeleton because this guide will help you understand it better. You can use these principles in all other mobile boilerplates out there.

Awesome Mobile Image Gallery Web App – Codrops

Check it with your mobile device and be as amazed as I was at first. Pretty cool :)

Improve Website Usability Using jQuery, HTML5, And CSS3

Jamal — Fri, 11 Nov 2011 10:00:27 +0000

Remember back when if you wanted to add interactivity to your site to improve the UX aspect to make it more appealing to visitors, you had to immediately go to a flash outlet? Well that sure does seem like a long time ago now, surprisingly so because it was just a few short years ago. The decline of Flash use for these instances can be credited to advances in web technologies such as HTML5, CSS3, and jQuery. These advancements have made the use of Flash in most cases an outdated and inefficient method of tackling interactivity in a website. That is why in this article, we’re going to take a look at HTML5, CSS3, and jQuery tutorials, techniques, and resources that can replace aspects of a website where the use of Flash was the dominant and most practical option.

Forms

Pretty Checkboxs with jQuery

This is a cool tutorial that teaches you how to turn your ordinary check boxes into something stylish, and quite fun to use.

Pretty Checkboxes with jQuery

Rethinking Forms in HTML5

This is a great tutorial by the people at Nettuts+ about how you can get the most out of HTML5 for your fomrs.

jQuery Impromtu

jQuery Impromtu is a great replacement for alerts, prompts, and confirmations that users will enjoy and not find annoying in the slightest.

jQuery Impromptu

jQuery Simple Modal

Simple Modal is a flexible modal dialog framework which provides a great interface for development, allowing for some really nice looking forms too.

jQuery Simple Model

mcDropdown

This multi-column drop down layout is great for giving users a detailed tree of options to select from.

mcDropdown

jQ Transform

jQ Transform is a great tool for adding some style to your forms, giving them cool skin elements.

jqTransform

Emblematiq Niceforms

Niceforms by Embematiq is a cool jQuery plug-in that allows you to turn your boring forms into something cool with one of their designed themes, or with your own custom made one.

Emblematiq Niceforms

Uniform

Uniform masks your standard forms with custom skins and works in perfect sync with your real form elements, ensuring great accessibility and compatibility.

Uniform

Image Buttons a Part of Input Fields

This is a great tutorial to learn how to have image buttons inside of your input fields.

Images As Apart of Input Fields

DynamicWP Contact Form

This is a great WP plug-in that gives you a contact form that slides conveniently from the side of the page, and then back once it is no longer of use.

DynamicWP Contact Form

jQuery Highlight

jQuery Highlight is a great jQuery feature that gives your active input fields a highlight over them, as we know some users need all the extra guidance they can get.

jQuery Highlight

jQuery inline form Validation

jQuery inline form Validation is a cool hassle free form validation option that takes away the mess that is usually associated with this form feature.

jQuery inline from Validation

Navigation

White Smoke Menu Style

This jQuery powered navigation menu is very reminiscent of what was usually done in flash, and moves so smoothly you might think it was. It is fully browser compatible, and even maintains functionality if Javascript is turned off.

jQuery White Smoke Menu

jQuery mb.Menu

This jQuery menu plug-in is a great option to look into when aiming to build a complex multilevel tree menu with some style and great functionality.

mb.Menu

Coda Slider

Coda Slider is a very versatile and feature full panel slider. It comes as is very well suitable for your panel slider needs, and there have been great advancesin how to better it.

Coda Slider

ID Tabs

This is by far the best tabs and/or panel navigation jQuery plug-in when level of how extensibility is concerned.

ID Tabs

Smooth Horizontal Sliding Menu

This is a cool tutorial that teaches you how to make a jQuery powered menu with the sub entries sliding out horizontally.

Horizontal Sliding Menu

jBreadCrumb Menu

This collapsible bread crumb menu that collapses based on the the amount and length of the elements in the set.

jBreadCrumb

jQuery FLOWERNAV

FLOWERNAV is a cool animated navigation plug-in that, well gives a flower effect to your link.

FLOWERNAV

jQuery Accordion

This is an easy to follow jQuery accordion style navigation menu tutorial.

Accordion Style Menu

Interface

jQuery Slide Note

Slide Note is a great plugin for giving your visitors a little hint, or note about something on your website.

Slide Note

jQuery Page Peel

Page peel is a simple to use jQuery plug-in that is great when you want to advertise something in a cool way.

jQuery Page Peel

jQuery InfiniScroll

InfiniScroll is a cool plug-in that allows for an never ending scrollable section. This is great for websites that have sections with long lists.

jQuery InfiniScroll

jQuery SliderNav

SliderNav is a jQuery plug-in that allows you to incorporate dynamic vertically sliding content to your website.

SliderNav

jQuery Tipped

Tipped is a cool plug-in that easily allows you to add tips to your website’s content, there are also cool skins to choose from.

Tipped

Supersized

Supersized is a jQuery plug-in that allows you to have a image slideshow as your website’s background.

Imagin8

Imagin8 is not just another jQuery image slider. This one allows for you to direct a path folder, so ALL THE IMAGES DON’T HAVE TO BE IN YOU HTML! Just label your first image as 1.jpg for example, and the following the numerically after that, and they will be automatically added to your slideshow. Great for clients.

Imagin8

jQuery Lettering

Lettering is a jQuery plug-in that allows you to have complete control of every letter, opening for great creative web typography experimenting.

jQuery Lettering

jQuery Stylesheet Switcher

Stylesheet Switcher is a jQuery plug-in that lets you set links within your page to change to different stylesheets.

jQuery Stylesheet Switcher

Flip

Flip is a jQuery plug-in that lets you flip your web elements in one of four directions.

Flip

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!

1stwebdesigner - Graphic and Web Design Blog » jquery

jQuery Mobile – What You Need to Know

jQuery Mobile’s Main Concept

Cross browsing, a nightmare that was coming back

Then, the hero arrives

Awesomeness proven, let’s code!

Basic structure

Header

Footer

Basic UI components

Header

Footer

Header second page

Footer second page

Navigation, Lists, Form & Dialog Components

Alert element

Form elements

This is a list

Alert!

Custom font embedding

Compress images

Remove components

Now it’s your turn?

40+ Fresh jQuery Image and Content Sliders Plugins

1. FlexSlider

2. Bubble Slideshow Effect with jQuery

3. Responsive Image Gallery with Thumbnail Carousel

4. Circular Content Carousel with jQuery

5. Lateral On-Scroll Sliding with jQuery

6. Scrollbar Visibility with jScrollPane

7. Timelinr

8. SmartGallery

9. Xml Driven Vertical News Scroller Script

10. jQuery Sliding Content Bar Plugin: PushUp Content

11. Skitter

12. Diapo

13. Craftyslide

14. Responsly.js

15. Elastislide

16. Blueberry

17. Slidorion

18. bxSlider

19. Minimit

20. Galleria

21. jQuery Image Gallery

22. rlightbox

23. jQuery MB Bgnd Gallery

24. PikaChoose

25. Fluid Thumbnail Bar with jQuery

27. Elastic Image Slideshow with Thumbnail Preview

28. Fullscreen Slideshow with HTML5 Audio and jQuery

29. Image Wall with jQuery

30. Rotating Image Slider with jQuery

31. Moving Boxes Content with jQuery

32. Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

33. Flip Box

34. Innovation Slide – Slide jquery plugin

35. TN3 Gallery

36. Shutter Effect Portfolio with jQuery and Canvas

37. Photobooth with PHP, jQuery and CSS3

38. Making a Flickr-powered Slideshow

39. How to Make Auto-Advancing Slideshows

40. Sliding Contents With JQuery

41. Slides

42. Slidy

Creative Christmas Gift For Geek Lovers – Web & Mobile App

Demo & Download

Design stuff

Happy Christmas!

Setting up pictures and captions

Coding Slideshow JS

Personal touch: My horrible voice as background music

What do you think?

Create Elegant Tags With Sliding Post Count For WordPress

Demo first, please

Wp_list_categories()

Categories

Oops, HTML is not quite right yet

CSS, CSS, CSS

jQuery Black Magic