We became familiar with Web 2.0 styled websites in the last few years but there are also trendy and unique designs.Hand-drawn style is getting more popular in design world and you can come across amazingly creative hand-drawn websites over the internet.

Source

http://designbeep.com/2010/08/14/43-impressive-and-fully-creative-hand-drawn-websites/

A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. Fully customizable through css and easy to configure.

Source

http://manos.malihu.gr/jquery-custom-content-scroller

Demo

http://manos.malihu.gr/tuts/jquery_custom_scrollbar_vertical.html

View demoDownload source

Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.

The beautiful fashion photos are taken from Beyrouth’s photostream on flickr. The specific set can be found here.

So, let’s get started!

The Markup

Our HTML will consist of a main container with the class and id “cc_menu”. Here we will place all our vertical menu items and the main content div:

<div id="cc_menu" class="cc_menu">
	<div class="cc_item" style="z-index:5;">
		<img src="images/1.jpg" alt="image" />
		<span class="cc_title">Collection</span>
		<div class="cc_submenu">
			<ul>
				<li class="cc_content_1">Winter 2010</li>
				<li class="cc_content_2">Spring 2011</li>
			</ul>
		</div>
	</div>
	<div class="cc_item" style="z-index:4;">
		<img src="images/2.jpg" alt="image" />
		<span class="cc_title">Stores</span>
		<div class="cc_submenu">
			<ul>
				<li class="cc_content_3">Milano</li>
				<li class="cc_content_4">Paris</li>
			</ul>
		</div>
	</div>
	...
	<div id="cc_content" class="cc_content">
		<span id="cc_back" class="cc_back"><< Go back</span>
		<div class="cc_content_1">
			<h1>Winter 2010</h1>
			<p>Some content</p>
		</div>
		<div class="cc_content_2">
			<h1>Spring 2011</h1>
			<p>Some content</p>
		</div>
		...
	</div>
</div>

The first item will get a z-index of 5 and then we will decrease the z-index for the next items. This will make the last item be in the lowest layer. We do this in order to create the card deck collapsing effect.

Each submenu item will share its class with the respective content div. Like that we can make the right content div appear whenever we click on a submenu item.

Let’s take a look at the styling.

The CSS

Our main div that surrounds everything will have the following style:

.cc_menu{
	width:700px; /*140px * 5*/
	height:600px;
	position:relative;
	font-size:14px;
	text-transform:uppercase;
	color:#fff;
}

The width of this container is the sum of all the item widths which is 5 times 140 pixels.

The style of each navigation item will be the following:

.cc_item{
	text-align:center;
	width:140px;
	height:600px;
	float:left;
	border-bottom:1px solid #000;
	background:#444 url(../images/bg.png) repeat top left;
	position:relative;
	-moz-box-shadow:3px -3px 10px #000;
	-webkit-box-shadow:3px -3px 10px #000;
	box-shadow:3px -3px 10px #000;
}

We will give each item a box shadow so that the layering becomes visible. (That does not work in IE yet, so you will have to add a border or some other background image that enhances this.)

The title in each menu element will have a dark background with a subtle shadow around:

span.cc_title{
	color:#fff;
	font-size:16px;
	top:200px;
	left:5px;
	position:absolute;
	padding:3px 0px;
	background:#111;
	width:130px;
	display:block;
	z-index:11;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;
}

The submenu list will be styled as follows:

.cc_submenu ul{
	list-style:none;
	width:140px;
	margin:0;
	padding:0;
	height:0px; /*increase to 200px to slide up*/
	overflow:hidden;
	text-align:left;
	background:#000;
	position:absolute;
	left:0px;
	bottom:0px;
	opacity:0.7;
	z-index:13;
}

We will position the list at the bottom of the item and give it a height of 0 pixel. We will then increase the height to 200 pixels for it to slide up from the bottom.

The list elements of the submenu list will have the following style:

.cc_submenu ul li{
	color:#ddd;
	cursor:pointer;
	padding:10px;
}

The image that will slide in from the top will be positioned negatively, meaning that we will hide it at the top of the item and the page:

.cc_item img{
	position:absolute;
	width:140px;
	height:600px;
	top:-600px;
	left:0px;
}

In our JavaScript function we will make it slide down from the top by animating the top value to 0px.

The div that surrounds all the contents will also be hidden to the left of the page by setting the left value to -700 pixels:

.cc_content{
	width:600px;
	height:600px;
	border-bottom:1px solid #000;
	position:absolute;
	left:-700px;
	background:#444 url(../images/bg.png) repeat top left;
	overflow:hidden;
	-moz-box-shadow:4px 0 7px #000;
	-webkit-box-shadow:4px 0 7px #000;
	box-shadow:4px 0 7px #000;
}

The single content divs will have the following style:

.cc_content div{
	display:none;
	margin:20px;
}

We will give each paragraph the following style:

.cc_content p{
	background:#000;
	padding:20px;
	opacity:0.7;
}

And finally, we will position the back span at the bottom right of the content container:

span.cc_back{
	position:absolute;
	bottom:10px;
	right:10px;
	cursor:pointer;
	color:#ddd;
}

And that was the style. Now, let’s take a look at the JavaScript magic.

The JavaScript

We will have several function taking care of the behavior of our navigation. Whenever we hover a menu item, we want the image to slide in from the top and the submenu to slide in from the bottom. And, of course, when we leave an item, we want the reverse to happen. The functions m_enter and m_leave take care of that behavior.
The function fold will make the menu collapse once a submenu item is clicked. The initial position is recovered by the function unfold.
The two functions showContent and hideContent take care of the respective content appearing and disappearing.

In our main jQuery function we will start by defining some variables:

//all the menu items
var $items 		= $('#cc_menu .cc_item');
//number of menu items
var cnt_items	= $items.length;
//if menu is expanded then folded is true
var folded		= false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;

Now we will bind the mouseenter and the mouseleave to each item. We will also bind the click event to list elements in the submenu:

$items.unbind('mouseenter')
	  .bind('mouseenter',m_enter)
	  .unbind('mouseleave')
	  .bind('mouseleave',m_leave)
	  .find('.cc_submenu > ul > li')
	  .bind('click',function(){
	var $li_e = $(this);
		  //if the menu is already folded,
		  //just replace the content
	if(folded){
		hideContent();
		showContent($li_e.attr('class'));
	}
		  else //fold and show the content
		fold($li_e);
});

In the following we will define the m_enter function:

function m_enter(){
	var $this 	= $(this);
	clearTimeout(menu_time);
	menu_time 	= setTimeout(function(){
	//img
	$this.find('img').stop().animate({'top':'0px'},400);
	//cc_submenu ul
	$this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
	},200);
}

The timeout is used to prevent this event to trigger if the user moves the mouse with a considerable speed through the menu items.

The m_leave function is defined as follows:

function m_leave(){
	var $this = $(this);
	clearTimeout(menu_time);
	//img
	$this.find('img').stop().animate({'top':'-600px'},400);
	//cc_submenu ul
	$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
}

When clicking on the back span, we want the unfold function to trigger:

$('#cc_back').bind('click',unfold);

The fold function will show only the menu column of the chosen submenu and make all the other items animate to the left by setting the margin to -140 pixels:

function fold($li_e){
	var $item		= $li_e.closest('.cc_item');

	var d = 100;
	var step = 0;
	$items.unbind('mouseenter mouseleave');
	$items.not($item).each(function(){
		var $item = $(this);
		$item.stop().animate({
			'marginLeft':'-140px'
		},d += 200,function(){
			++step;
			if(step == cnt_items-1){
				folded = true;
				showContent($li_e.attr('class'));
			}
		});
	});
}

The unfold function shows all the menu items and also hides any item’s image and submenu that might be displayed:

function unfold(){
	$('#cc_content').stop().animate({'left':'-700px'},600,function(){
		var d = 100;
		var step = 0;
	$items.each(function(){
			var $item = $(this);

			$item.find('img')
				 .stop()
				 .animate({'top':'-600px'},200)
				 .andSelf()
				 .find('.cc_submenu > ul')
				 .stop()
				 .animate({'height':'0px'},200);

			$item.stop().animate({
			'marginLeft':'0px'
			},d += 200,function(){
				++step;
				if(step == cnt_items-1){
					folded = false;
					$items.unbind('mouseenter')
						  .bind('mouseenter',m_enter)
						  .unbind('mouseleave')
						  .bind('mouseleave',m_leave);

					hideContent();
				}
			});
		});
	});
}

The function to show the content will animate our content container to the right by setting the left value to 140 pixels. It will also fade in the respective content:

function showContent(idx){
	$('#cc_content').stop().animate({'left':'140px'},200,function(){
		$(this).find('.'+idx).fadeIn();
	});
}

And finally, the function to hide the content:

function hideContent(){
	$('#cc_content').find('div').hide();
}

To cufonize the font in our menu, we will simply add these lines to the head of our HTML:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Liberation_Sans.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('span');
	Cufon.replace('li');
	Cufon.replace('h1');
	Cufon.replace('p');
</script>

We will be using the font Liberation Sans which you can also find here.

And that’s all! We hope you enjoyed this tutorial and find it useful!

View demoDownload source

I almost hear you asking – why another jQuery tooltip plugin? Well, I actually never planned creating this plugin until I reached the final stages of designing this website and decided to add some pretty tooltips. So I started looking for a tooltip plugin that allows easily creating stylish tooltips and also includes the most useful features for such a script. However, I wasn’t pleased with the results I found so I ended up writing a completely new plugin and am now making it available for all.

Source

http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/

Demo

http://vadikom.com/demos/poshytip/

A jQuery plugin to add notes below textareas and input fields based on regex patterns.
Type something. As soon as you type a number, a note will be added below the textarea. If you type “sex”, a warning will be shown.
You can use it for everything that has values, so for example a text inputfield will do it as well.
The patterns are normal JavaScript regex patterns and you are free to create and style any type of notes and note texts as you want. Note texts can contain HTML, no problem.

Source

http://fredibach.ch/jquery-plugins/inputnotes.php

Demo

http://fredibach.ch/jquery-plugins/inputnotes.php#demo

HTML5 video and audio with H.264, FLV, WMV, or MP3 on any browser.

Source

http://mediaelementjs.com/

Demo

http://mediaelementjs.com/

What is TopUp?
TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.

Source

http://gettopup.com/

Demo

http://gettopup.com/demo

A cool jquery/css thumbnail scroller inspired by the ones made in Flash. It works on mouse over and it’s simple to configure and easy to style through css.

Source

http://manos.malihu.gr/jquery-thumbnail-scroller

Demo

http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_horizontal_full.html

View demoDownload source

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

The beautiful photos are from Mark Sebastian’s photostream on Flickr. You can find all the images used in the demo in the set The “IT” Factor. Please review the Creative Commons license that is included in the demo.

So, let’s get started!

The Markup

Our HTML is mainly going to consist of a wrapper and the menu list. We will have some other elements, like the full image, the loading div and the halftone overlay. First, let’s create the wrapper:

<div id="st_main" class="st_main">

</div>

Inside of our wrapper we will add the following:

<img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/>

<div class="st_overlay"></div>

<h1>Mark Sebastian</h1>

<div id="st_loading" class="st_loading">
	<span>Loading...</span>
</div>

The first element is our full preview image. The overlay is going to be a fixed div which will stretch over the whole screen repeating a halftone pattern to create a fancy overlay effect on the image. We also add a title and a loading div.

We then add an unordered list where each li element is going to contain a span for its title and the thumbnails wrapper. The last li element is going to contain some wrapper for text, that’s why we will not give it the class “album”. Later, in the jQuery function we will need to distinguish that.

<ul id="st_nav" class="st_navigation">
	<li class="album">
		<span class="st_link">
			Newest Collection
			<span class="st_arrow_down"></span>
		</span>
		<div class="st_wrapper st_thumbs_wrapper">
			<div class="st_thumbs">
				<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
				<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
				...
			</div>
		</div>
	</li>
	...
	<li>
		<span class="st_link">
			About
			<span class="st_arrow_down"></span>
		</span>
		<div class="st_about st_thumbs_wrapper">
			<div class="st_subcontent">
				<p>
					Some description
				</p>
			</div>
		</div>
	</li>
