Webstuffshare

[CodeSnippet] CSS3 Flying Menu

Hidayat Sagita — Fri, 25 Jun 2010 13:41:28 +0000

This is a request post from my reader. He asks me how to create a simple menu that have a flying effect when user hovering them using only CSS. As we know CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help. We’ll use them for creating the flying effect and here is the result. Enjoy!

Show Implementation

Download Source

Firstly, we need to create list menu using unordered list element :

/* Sample #1 */

	
		
			 Webstuffshare Home
		
	
		
			 Subscribe RSS Feed
		
	
		
			 Subscribe Email
		
	
		
			 Follow Twitter
		

/* Sample #2 */

	
		
			 Webstuffshare Home
		
	
		
			 Subscribe RSS Feed
		
	
		
			 Subscribe Email
		
	
		
			 Follow Twitter

They are arranged vertically by default, so we must arrange them horizontally using CSS property ‘float‘ with ‘left‘ value. Next, add CSS transition to make any properties change on it animated, we set the duration in 0.3 seconds or 300 milliseconds.

.cleaner {
	clear: both;
}
 
#fly-menu, #fly-glow-menu {
	margin: 1em auto 0 auto;
}
 
	#fly-menu li, #fly-glow-menu li {
 
		/* Basic style */
		list-style-type: none;
		margin-right: .5em;
		float: left;
		font-size: 15px;
		background: #cacaca;
		padding: 10px;
		cursor: pointer;
 
		/* Add shadow */
		-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
		-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
		box-shadow: inset 0px 0px 10px rgba(0,0,0, .3);
 
		/*
			Add animation using transition
			-webkit : Safari & Chrome.
			-moz : Firefox
			-o : Opera
		*/
		-webkit-transition: .3s ease-in-out;
  		-moz-transition: .3s ease-in-out;
  		-o-transition: .3s ease-in-out;
	}

Since each menu is having float with left value, we need a cleaner element to make another element not floating into the menu.
The last are reading hover event on each menu by adding pseudo property :hover and change the ‘margin-top‘ properties into -1em. This will make our menu fly upwards when user hovering them.

#fly-menu li:hover {
	margin-top: -1em;
}

We can also make the animation nicer by changing menu’s background color and modify its box shadow properties or anything we need.

#fly-glow-menu li:hover {
 
	margin-top: -1em;
	background: #fff;
 
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
	-moz-box-shadow: 0px 0px 10px rgba(0,0,0, .3);
	box-shadow: 0px 0px 10px rgba(0,0,0, .3);
}

jQuery Fundamentals

Hidayat Sagita — Fri, 18 Jun 2010 07:04:00 +0000

“jQuery is fast becoming a must-have skill for front-end developers. The purpose of this book is to provide an overview of the jQuery JavaScript library; when you’re done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning.
“

This is a very handy and superb useful handbook from Rebecca Murphey under the Creative Commons Attribution-Share Alike 3.0 license. Each topic described very clear so you can follow easily even you’re new on JavaScript.
Read the tutorial.

Create Your Own Dashboard Menu

Hidayat Sagita — Wed, 16 Jun 2010 13:57:27 +0000

In this tutorial we are going to create our own dashboard menu as in Leopard dashboard. Dashboard menu in Leopard usually uses as a container for a tons of widgets we have and that will be nice if we have one on our web application. First, take a look at below demo to know the result we want to build.

Show Implementation

Download Source

Basic Technique
The dashboard will be hidden out of the webpage, in this case on the bottom of the page. We can do that by setting the dahboard position into absolute, put its bottom position with minus point and set the body’s overflow properties into hidden.

The problem with this technique is our document content will also hidden since the body’s overflow properties was set into hidden, we can solve them by moving the dashboard into the top of the page, but in this demo we’ll continue to put them on the bottom.

Expected Result:

Build Dashboard
We’ll separate the dashboard contents into 3 parts : toggle for showing and hiding dahsboard, dashboard menu for wrapping widgets list and dot container for wrapping dashboard’s background with metallic effect. Wrap them all on one div (as a container) so we can easily move these 3 parts only by styling this div.

