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!

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);
}

Twitter has a nice effect in presenting their tweet box by adding outer glow effect on it while the tweeps are tweeting. If you’re webkit-based browser user you must’ve notice that glowing effect works with the animation. We’ve discussed that technique on previous post (Stylize Input Element Using CSS3), the thing we’ve not yet do is adding the animation on it.

Just like the previous post, for creating glowing effect we can use box shadow property on the input and for adding the animation on it we can add css animation property (transition) on the input (in this case textare) element, set the duration property into 0.3 seconds and timing function property into ease-in-out. Take a look at following script :

textarea {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #ccc;
	-webkit-transition: .3s ease-in-out;
  	-moz-transition: .3s ease-in-out;
}

	textarea:focus {
		border: 1px solid #fafafa;
		-webkit-box-shadow: 0px 0px 6px #007eff;
		-moz-box-shadow: 0px 0px 5px #007eff;
		box-shadow: 0px 0px 5px #007eff;
	}

Since the textarea element has css transition on it, it will have glowing effect with animation when the textarea has a focus state. The animation works beautifully on Safari 4.0.5 and Chrome 5.0.375.38, the demo won’t work on current Firefox version since Firefox will support css transition on version 3.7.

In this post, I will list 10 random jQuery snippets I collected from all of my previous tutorial. If you always follow my tutorial you must be familiar with the following snippets, enjoy!


Traversing Each Element and Do The Same Action
This code will traversing each element that have a class and do the same action on each element. We’ve used this code on “How To Create iPhone-Style Navigation (Part I)” and “iPhone-Style Navigation:AJAX + Rotate (Part II)”

$('.additional-block').each(function() {
	//Do action
});

Count Previous Siblings
Sometimes we need to count the previous siblings of selected element, we’ve used this code on “Create Animated Navigation Menu From Stratch“.

countPreviousItem = $(this).prevAll('element').length;

Animate Previous Element’s Parent
Just like above code this code we’ve used on “Create Animated Navigation Menu From Stratch“, we can animate or doing some action to the previous element’s parent from the selected element.

$(this).parents('element').prev('element').animate({ marginLeft: someFunctin }, 300);

Get Element’s Index Number
We can get element’s index number from its parent using following code, we’ve used this code on “Create Groovershark-like Widget Slider“.

indexNumber	= $('element').index();

Get Checkbox Value
On “Stylize Your Own Checkboxes” and “[Code Snippet] jQuery : Checkbox & Table” posts we needed a code to check the checkbox is being checked or not, and we’ve used this following code.

checkboxValue = $('checkbox-element').attr('checked');
//OR
checkboxValue = $('checkbox-element')[0].checked;

Count Element’s Padding
Count current element’s padding using this script, we’ve used this script on “Create Animated Navigation Menu From Stratch”

$('element').css('padding-left');
//OR another padding
$('element').css('padding-top');

Does The Element Exists?
Before do some action to the selected element we can check its existance, does it exists or not. We’ve used this code on “[CodeSnippet] jQuery : Confirm User’s Action“.

if($(element).next('anotherElement').length <= 0) {
	//element doesn't exists;
}  else {
	//element exists;
}

Inject Event Function on Any Additional Element
On "[CodeSnippet] jQuery : Confirm User’s Action" we also use this following code to inject an event function on any additional element we've added.

$('element').live('click', function(){
	//Do some action
});

Toggle The Function
On "iPhone-Style Navigation:AJAX + Rotate (Part II)" post, we've created a button toggle to rotate and rotate back the iPhone, here is the short code :

$('element').toggle(
	function() {
		//Rotate or do some action
	},
	function() {
		//Rotate back or do some action
	}
);

Toggle Mouseover and Mouseout
If we want to call different action when user mouseover or mouseout our element, we can use this following code that we've used on "How to create The Wire Tumblr in Realtime-alike".

$('element').hover(
	function() {
		//When mouseover do some action
	},
	function() {
		//When mouseout do some action
	}
);

The following short code is a way to add a fade in effect to your webpage. The main task we want to do are hiding our webpage content then display it with fade in effect when the user load the webpage. These step will use two jQuery built-in function, hide() and fadeIn().

$(document).ready(function() {
	$('body').hide().fadeIn(1000);
});

First we hide the whole body using hide() and display it using fadeIn() in 1000 milliseconds. The last, never hide your whole body using CSS and display them using JavaScript to avoid your content stay hidden because of the user disabling the JavaScript.

Don’t let your link that have a critical action (such as delete some data or something else) fly away on their own self, we must put a confirmation before do the action to prevent user’s mistake. Now, let us make that one.