</ul>

The thumbnail images get the alt value of the path to the full size image. That might not be the proper use of the alt attribute, but it’s just so convenient for our functionality that we will use it this way.

Let’s take a look at the style.

The CSS

First, let’s reset the paddings and margins for all elements and define the general styles:

*{
	margin:0;
	padding:0;
}
body{
	font-family:"Myriad Pro","Trebuchet MS", Helvetica, sans-serif;
	font-size:16px;
	color:#fff;
	background-color:#000;
	overflow:hidden;
}
h1{
	margin:20px;
	font-size:40px;
}

Making the body overflow hidden we avoid any scroll bar appearing, but you can adapt that to your needs. I.e. if it is important that the full sized image is completely viewable by the user, you might want to remove the overflow:hidden property.

Next, we will define the style for the full size image, the overlay and the loading div:

.st_main img.st_preview{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}
.st_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png) repeat-x bottom left;
	opacity:0.3;
}
.st_loading{
	position:fixed;
	top:10px;
	right:0px;
	background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
	padding:15px 40px 15px 60px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
	opacity:0.6;
}

By setting the image width to be always 100%, we make sure that it occupies all the horizontal space on the page. For very large screens the image might look pixelated which can, of course, be avoided by using gigantic images. In our demo we use a maximum width of 1600 pixel to make the loading time bearable. The halftone pattern on top of the image helps a little to disguise a pixelated effect.

Please note that whenever opacity is used, the IE filter property needs to be used if you want to achieve semi-transparent effects in IE. The overlay looks like crap if you use the filter property, though. Check out the ZIP file, I added the IE DXImageTransform filter to the respective styles.

The navigation will be positioned absolutely:

ul.st_navigation{
	position:absolute;
	width:100%;
	top:140px;
	left:-300px;
	list-style:none;
}

The initial left value is set to -300 pixel because we want to slide it in only after our full image is loaded. If you use longer titles in the list items, you might need to adapt this value.

Our list elements are going to have the following style:

ul.st_navigation li {
	float:left;
	clear:both;
	margin-bottom:8px;
	position:relative;
	width:100%;
}

The span for the title will be styled as follows:

ul.st_navigation li span.st_link{
	background-color:#000;
	float:left;
	position:relative;
	line-height:50px;
	padding:0px 20px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

Next, we define the style for the spans with the up/down arrow for opening and closing the thumbnail container:

ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
	position:absolute;
	margin-left:15px;
	width:40px;
	height:50px;
	cursor:pointer;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
	background:#000 url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
	background:#000 url(../images/icons/up.png) no-repeat center center;
}

The wrapper for the thumbnail container will be positioned absolutely and we want to hide any vertical overflow:

.st_wrapper{
	display:none;
	position: absolute;
    width:100%;
    height:126px;
    overflow-y:hidden;
	top:50px;
    left:0px;
}

Although the thumbs are only 120 pixels high, we want to leave some space so that the box shadow of the images inside will not be cut away.
The thumbnails container will simply be styled as follows:

.st_thumbs{
    height:126px;
    margin: 0;
}

The thumbnails will have a neat box shadow and some spacing:

.st_thumbs img{
    float:left;
    margin:3px 3px 0px 0px;
    cursor:pointer;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	opacity:0.7;
}

The st_about class is the wrapper class for the text container:

.st_about{
	display:none;
	position:absolute;
	top:50px;
    left:0px;
	opacity:0.6;
}

And, finally the text container itself:

.st_subcontent{
	background:#000;
	padding:30px;
	-moz-box-shadow:0px 0px 10px #000;
	-webkit-box-shadow:0px 0px 10px #000;
	box-shadow:0px 0px 10px #000;
}

And that’s all the style! Let’s make some magic!

The JavaScript

In our jQuery function we will first define some variables:

//the loading image
var $loader		= $('#st_loading');
//the ul element
var $list		= $('#st_nav');
//the current image being shown
var $currImage 	= $('#st_main').children('img:first');

The first thing that we want to do is to load the current full size image. After it’s loaded, we want the navigation to appear:

$('<img>').load(function(){
	$loader.hide();
	$currImage.fadeIn(3000);
	//slide out the menu
	setTimeout(function(){
		$list.animate({'left':'0px'},500);
	},
	1000);
}).attr('src',$currImage.attr('src'));

The buildThumbs() function calculates the widths of all the thumbnail containers. We need that value for the automatic scrolling function later on:

buildThumbs();

function buildThumbs(){
	$list.children('li.album').each(function(){
		var $elem 			= $(this);
		var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
		var $thumbs 		= $thumbs_wrapper.children(':first');
		//each thumb has 180px and we add 3 of margin
		var finalW 			= $thumbs.find('img').length * 183;
		$thumbs.css('width',finalW + 'px');
		//make this element scrollable
		makeScrollable($thumbs_wrapper,$thumbs);
	});
}

Next, we define the behavior of clicking on the arrows. If it’s down, we will expand the thumbnail container and hide any other. If it’s up, we will make the current container hide again.

$list.find('.st_arrow_down').live('click',function(){
	var $this = $(this);
	hideThumbs();
	$this.addClass('st_arrow_up').removeClass('st_arrow_down');
	var $elem = $this.closest('li');
	$elem.addClass('current').animate({'height':'170px'},200);
	var $thumbs_wrapper = $this.parent().next();
	$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
	var $this = $(this);
	$this.addClass('st_arrow_down').removeClass('st_arrow_up');
	hideThumbs();
});

Before we define the hideThumbs() function, we specify what happens when clicking on a thumb. The full size image will show and while it’s loading we will make the loading div appear. Then we animate the opacity and fade the image in:

$list.find('.st_thumbs img').bind('click',function(){
	var $this = $(this);
	$loader.show();
	$('<img class="st_preview"/>').load(function(){
		var $this = $(this);
		var $currImage = $('#st_main').children('img:first');
		$this.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){
			$(this).remove();
		});
	}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
	$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
	$(this).stop().animate({'opacity':'0.7'});
});

The function to hide the thumbnails looks as follows:

function hideThumbs(){
	$list.find('li.current')
		 .animate({'height':'50px'},400,function(){
			$(this).removeClass('current');
		 })
		 .find('.st_thumbs_wrapper')
		 .hide(200)
		 .andSelf()
		 .find('.st_link span')
		 .addClass('st_arrow_down')
		 .removeClass('st_arrow_up');
}

We animate the height of the li and make the thumbnails container disappear like that. We also need to set the class for the arrow span correctly.

And finally, we will define the makeScrollable() function that automatically scrolls the thumbnails div horizontally on mouse move:

function makeScrollable($outer, $inner){
	var extra 			= 800;
	//Get menu width
	var divWidth = $outer.width();
	//Remove scrollbars
	$outer.css({
		overflow: 'hidden'
	});
	//Find last image in container
	var lastElem = $inner.find('img:last');
	$outer.scrollLeft(0);
	//When user move mouse over menu
	$outer.unbind('mousemove').bind('mousemove',function(e){
		var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
		var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
		$outer.scrollLeft(left);
	});
}

For cufonizing the titles and adding some decent shadow, we will include the following into the head of our html document:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('span,p,h1',{
		textShadow: '0px 0px 1px #ffffff'
	});
</script>

And that’s it! We hope you enjoyed the tutorial and find it useful!

View demoDownload source

Today we want to share a music portfolio template with you. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The artist albums are shown using the jCarousel plugin and the user can add song samples to the play list and reorder the songs by dragging them.

The samples used are from the talented Ivan Chew at ccmixter.org. The original images come from Rick Harris at Flickr. All the albums are fictitious and are only shown for demonstration purposes. Any resemblance to existing bands or artists are unintended.

We hope you like this template and find it useful!

View demoDownload source