Now we will styling them. Set the dashboard’s width into 100%, position absolute, bottom into 0px and also add inset box shadow into them to make emboss effect. Put the toggle’s position on top of the dashboard to make it always visible even the dashboard is hidden.

#dashboard {
	font-family: Arial;
	font-style: normal;
	background: #a3acb7;
	display: block;
	width: 100%;
	height: 150px;
	margin-right: auto;
	margin-left: auto;
	-webkit-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	position: absolute;
	bottom: 0px;
}
 
#dashboard-menu {
	position: absolute;
	display: block;
	z-index: 2;
}
 
#dot-container {
	display: block;
	width: 200%;
	text-align: left;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
 
#toggle {
	display: inline-block;
	margin-top: -3em;
	left: 0;
	position: absolute;
	cursor: pointer;
}

Expected Result:

Create Metallic Effect With CSS and jQuery
The most interesting technique is how to create metallic effect on dashboard’s background using only CSS and jQuery. The effect are a groups of black circle div with white shadow on it, we can repeat them horizontally until it’s equal to document width and after that repeat them vertically. Move some pixel the odd dots group’s position to make it more real.

.dot {
	background: #1f1f1f;
	width: 4px;
	height: 4px;
	display: inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 1px 0px #ffffff;
	-moz-box-shadow: 0px 1px 0px #ffffff;
	box-shadow: 0px 1px 0px #ffffff;
	margin-right: .3em;
}

Expected Result:

We won’t create each dot by copy and paste the span since jQuery can generate and repeat them dynamically. Repeat horizontally the dots until it’s equal to document’s width and after that repeat them vertically. The last thing to do is insert them into dot container div.

//Create base variable, check document width and count how much dot per line.
var a, b, element = '';
documentWidth		= $(window).width();
dotLength			= parseInt(documentWidth/10);
 
//Loop dot per line
for(a=0; a<= 11; a++) {
 
	//Check is even or odd to add some pixel to the margin left
	className= ((a%2) == 0) ? '0' : '0.4em';
	element 	= element + '+className+'; margin-bottom: -.5em">\n';
 
		//Loop to create the dot
		for(b=0; b<=dotLength; b++) {
			element = element + '\t ';
		}
 
	element = element + '
';
}
 
//Insert dots on #dot-container
$('#dot-container').html(element);

Put The Widgets
The dashboard was setted perfectly, now we’ll put the widgets list. Put each widgets on unordered list and add its widget name below the widget.


	
		
		 
 Dashboard
		
		
		 
 E-Mail Client
		
		
		 
 Calendar
		
		
		 
 Geolocation
		
		
		 
 Sticky Note
		
		
		 
 AirPort
		
		
		 
 Calculator

Expected Result:

The list still appear vertical, now we must set them into horizontal orientation by set its display properties into inline-block. Add the distance on each widget and set its margin properly.

#dashboard-menu {
	position: absolute;
	display: block;
	left: -65em;
	z-index: 2;
}
 
	#dashboard-menu ul li {
		display: inline-block;
		text-align: center;
		margin-right: 2em;
		margin-top: 1em;
		color: #313235;
		text-shadow: 0px 1px 0px #fff;
		font-weight: bold;
	}
 
	li img {
		margin-bottom: .7em;
		border: 0;
		cursor: pointer;
	}

Expected Result:

We want the widgets is moving from left to right when the dashboard is show up, so we need to set its left property into -65em.

Hide and Seek
Now we’ll add some jQuery code to the dashboard to make it able showing and hiding. Firstly we must hide the dashboard position by setting its position with some minus pixels, so it will be hidden.

#dashboard {
	font-family: Arial;
	font-style: normal;
	background: #a3acb7;
	display: block;
	width: 100%;
	height: 150px;
	margin-right: auto;
	margin-left: auto;
	-webkit-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .6);
	position: absolute;
	bottom: -150px;
}

Add toggle function to the image toggle, the first function will rotate the image toggle by set its rotate property into 45 degree (we need zachstronaut’s plugin for doing this), show the dashboard by set its bottom property value into 0px and show the menu by set its left into 3em. These action is in animate function so any change will have animation. For the second function we just need to revert these value.

