Another great jQuery plugin, Spritely help us creating animation from image sprites, no flash just pure HTML and JavaScript! Spritely simply animate our transparent background image (css property : background-image) frame by frame or slide it to the left or right continuously with using two Spritely methods : sprite() and pan().

Spritely licensed under dual license, MIT and GPL version 2 license, it works beautifully on most common browser including Firefox, Safari, Chrome, Opera and even Internet Explorer 6 and greater (because of IE lack, we must consider the tranparent image, we can use GIF format), now we give it a try.

Still remember Sexy Curls a jQuery plugin to make page-folding? How about that style we integrate into image gallery? That will be a sweet one and jFlip help us creating that one. jFlip is a jQuery plugin that convert our boring image list into image gallery with page flip effect.

It supports flipping, auto image resizing and auto adjust with aspect ratio. We just need to include jQuery and jFlip script, creating the image list in the unordered list then call jFlip function to create a flipping image gallery, easy isn’t it?

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 :

<div class="list-tag">
<div class="content-list-tag">
	<!-- fill with content as much as possible --></div>
</div>
<div class="more-tags">
	<img src="images/down.png" border="0" alt="" />
</div>

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

This is a free e-commerce icon set from Web Icon Set, contains 10 high quality icons including Products on Sale, New Porducts, Checkout, Secure Payment, Credit Cards, Delivery, Shopping Bag, Empty Shopping Bag, Shopping Cart, Empty Shopping Cart. There are released in four different size (128px, 64px, 48px, 32px) in PNG format and you can use them for both personal and commercial projects.

Yes, this is a jQuery plugin similar with jGrowl to help you creating on the fly notification or sticky notes. It support custom effects, HTML elements including forms, history viewer (to view all previous notification), dynamically updating text, title, icon, etc.

This plugin unfortunately only works on jQuery 1.4 but it’s integrated to jQuery UI, so if you want to add some different styles or effect animations you can modify them in very ease way (see ThemeRoller). Pines Notify licensed under GNU version 3, you can try and see how to use Pines Notify at here.

In previous post i featured free icons that contains 30 Android icons, now there’s another Android-thingy i am featuring. Yes this is a collection of Android Graphical User Interface (GUI) in PSD format, this stuff contains button element, slider, keyboard, list menu, dialog box, tabs, etc.

This stuff is very useful to help us creating application mock-ups and we can use it for free without any restrictions. The file contains PSD and some fonts that used in this GUI, you can view all these element set here.

Ajax Availability Calendar is an open source calendar application to help you creating AJAX calendar that showing your daily availability. Based on Mootools + PHP this apps can be planted to your existing application, very useful in case we need a calendar that can handling booking feature.

This application also provides admin panel for administration-related including Booking Items, Booking, Languages being used, etc. You can give it a try here or download it at here.

Based on this great tutorial by vectips.com i created social media icon set, named PinkStrip. The icon set contains 12 icons that represent some social media website and apps, including, Wordpress, Twitter, Tumblr, Stumbleupon, Picasa, Linkedin, GTalk, Google Buzz, Friendfeed, Facebook and Blogger.

Those icons are in 128px and 64px in PNG format, i don’t put any license to this icon set so you can use them for any purpose including commercial use and if you love this icons please put a link to this post. However this is my first time in making icons, so your feedback will be very useful.

Ok then, you can download them here and show your love by sharing to the others, thank you!