Java Script has a built-in function to create a user confirmation box ( confirm() ), it means we can call that confirmation box to confirm user’s action. So if the user click a link, they must confirm that before we process the action. If the answer is cancel the default action will be cancelled and vice versa. We can use preventDefault() function to cancel the default action from our link. Take a look at following script. (Implementation #1).

$('.ask-plain').click(function(e) {

	e.preventDefault();
	thisHref	= $(this).attr('href');

	if(confirm('Are you sure')) {
		window.location = thisHref;
	}

});

If the user click the link we cancel its default action, grab its default link and confirm the user. If the user confirms his action then we’ll redirect to the default link. But that’s too plain, we’ll replace them with a cute one by adding some CSS properties and jQuery magic. (Implementation #2 and #3).

$('.ask').click(function(e) {

	e.preventDefault();
	thisHref	= $(this).attr('href');

	if($(this).next('div.question').length <= 0)
		$(this).after('
Are you sure?
 YesCancel

');

	$('.question').animate({opacity: 1}, 300);

	$('.yes').live('click', function(){
		window.location = thisHref;
	});

	$('.cancel').live('click', function(){
		$(this).parents('div.question').fadeOut(300, function() {
			$(this).remove();
		});
});

The process is similar to the first script, but we’ll use our customized confirmation box (div with class question) instead of confirm() function. By attaching div element after clicked link element, our confirmation box will appear and displaying a confirmation. If the user confirms his action then we’ll redirect to the default link, else we’ll remove our confirmation box. That’s it, we have a cute confirmation box

You must be familiar with css button with hovered and pressed-style, we always meet them around the internet world with ease. Fortunately, we can make them with a very simple css technique. By using built-in css pseudo selector (:hover and :active) we can manipulate a boring link navigator into a cute one.

As i said before we’ll use css pseudo selector, :hover and :active. :hover is a pseudo-selector to read user’s hovering action to our element while :active read pressing action. To make the button we need button image sprites as the background image, the image sprites divided into three states : normal state, hover state and press state.

We’ll put the image sprite as background image and play it’s position based on the user action, for example in the normal state the background image position will be set to ‘top left‘, hover state set to ‘center left‘ and press state set to ‘bottom left‘. These setted position will automatically set our background image position as our request.

We’ll set the html into following script :

This is a Yellow Button

And the last script is CSS :

.yellow-button {
	display:block;
	width: 201px;
	height: 46px;
	padding: 21px 0 0 0;
	background: url('images/yellow-button.png') top left no-repeat;
	margin-bottom: 2em;
	margin-right: 2em;
	float: left;
}

	.yellow-button:hover {
		background-position: center left;
	}

	.yellow-button:active {
		background-position: bottom left;
		padding-top: 22px;
	}

Ok, that’s it, thank you for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated

This is a very basic technique to show and hide HTML element, we just need to define the element then show or hide them with jQuery built-in function, $.slideToggle(). But if you see my sidebar in ‘Tags Collection’ section, you’ll notice that there’s a toggle to show or hide the tags collection (with undefined div’s height, of course) and that’s what i will explain.

First we make up the html :

.list-tag {
	height: 195px;
	overflow: hidden;
}

.more-tags {
	cursor: pointer;
	padding-top: 15px;
	background: url('shade-tag.png') center top no-repeat;
	display:block;
	text-align: center;
}

Div list-tag is a div binder of div content-list-tag, the div content-list-tag has undefined height whilst the div binder has the pre-defined height, based on our needs. Div more-tags is a toggle to show or hide the div content-list-tag.

First we must inject div more-tags with $.toggle() function to make it toggled, read the div content-list-tag’s height by $.height() function, show the div content-list-tag’s content by animating it then rotate the down.png image to 180deg (we need a jquery plugin to do this step). If the user click the toggle once more, then we just need to revert previous step.

$('.more-tags').toggle(function() {

	contentTagsHeight	= $('.content-list-tag').height();

	$('.list-tag').animate({height : contentTagsHeight});
	$(this).children('img').animate({rotate: '180deg'});

}, function() {

	$('.list-tag').animate({height : '195px'});
	$(this).children('img').animate({rotate: '0deg'});

});

Gmail compose has functionality to detect any content modification and confirm us before closing browser’s window because of unsaved content that we’ve modify, yes in this post i will try to explain how to make these function work on our webapps.

Firstly, we create a boolean variable with default value false then we check is there any content in our input that have been modified by the user. If the user has been modified then we change the boolean variable value to true.

Now, we create a function (named checkIsEdit) to check the value of the boolean variable, if the value is true then alert the user that the’ve modify some content. And the last step, we attach checkIsEdit function to the window event (onbeforeunload) to check whether the window is being refreshed or closed and fire up the function. That’s it, check out this following code :

$(document).ready(function() {

	var isEdit	= false;

	$('input').change(function() {
		isEdit = true;
	});

	function checkIsEdit() {
		if(isEdit)
			return "You have modify some content";
	}

	window.onbeforeunload = checkIsEdit;
});

Today’s code snippet is how to automagically check/uncheck checkbox element by clicking a single row of a table using jQuery. Firstly we add click event on the table’s row, it will help us read click event on each row. Grab checkbox element on its row, check whether this checkbox was checked or not yet, then add checked or unchecked value on it.

$('table tr').click(function() {

	checkBox = $(this).children('td').children('input[type=checkbox]');

	if(checkBox.attr('checked'))
		checkBox.attr('checked', '');
	else
		checkBox.attr('checked', 'checked');
});

Now our row have functionality to check/uncheck checkbox element, but how about we add a little function to check/uncheck all checkbox in our table by clicking only one checkbox, here is the code :

$('.check-all').click(function() {

	checkBox = $('table tr').children('td').children('input[type=checkbox]');

	if($(this).attr('checked'))
		checkBox.attr('checked', 'checked');
	else
		checkBox.attr('checked', '');
});

We also can add another functionality such as delete checked row or etc. Just play around with jQuery function and happy coding

Sometimes we want to show current week posts in our blog, it can easily do with basic WordPress’s query_posts function. Firstly we grab current week number of a year with php function date(‘W’) (ISO-8601) then add its value to the query, and voila we’ve just created current week posts from our blog. Let’s see the code :

/* Help the query to create pagination  */
$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

/* Grab this week number of a year (ISO-8601) */
$thisWeek = date('W');

/* Start to query! */
$currentPosts 	= query_posts('showposts=' . $limit .
				 '&paged=' . $paged .
				 '&w='.$thisWeek);