//Add event toggle on #toggle
$('#toggle').toggle(
 
	function() {
 
		//Rotate toggle
		$(this).stop().animate({rotate : '-=45deg'});
		$('#dashboard').stop().animate({bottom : '0px'});
		$('#dashboard-menu').stop().animate({left : '3em'});
	},
 
	function() {
 
		//Revert rotate toggle
		$(this).stop().animate({rotate : '0deg'});
		$('#dashboard').stop().animate({bottom : '-150px'}, 700);
		$('#dashboard-menu').stop().animate({left : '-65em'});
	}
);

That’s it we just made our simple dashboard menu, hope you enjoy my post and thank your for reading!

RGraph : HTML5 Canvas Graph Library

Hidayat Sagita — Tue, 15 Jun 2010 11:27:30 +0000

RGraph is a HTML5 canvas graph library based on the canvas tag. Like most graph library, RGraph support wide variety of graph types including bar chart, pie chart, radar chart, etc. The graph quality also have a good quality despite using HTML5 canvas tag.

Since RGraph using canvas tag and canvas tag allows for two dimensional drawing using JavaScript, these graphs will appear much faster than the flash-based. RGraph works beautifully on most common browser that has supporting canvas tag including Firefox 3.0+, Chrome 1+, Safari 3+ and Opera 9.5+. Now, take a look at tons of RGraph result.

jQuery Plugin : jQuery iPhone UI

Hidayat Sagita — Mon, 14 Jun 2010 05:07:34 +0000

jQuery iPhone UI is a jQuery plugin aims to help us easily create iPhone UI. Just like another jQuery plugin, this plugin allow us doing only three steps to create any iPhone UI : include jQuery framework and this plugin, set up the HTML element and call the plugin function.
jQuery iPhone UI provides some iPhone UI including Scroll, Tabs, Gallery, Forms (input, password, checkbox, select) and Buttons. You can try them at here and here’s the example :

Code :

   $(document).ready(function(){
   	$(".tabbar").iTabs();
   });


	Mail
	Chat
	Search
	Options

Result :

Simple CSS3 Dropdown Menu

Hidayat Sagita — Thu, 10 Jun 2010 16:30:46 +0000

As we know, CSS3 has many good features for help us creating more sweet User Interface. One of them is box shadow, it helps us adding shadow effect on each styled element. You must be familiar with drop down menu with shadow effect on it, I usually add the effect using some images but now we’ll create that one using pure CSS.

Show Implementation

Download Source

Drop Down Technique
To create drop down menu like the demo we can use a div for the menu container and an unordered list for the menu. Wrap the unordered list on the div and hide them, we’ll only show the menu when user hovering the div. Take a look at following image :

As you mention above, the unordered list (the menu) is hidden, positioned inside the div and under the text “Please choose following menu”. So when the user hover the menu container the menu will have sub menu below it.

The Object and Its Style
As I said above the menu container will contains unordered list as the menu, so we will wrap the unordered list with the div :


	+   Please choose following menu
	
		
			
				 Subscribe RSS Feed
			
		
		
			
				 Subscribe Email Subscription
			
		
		
			
				 Follow My Twitter

The important thing is we must fixed the menu container’s height (class name : drop-menu) so no matter how much list (class name : sub-menu) element inside, its height will not change. We can also make it more cute by set up its padding, font size, border and also the cursor property.

.drop-menu {
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 10px 10px;
	font-size: 22px;
	height: 25px;
	max-height: 25px;
	width: 400px;
	background: #fff;
	cursor: pointer;
	border: 1px solid #f6f0e4;
}

Expected Result:

We need an hover event in the menu container for showing up the menu, we can use CSS pseudo-class :hover. Since we want to show the menu by menu container hover event we can use CSS nesting :

.drop-menu:hover .sub-menu {
	display: inline-block;
}

Next is styling the menu, set its width, background and padding equal to its parent. Add a shadow effect by setting its box-shadow property, set x-axis to 0px, y-axis to 13px, blur to 25px and shadow color to black with 20% alpha. This will make the shadow has a gradient effect.

.sub-menu {
	display: none;
	width: 400px;
	background: #fff;
	padding: 10px 10px;
	margin-left: -11px;
	margin-top: 10px;
	border: 1px solid #fff;
	-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
 
	.sub-menu li {
		list-style-type: none;
		display: block;
		border-bottom: 1px dotted #eaeaea;
		font-size: 19px;
		height: 22px;
		padding: 8px 0;
	}
 
		.sub-menu li img {
			margin-right: .5em;
		}
 
	.sub-menu li:hover {
		border-bottom: 1px dotted #bababa;
	}

Expected Result:

We also will add a little animation to the plus symbol, if the user hovering menu container we will rotate the plus symbol into 45 degree so it will transform into crosswise.

.plus {
	display: inline-block;
	-webkit-transition: .3s ease-in-out;
  	-moz-transition: .3s ease-in-out;
  	-o-transition: .3s ease-in-out;
}
 
.drop-menu:hover .plus {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

Wrap them up :

* { 
	margin:0; padding:0; 
}
 
body { 
	font-family: Georgia;
	background: #fff9ec;
	text-align: center;
	color: #464530;
	text-shadow: 0px 1px 0px #fff;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: -1px;
	margin-top: 3%;
}
 
a, a:visited {
	color: #464530;
	text-decoration: none; 
}
 
label {
	font-size: 20px;
}
 
#content {
	display: block;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}	
 
.drop-menu {
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 10px 10px;
	font-size: 22px;
	height: 25px;
	max-height: 25px;
	width: 400px;
	background: #fff;
	cursor: pointer;
	border: 1px solid #f6f0e4;
}
 
	.plus {
		display: inline-block;
		-webkit-transition: .3s ease-in-out;
  		-moz-transition: .3s ease-in-out;
  		-o-transition: .3s ease-in-out;
	}
 
	.drop-menu:hover {
		border: 1px solid #fff;
	}
 
	.drop-menu:hover .sub-menu {
		display: inline-block;
	}
 
	.drop-menu:hover .plus {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
	}
 
	.sub-menu {
		display: none;
		width: 400px;
		background: #fff;
		padding: 10px 10px;
		margin-left: -11px;
		margin-top: 10px;
		border: 1px solid #fff;
		-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
		-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
		box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	}
 
	.sub-menu li {
		list-style-type: none;
		display: block;
		border-bottom: 1px dotted #eaeaea;
		font-size: 19px;
		height: 22px;
		padding: 8px 0;
	}
 
		.sub-menu li img {
			margin-right: .5em;
		}
 
	.sub-menu li:hover {
		border-bottom: 1px dotted #bababa;
	}

Conclusion
That’s it, we have made simple drop down menu using pure CSS. By using CSS3 properties we can tune our element into another level and also we can minimize the use of images. Thanks for reading!

Pikachoose : Another jQuery Plugin for Image Gallery

Hidayat Sagita — Wed, 19 May 2010 16:02:01 +0000

Pikachoose is a jQuery plugin for image gallery, it has many smooth image transition such as tile effect, horizontal and vertical slide effect and random tile effect. As a regular image gallery plugin, Pikachoose also has some options for slideshows, navigation buttons and auto play.

We can also set some options including thumbnail width, slide speed, transition effect, button text, show caption and delay caption. You can try Pikachoose at here.

HTML5 Security Cheatsheet

Hidayat Sagita — Tue, 18 May 2010 13:47:42 +0000

If we are always aware about web security, I think this stuff will be very useful. This is an HTML5 Security Cheatsheet from Mario Heiderich that contains web application security threats, browser bugs, threat example, tips for avoiding the threats, related sources and the browser list from each threat.

The threats and bugs including Cross Site Scripting (XSS), JavaScript execution via VIDEO tag poster attribute, link hijacking via BASE tag and JavaScript URI, XML-stylesheets executing JavaScript, Client-side denial of service via repeat templates and many more.