Codrops » draggable

Draggable Image Boxes Grid

Mary Lou — Fri, 07 Oct 2011 15:22:48 +0000

Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.

The main idea for this template and its effects comes from the beautiful Flash-based website of Stephen Hamilton.

To make the grid draggable, we used jQuery.kinetic by Dave Taylor. The jQuery plugin allows smooth drag scrolling and it’s just what we need in our grid.

The beautiful images in the demo are by Ibrahim Iujaz. Check out his Flickr photostream.

So, let’s begin!

The Markup

The main container will be a div with the class and ID ib-main-wrapper. We will add another div element inside since we will need this structure for applying the jQuery.kinetic plugin. Inside of that div which has the class ib-main, we will place two types of link elements: the thumbnail links and the content links. The content links are the menu like boxes that will expand to a fullscreen content area:


	
		
			
			Crabbed Age and Youth
		
		
			
			Cannot live together
		
		
			
				Welcome Howdy, Stranger
			
			
				
			
		
		...

The boxes for the content will have the class ib-content. The path to the large image for the thumbnails will be saved in the data attribute data-largesrc.

For the content and image preview we will use jQuery templates. The template for the large image preview is the following:


	
	${description}
	
		Previous
		Next
	
	Close Preview
	Loading...

We will have the large image, the navigation buttons, a closing cross and a loading element.

The template for the fullscreen content preview looks like this:


	{{html teaser}}
	{{html content}}
	Close Preview

Now, let’s style the grid.

The CSS

First, we will style the wrapping container. It will occupy all the page’s width and we will set the height dynamically to fit the visible area:

.ib-main-wrapper{
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
    outline: none;
    /*height dynamic*/
}

The main container will have a preset width. We chose this value because we want most visitors to be able to actually drag the grid. If you would set it to less and the user has a larger screen, then the container would be too small:

.ib-main{
    position: relative;
    width: 2546px;
}

Each box element will be floating and have a background image (for the thumbs) that we’ll stretch to be a bit larger than the box. We’ll add a nice transition which will make the background image contract on hover:

.ib-main a{
    float: left;
    width: 210px;
    height: 210px;
    position: relative;
    overflow: hidden;
    margin: 0px 0px 2px 2px;
    cursor: move;
    background: #fff url(../images/thumb_bg.jpg) no-repeat center center;
    background-size: 110% 110%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover{
    background-size: 100% 100%;
}

The thumbnail will be slightly transparent so that we can see the background image (which is a thick border). We’ll also add some CSS3 transition here to animate the opacity on hover:

.ib-main a img{
    opacity: 0.95;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover img{
    opacity: 0.8;
}

The description will be positioned absolutely and we’ll place it out of the box. Then, on hover, we will make it slide in:

.ib-main > a > span{
    display: block;
    position: absolute;
    width: 100%;
    height: 20px;
    line-height: 22px;
    text-align: center;
    font-size: 11px;
    bottom: -20px;
    left: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a:hover > span{
    bottom: 0px;
}

When we click on the thumbnail box, we’ll change the background image in order to show the loading image:

.ib-main a.ib-loading,
.ib-main a.ib-loading:hover{
    background: #fff url(../images/ajax-loader.gif) no-repeat center center;
    background-size: 31px 31px;
}
.ib-main a.ib-loading img,
.ib-main a.ib-loading:hover img{
    opacity: 0.5;
}

When the thumbnail is in the loading state, we don’t want to show the description:

.ib-main > a.ib-loading > span,
.ib-main a.ib-loading > span{
    display: none;
}

Now we’ll style the content boxes. The background is going to be dark:

.ib-content{
    background: #f9f9f9;
}

The teaser is the text we’ll be showing in each content box. On hover we want to animate the background color:

.ib-content .ib-teaser{
    text-align: center;
    background: #333;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-content .ib-teaser:hover{
    background: #000;
}

The headline and the subline will have the following style:

.ib-teaser h2{
    color: #fff;
    font-size: 26px;
    line-height: 26px;
    padding-top: 40%;
    text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.ib-teaser h2 span{
    text-transform: none;
    font-size: 16px;
    font-family: Georgia, serif;
    font-style: italic;
    display: block;
}

When the content area gets expanded, we will show the preview container and it will have an absolute position and a dynamic height:

.ib-content-preview{
    position: absolute;
    top: 44px;
    left: 0px;
    background: #000;
    width: 100%;
    /* height dynamic*/
    display: none;
}

The text elements will get some styling:

.ib-content-preview .ib-teaser h2{
    font-size: 50px;
    padding: 85px 40px 20px 40px;
}
.ib-content-preview .ib-teaser span{
    padding: 20px 0px 0px 5px;
    font-size: 22px;
}
.ib-content-full{
    font-family:'Oswald', serif;
    text-transform: none;
    line-height: 26px;
    margin: 0px 40px;
    border-top: 1px solid #333;
    padding: 20px 0px;
	font-size: 16px;
}
.ib-content-full p{
	padding: 5px 0px;
}

The large preview for the thumbnails will also be of absolute position

.ib-preview{
    overflow: hidden;
    position: absolute;
    top: 40px;
    display: none;
}

The description for the large image will be placed in the bottom left corner. We want big letters:

.ib-preview-descr{
    position: absolute;
    bottom: 30px;
    left: 10px;
    z-index: 999;
    font-size: 50px;
    text-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

The image itself will be absolute and the width and height will be set dynamically in the JavaScript:

.ib-preview img{
	position: absolute;
}

The navigation for the images will be placed on the left and the right side of the screen:

.ib-nav span{
	width: 53px;
	height: 87px;
	position: absolute;
	top: 50%;
	margin-top: -43px;
	cursor: pointer;
    text-indent: -9000px;
	opacity: 0.6;
	z-index: 999;
    background: transparent url(../images/nav.png) no-repeat top right;
	right: 10px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.ib-nav span.ib-nav-prev{
	background-position: top left;
	left: 10px;
    right: auto;
}

The closing element will be at the top right corner:

.ib-close{
	top: 7px;
	right: 7px;
	background: transparent url(../images/close.png) no-repeat center center;
	position: absolute;
	width: 24px;
	height: 24px;
	cursor: pointer;
	opacity: 0.2;
	z-index: 999;
    text-indent: -9000px;
}
.ib-nav span:hover, .ib-close:hover{
	opacity: 1;
}

Last, but not least, we’ll style the loading element for the large image. We’ll place it in the center of the screen with our 50% and negative margin trick and give it some rounded borders:

.ib-loading-large{
    text-indent: -9000px;
    width: 60px;
    height: 60px;
    background: #fff url(../images/ajax-loader.gif) no-repeat center center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    z-index: 999;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px 10px 10px 10px;
    opacity: 0.9;
}

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

The JavaScript

Let’s define our template function:

var $ibWrapper	= $('#ib-main-wrapper'),

	Template	= (function() {
		...
})();

Template.init();

First, we will set some variables and cache some elements:

var kinetic_moving				= false,
	// current index of the opened item
	current						= -1,
	// true if the item is being opened / closed
	isAnimating					= false,
	// items on the grid
	$ibItems					= $ibWrapper.find('div.ib-main > a'),
	// image items on the grid
	$ibImgItems					= $ibItems.not('.ib-content'),
	// total image items on the grid
	imgItemsCount				= $ibImgItems.length,

The init function will add a class to all the image items and call the jQuery.kinetic plugin and initialize our main events:

init						= function() {

		// add a class ib-image to the image items
		$ibImgItems.addClass('ib-image');
		// apply the kinetic plugin to the wrapper
		loadKinetic();
		// load some events
		initEvents();

	},

loadKinetic will set the size of the main wrapper and apply the jQuery.kinetic plugin:

loadKinetic					= function() {

	setWrapperSize();

	$ibWrapper.kinetic({
		moved	: function() {

			kinetic_moving = true;

		},
		stopped	: function() {

			kinetic_moving = false;

		}
	});

},

setWrapperSize will set the height of the main wrapper by taking the window height and removing the top bar and the bottom bar (which is our demo header actually):

setWrapperSize				= function() {

	var containerMargins	= $('#ib-top').outerHeight(true) + $('#header').outerHeight(true) + parseFloat( $ibItems.css('margin-top') );
	$ibWrapper.css( 'height', $(window).height() - containerMargins )

},

initEvents calls the openItem function when we click on a box (unless we are dragging) and takes care of the resizing when we change the window size:

initEvents					= function() {

	// open the item only if not dragging the container
	$ibItems.bind('click.ibTemplate', function( event ) {

		if( !kinetic_moving )
			openItem( $(this) );

		return false;	

	});

	// on window resize, set the wrapper and preview size accordingly
	$(window).bind('resize.ibTemplate', function( event ) {

		setWrapperSize();

		$('#ib-img-preview, #ib-content-preview').css({
			width	: $(window).width(),
			height	: $(window).height()
		})

	});

},

When we click on an item, depending on which item we clicked, we’ll load a full image or a content area:

openItem					= function( $item ) {

	if( isAnimating ) return false;

	// if content item
	if( $item.hasClass('ib-content') ) {

		isAnimating	= true;
		current	= $item.index('.ib-content');
		loadContentItem( $item, function() { isAnimating = false; } );

	}
	// if image item
	else {

		isAnimating	= true;
		current	= $item.index('.ib-image');
		loadImgPreview( $item, function() { isAnimating = false; } );

	}

},

If we click on a thumbnail, we’ll load and expand to the respective large image. We will use the jQuery template for the large image preview and set it to the same position like the currently clicked item. Initially having the same size, it will then expand first in width to fit the window and then in height:

loadImgPreview				= function( $item, callback ) {

	var largeSrc		= $item.children('img').data('largesrc'),
		description		= $item.children('span').text(),
		largeImageData	= {
			src			: largeSrc,
			description	: description
		};

	// preload large image
	$item.addClass('ib-loading');

	preloadImage( largeSrc, function() {

		$item.removeClass('ib-loading');

		var hasImgPreview	= ( $('#ib-img-preview').length > 0 );

		if( !hasImgPreview )
			$('#previewTmpl').tmpl( largeImageData ).insertAfter( $ibWrapper );
		else
			$('#ib-img-preview').children('img.ib-preview-img').attr( 'src', largeSrc );

		//get dimentions for the image, based on the windows size
		var	dim	= getImageDim( largeSrc );

		$item.removeClass('ib-img-loading');

		//set the returned values and show/animate preview
		$('#ib-img-preview').css({
			width	: $item.width(),
			height	: $item.height(),
			left	: $item.offset().left,
			top		: $item.offset().top
		}).children('img.ib-preview-img').hide().css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
		}).fadeIn( 400 ).end().show().animate({
			width	: $(window).width(),
			left	: 0
		}, 500, 'easeOutExpo', function() {

			$(this).animate({
				height	: $(window).height(),
				top		: 0
			}, 400, function() {

				var $this	= $(this);
				$this.find('span.ib-preview-descr, span.ib-close').show()
				if( imgItemsCount > 1 )
					$this.find('div.ib-nav').show();

				if( callback ) callback.call();

			});

		});

		if( !hasImgPreview )
			initImgPreviewEvents();

	} );

},

With the same effect of expanding, we’ll open a content area, too. Here we have to take care of the text elements:

loadContentItem				= function( $item, callback ) {

	var hasContentPreview	= ( $('#ib-content-preview').length > 0 ),
		teaser				= $item.children('div.ib-teaser').html(),
		content				= $item.children('div.ib-content-full').html(),
		contentData			= {
			teaser		: teaser,
			content		: content
		};

	if( !hasContentPreview )
		$('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );

	//set the returned values and show/animate preview
	$('#ib-content-preview').css({
		width	: $item.width(),
		height	: $item.height(),
		left	: $item.offset().left,
		top		: $item.offset().top
	}).show().animate({
		width	: $(window).width(),
		left	: 0
	}, 500, 'easeOutExpo', function() {

		$(this).animate({
			height	: $(window).height(),
			top		: 0
		}, 400, function() {

			var $this	= $(this),
				$teaser	= $this.find('div.ib-teaser'),
				$content= $this.find('div.ib-content-full'),
				$close	= $this.find('span.ib-close');

			if( hasContentPreview ) {
				$teaser.html( teaser )
				$content.html( content )
			}

			$teaser.show();
			$content.show();
			$close.show();

			if( callback ) callback.call();

		});

	});

	if( !hasContentPreview )
		initContentPreviewEvents();	

},

A little helper function for preloading images:

// preloads an image
preloadImage				= function( src, callback ) {

	$('').load(function(){

		if( callback ) callback.call();

	}).attr( 'src', src );

},

The next function takes care of loading the events for the large image preview : navigation, close button, and window resize:

initImgPreviewEvents		= function() {

	var $preview	= $('#ib-img-preview');

	$preview.find('span.ib-nav-prev').bind('click.ibTemplate', function( event ) {

		navigate( 'prev' );

	}).end().find('span.ib-nav-next').bind('click.ibTemplate', function( event ) {

		navigate( 'next' );

	}).end().find('span.ib-close').bind('click.ibTemplate', function( event ) {

		closeImgPreview();

	});

	//resizing the window resizes the preview image
	$(window).bind('resize.ibTemplate', function( event ) {

		var $largeImg	= $preview.children('img.ib-preview-img'),
			dim			= getImageDim( $largeImg.attr('src') );

		$largeImg.css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
		})

	});

},

For the content preview we’ll also have to load the event for the closing functionality:

initContentPreviewEvents	= function() {

	$('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function( event ) {

		closeContentPreview();

	});

},

Next, we’ll define the function that takes care of navigating through the large images in fullscreen:

// navigate the image items in fullscreen mode
navigate					= function( dir ) {

	if( isAnimating ) return false;

	isAnimating		= true;

	var $preview	= $('#ib-img-preview'),
		$loading	= $preview.find('div.ib-loading-large');

	$loading.show();

	if( dir === 'next' ) {

		( current === imgItemsCount - 1 ) ? current	= 0 : ++current;

	}
	else if( dir === 'prev' ) {

		( current === 0 ) ? current	= imgItemsCount - 1 : --current;

	}

	var $item		= $ibImgItems.eq( current ),
		largeSrc	= $item.children('img').data('largesrc'),
		description	= $item.children('span').text();

	preloadImage( largeSrc, function() {

		$loading.hide();

		//get dimentions for the image, based on the windows size
		var	dim	= getImageDim( largeSrc );

		$preview.children('img.ib-preview-img')
						.attr( 'src', largeSrc )
						.css({
			width	: dim.width,
			height	: dim.height,
			left	: dim.left,
			top		: dim.top
						})
						.end()
						.find('span.ib-preview-descr')
						.text( description );

		$ibWrapper.scrollTop( $item.offset().top )
				  .scrollLeft( $item.offset().left );

		isAnimating	= false;

	});

},

The following function is for closing the fullscreen image preview:


closeImgPreview				= function() {

	if( isAnimating ) return false;

	isAnimating	= true;

	var $item	= $ibImgItems.eq( current );

	$('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
					.hide()
					.end()
					.animate({
						height	: $item.height(),
						top		: $item.offset().top
						}, 500, 'easeOutExpo', function() {

						$(this).animate({
							width	: $item.width(),
							left	: $item.offset().left
							}, 400, function() {

								$(this).fadeOut(function() {isAnimating	= false;});

						} );

					});

},

For the content preview we will also need such a function:

// closes the fullscreen content item
closeContentPreview			= function() {

	if( isAnimating ) return false;

	isAnimating	= true;

	var $item	= $ibItems.not('.ib-image').eq( current );

	$('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
							.hide()
							.end()
							.animate({
								height	: $item.height(),
								top		: $item.offset().top
							}, 500, 'easeOutExpo', function() {

								$(this).animate({
									width	: $item.width(),
									left	: $item.offset().left
								}, 400, function() {

									$(this).fadeOut(function() {isAnimating	= false;});

								} );

							});

},

getImageDim will get the size of an image and make it centered in fullscreen:

getImageDim					= function( src ) {

	var img     	= new Image();
	img.src     	= src;

	var w_w	= $(window).width(),
		w_h	= $(window).height(),
		r_w	= w_h / w_w,
		i_w	= img.width,
		i_h	= img.height,
		r_i	= i_h / i_w,
		new_w, new_h,
		new_left, new_top;

	if( r_w > r_i ) {

		new_h	= w_h;
		new_w	= w_h / r_i;

	}
	else {

		new_h	= w_w * r_i;
		new_w	= w_w;

	}

	return {
		width	: new_w,
		height	: new_h,
		left	: (w_w - new_w) / 2,
		top		: (w_h - new_h) / 2
	};

};

And that’s it! I hope you enjoyed making this template with me and find it useful!

View demo Download source

Collective: FullCalendar jQuery plugin

Community — Wed, 05 Jan 2011 11:53:18 +0000

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source and dual licensed under the MIT or GPL Version 2 licenses.

Source

http://arshaw.com/fullcalendar/

Demo

http://arshaw.com/js/fullcalendar/demos/agenda-views.html

Music Portfolio Template with HTML5 and jQuery

Mary Lou — Mon, 26 Jul 2010 13:30:41 +0000

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 demo Download source

Latest Tweets Tooltip with jQuery

cody — Tue, 20 Jul 2010 16:48:47 +0000

If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for showing the latest tweets about a certain word or phrase.

For this plugin we are using the jQuery Twitter Search Plugin.

Words or phrases that you want to be searched for in Twitter, are wrapped with the following span:

Some search term

The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.

If you want to configure and restyle the tooltip, you will need to have a look at the configurations of the Twitter Search Plugin. Many parameters can be set here, from style to timings.

You can call the plugin like this:

$(function() {
	$('#article').find('.twitter_search').twitterpopup();
});

where #article should be replaced by the ID of your container.

View demo Download source

Sliding Checkbox Actions Menu with jQuery

Mary Lou — Mon, 31 May 2010 17:39:35 +0000

View demo Download source

In this tutorial we will create an actions menu with jQuery that appears when checkboxes are selected. This can be a very helpful UI property since we don’t force the user to scroll to the place where the actions are – they just appear whenever the user needs them.

Additionally, the user can drag the actions box to the place that is more practical for him, and the box will always follow when the user scrolls the page. It will also show a count of how many checkboxes were selected.

We will use a table as an example. Usually, actions are placed at the top and the bottom of a table, and that’s OK if the table is not too big. But since we cannot control the size of the user’s viewport, it is not guaranteed that the actions are close to the users focus. With this solution we make it very easy for the user to perform certain actions on selected items.

This tutorial got inspired by a similar feature in the mobile version of Gmail. If you open your Gmail account in the Safari browser on the iPhone or iPod Touch, you will notice this little helpful menu.

Let’s get started.

The Markup

For the markup we will simply create a table with an ID and some checkboxes in the cells:


	
		
			
		
		Some Content
	
	
		
			
		
		Some Content

For the actions menu we will have the following markup:


	
		
		Archive
		Delete
		
		X
	
	
		Move...
		Mark as read
		Mark as unread
		Spam

The div with the class submenu will appear when we click on the a with the ID toggleBoxMenu.

The CSS

In the following we will take a look at the style for the actions box. We will be using a lot of CSS 3 properties, so if you want this to work in ancient browsers, you will have to adapt this tiny menu by using images.

We will want to hide the whole menu initially. So, the actionsBox div will have the following style:

.actionsBox{
    font-size:13px;
    font-family:Helvetica,Arial,Verdana;
    font-style:normal;
    left:50%;
    position:absolute;
    top:-50px;
    opacity:0;
    cursor:move;
}

The main menu with the buttons will be styled as follows:

.actionsBox .menu{
    color:#47708F;
    width:240px;
    line-height:30px;
    text-shadow:1px 1px 0px #fff;
    padding:7px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    font-weight:bold;
    border:1px solid #D9EAF2;
    background:#e8f4fa;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.58, rgb(217,234,242)),
        color-stop(0.93, rgb(232,244,250))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(217,234,242) 58%,
        rgb(232,244,250) 93%
        );
    -moz-box-shadow:1px 1px 3px #999;
    -webkit-box-shadow:1px 1px 3px #999;
    box-shadow:1px 1px 3px #999;
}

We are making heavily use of CSS3 here: the gradient, the rounded border, the box and text shadow will all create a beautiful effect that will make the use of images needless.
The buttons, which will be link elements, will have the following style:

.actionsBox .menu .button{
    padding:4px 7px;
    border:1px solid #D9EAF2;
    cursor:pointer;
    background:#e8f4fa;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.38, rgb(230,243,249)),
        color-stop(0.88, rgb(245,249,250))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(230,243,249) 38%,
        rgb(245,249,250) 88%
        );
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 1px 0px #f9f9f9;
    -webkit-box-shadow:0px 1px 0px #f9f9f9;
    box-shadow:0px 1px 0px #f9f9f9;
}

With the very light box shadow, we are creating a slightly engraved effect. When we hover, we want the element to get a white background:

.actionsBox .menu .button:hover{
    background:#fff;
}

The span in the menu is for displaying the number of selected checkboxes:

.actionsBox .menu span{
    padding:0px 10px;
}

The sub menu will not be displayed initially. We will give it a rounded border at its bottom:

.actionsBox .submenu{
    display:none;
    width:120px;
    margin-left:100px;
    top:46px;
    right:10px;
    background:#fff;
    border:1px solid #D9EAF2;
    border-top:none;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    -moz-box-shadow:0px 1px 4px #ddd;
    -webkit-box-shadow:0px 1px 4px #ddd;
    box-shadow:0px 1px 4px #ddd;
}
.actionsBox .submenu a{
    display:block;
    cursor:pointer;
    padding:10px 15px;
    border-top:1px solid #D9EAF2;
}

The last item will also have a rounded border at the bottom:

.actionsBox .submenu a.last{
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

And the first item will not have a border at the top:

.actionsBox .submenu a.first{
    border-top:none;
}
.actionsBox .submenu a:hover{
    background-color:#f9f9f9;
}

The open/close item will have the following style:

.actionsBox .menu a.open,
.actionsBox .menu a.closed{
    border:1px solid #D9EAF2;
    padding:4px 17px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 1px 0px #f9f9f9;
    -webkit-box-shadow:0px 1px 0px #f9f9f9;
    box-shadow:0px 1px 0px #f9f9f9;
    cursor:pointer;
    opacity:0.6;
    margin-right:5px;
}
.actionsBox .menu a.open{
    background:#fff url(../open.png) no-repeat center center;
}
.actionsBox .menu a.closed{
    background:#fff url(../closed.png) no-repeat center center;
}
.actionsBox .menu a.open:hover,
.actionsBox .menu a.closed:hover{
    opacity:1.0;
}

And that’s the style. Of course, you will have to adapt this if you are going to use this in your web application. In IE you can see that the style stays very simple.

Now, let’s add the jQuery magic!

The JavaScript

First, let’s include the jQuery script and also the jQuery UI script because we are going to make our little menu draggable.

So, the main idea is to have our menu appear whenever the user checks a checkbox. We also want it to disappear when there are no checkboxes selected and we want to make the menu draggable. Additionally, the menu should follow the user when he scrolls the page.

We will also change the class of the table row to “selected” whenever we select a checkbox. (You can check out the style for the table and that class in the ZIP file.)

We add the following function:

$(function() {
	/* tells us if we dragged the box */
	var dragged = false;

	/* timeout for moving the box when scrolling the window */
	var moveBoxTimeout;

	/* make the actionsBox draggable */
	$('#actionsBox').draggable({
		start: function(event, ui) {
			dragged = true;
		},
		stop: function(event, ui) {
			var $actionsBox = $('#actionsBox');
			/*
			calculate the current distance from the
			window's top until the element;
			this value is going to be used later on,
			to move the box after we scroll
			 */
			$actionsBox.data('distanceTop',parseFloat($actionsBox.css('top'),10) - $(document).scrollTop());
		}
	});

	/*
	when clicking on an input (checkbox),
	change the class of the table row,
	and show the actions box
	 */
	$('#mytable input[type="checkbox"]').bind('click',function(e) {
		var $this = $(this);
		if($this.is(':checked'))
			$this.parents('tr:first').addClass('selected');
		else
			$this.parents('tr:first').removeClass('selected');
		showActionsBox();
	});

	function showActionsBox(){
		/* number of checked inputs */
		var BoxesChecked = $('#mytable input:checked').length;
		/* update the number of checked inputs */
		$('#cntBoxMenu').html(BoxesChecked);
		/*
		if there is at least one selected, show the BoxActions Menu
		otherwise hide it
		 */
		var $actionsBox = $('#actionsBox');
		if(BoxesChecked > 0){
			/*
			if we didn't drag, then the box stays where it is;
			we know that the position is the document's current top
			plus the previous distance that the box had relative
			to the window's top (distanceTop)
			 */
			if(!dragged)
				$actionsBox.stop(true).animate({
					'top': parseInt(15 + $(document).scrollTop()) + 'px',
					'opacity':'1'
				},500);
			else
				$actionsBox.stop(true).animate({
					'top': parseInt($(document).scrollTop() + $actionsBox.data('distanceTop')) + 'px',
					'opacity':'1'
				},500);
		}
		else{
			$actionsBox.stop(true).animate({
				'top': parseInt($(document).scrollTop() - 50) + 'px',
				'opacity':'0'
			},500,function(){
				$(this).css('left','50%');
				dragged = false;
				/* if the submenu was open we hide it again */
				var $toggleBoxMenu = $('#toggleBoxMenu');
				if($toggleBoxMenu.hasClass('closed')){
					$toggleBoxMenu.click();
				}
			});
		}
	}

	/*
	when scrolling, move the box to the right place
	 */
	$(window).scroll(function(){
		clearTimeout(moveBoxTimeout);
		moveBoxTimeout = setTimeout(showActionsBox,500);
	});

	/* open sub box menu for other actions */
	$('#toggleBoxMenu').toggle(
	function(e){
		$(this).addClass('closed').removeClass('open');
		$('#actionsBox .submenu').stop(true,true).slideDown();
	},
	function(e){
		$(this).addClass('open').removeClass('closed');
		$('#actionsBox .submenu').stop(true,true).slideUp();
	}
);

	/*
	close the actions box menu:
	hides it, and then removes the element from the DOM,
	meaning that it will no longer appear
	 */
	$('#closeBoxMenu').bind('click',function(e){
		$('#actionsBox').animate({
			'top':'-50px',
			'opacity':'0'
		},1000,function(){
			$(this).remove();
		});
	});

	/*
	as an example, for all the actions (className:box_action)
	alert the values of the checked inputs
	 */
	$('#actionsBox .box_action').bind('click',function(e){
		var ids = '';
		$('#mytable input:checked').each(function(e,i){
			var $this = $(this);
			ids += 'id : ' + $this.attr('id') + ' , value : ' + $this.val() + '\n';
		});
		alert('checked inputs:\n'+ids);
	});
});

The close button will make the actions box disappear completely. You can change that behavior by adapting the function. You might want that the user gets his menu back after he clicks on more checkboxes.

The last function is an example of how to get the values of the checked items. You can adapt this to suit your needs and to process the checked values further.

And that’s it! I hope you liked it and find it useful!

P.S.: To fully experience what you can do with this, scroll the page, select some checkboxes and drag the menu. You will see how the menu follows you when you scroll the page again.

View demo Download source

Message from TestkingJoin testking 642-902 online web design classes to learn web designing . Download the testking 642-813 tutorial and expert testking 70-680 guides to learn about jquery plugins in detail.

Interactive Image Vamp up with jQuery, CSS3 and PHP

Mary Lou — Sun, 21 Mar 2010 23:51:22 +0000

View demo Download source

Today we will show you how to create an online application for giving some funny touches to an image. We will be using jQuery and jQuery UI for dragging and resizing little bling elements like mustaches and glasses. With PHP the image and the bling elements will get merged and the end result can be viewed.

Ok, let’s get started!

The Markup

The markup is pretty simple: we have a main container with the objects sidebar, the main image and the tools area:

The objects sidebar contains all the draggable elements and the tools area will show a list of all the used elements. In each item we will use a slider to allow the rotation of the respective element. We will also provide a delete icon to remove the element.

The CSS

Let’s start with the styling of the content and the image container:

#content{
    position:relative;
    width:1105px;
    height:500px;
    margin:40px auto 0px auto;
    background-color:#F9F9F9;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    -moz-box-shadow:0px 0px 8px #ccc;
    -webkit-box-shadow:0px 0px 8px #ccc;
    box-shadow:0px 0px 8px #ccc;
}
.background{
    position:absolute;
    width:640px;
    height:480px;
    top:10px;
    left:215px;
    -moz-box-shadow:0px 0px 3px #bbb;
    -webkit-box-shadow:0px 0px 3px #bbb;
    box-shadow:0px 0px 3px #bbb;
}

When using CSS3 properties, make sure that you address them in the browser specific way, since not all browsers implement fully CSS3. Once CSS3 becomes a standard, you will also want to make sure to add the “real” CSS3 term.

Let’s take a look at the style for the left sidebar with the draggable bling images:

#objects{
    width:210px;
    height:486px;
    top:10px;
    left:10px;
    position:absolute;
}
.obj_item{
    width:70px;
    height:70px;
    float:left;
}

The obj_item class will wrap around the draggable and resizable image. The next styles are for the right sidebar where we will have all the used bling images listed:

#tools{
    width:230px;
    top:8px;
    right:10px;
    position:absolute;
    height:420px;
    overflow-y:scroll;
    overflow-x:hidden;
}
.item{
    border:3px solid #fff;
    background-color:#ddd;
    height:60px;
    position:relative;
    margin:2px 5px 2px 2px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0px 0px 2px #999;
    -webkit-box-shadow:0px 0px 2px #999;
    box-shadow:0px 0px 2px #999;
}

The item class defines the style for each element that is currently being used in the main image. Inside of that item there will be a thumbnail, a slider for the rotation, and a little button to remove the element:

.thumb{
    width:50px;
    height:50px;
    margin:5px;
    float:left;
}
.slider{
    float: left;
    width: 115px;
    margin: 30px 0px 0px 5px;
    background-color:#fff;
    height:10px;
    position:relative;
}
.slider span{
    font-size:10px;
    font-weight:normal;
    margin-top:-25px;
    float:left;
}
.slider span.degrees{
    position:absolute;
    right:-22px;
    top:20px;
    width:20px;
    height:20px;
}
.slider .ui-slider-handle {
    width:10px;
    height:20px;
    outline:none;
}
a.remove{
    width:16px;
    height:16px;
    position:absolute;
    top:0px;
    right:0px;
    background:transparent url(../images/cancel.png) no-repeat top left;
    opacity:0.5;
    cursor:pointer;
}
a.remove:hover{
    opacity:1.0;
}

The class .ui-slider-handle comes from the jQuery slider and we can adapt it by defining a style in our stylesheet.

Ok, let’s get to the serious part: the JavaScript!

The JavaScript

The functionality of this app is made up of many elements, so will go step by step through the most important parts. The JavaScript code in the index is commented, so that you can as well understand the steps that are not mentioned here.

The element images that are dropped onto the main image will be stored in the following JSON object:

var data = {
	"images": [
		{"id" : "obj_0" ,"src" : "background.jpg", "width" : "640", "height" : "480"}
	]
};

Every time we drop a new image we insert it into the “images” array.

The images are resizable and draggable:

$('#objects img').resizable({
	handles	: 'se',
	stop	: resizestop
}).parent('.ui-wrapper').draggable({
    revert	: 'invalid'
});

The background div, where the main image is inserted is droppable. Each time we drop an element into this container we add it to the JSON data object if it is not there already. The most important parameters added are the width, height, top and left. The last two are calculated based on the difference between the absolute top or left of the container and the draggable object.
If the element was already in the JSON data object, meaning that the user keeps dragging it around, we just update the new top and left in the JSON data object. We also set a new z-index to the dropped element, so that the last one dropped always stays on top. Besides adding to the JSON object we also add a new element to the tools sidebar, where we will be able to rotate the corresponding image and also delete it from the container:

$('#background').droppable({
	accept	: '#objects div', /* accept only draggables from #objects */
	drop	: function(event, ui) {
		var $this 		= $(this);
		++count_dropped_hits;
		var draggable_elem = ui.draggable;
		draggable_elem.css('z-index',count_dropped_hits);
		/* object was dropped : register it */
		var objsrc 		= draggable_elem.find('.ui-widget-content').attr('src');
		var objwidth 	= parseFloat(draggable_elem.css('width'),10);
		var objheight 	= parseFloat(draggable_elem.css('height'),10);

		/* for top and left we decrease the top and left of the droppable element */
		var objtop		= ui.offset.top - $this.offset().top;
		var objleft		= ui.offset.left - $this.offset().left;

		var objid		= draggable_elem.find('.ui-widget-content').attr('id');
		var index 		= exist_object(objid);
		if(index!=-1) { //if exists update top and left
			data.images[index].top 	= objtop;
			data.images[index].left = objleft;
		}
		else{
			/* register new one */
			var newObject = {
				'id' 		: objid,
				'src' 		: objsrc,
				'width' 	: objwidth,
				'height' 	: objheight,
				'top' 		: objtop,
				'left' 		: objleft,
				'rotation'  : '0'
			};
			data.images.push(newObject);
			/* add object to sidebar*/

			$('',{
				className	:	'item'
			}).append(
				$('',{
					className	:	'thumb',
					html		:	''
				})
			).append(
				$('',{
					className	:	'slider',
					html		:	'Rotate0'
				})
			).append(
				$('',{
					className	:	'remove'
				})
			).append(
				$('',{
					type		:	'hidden',
					value		:	objid		// keeps track of which object is associated
				})
			).appendTo($('#tools'));
			$('.slider').slider({
				orientation	: 'horizontal',
				max			: 180,
				min			: -180,
				value		: 0,
				slide		: function(event, ui) {
					var $this = $(this);
					/* Change the rotation and register that value in data object when it stops */
					draggable_elem.css({
						'-moz-transform':'rotate('+ui.value+'deg)',
						'-webkit-transform':'rotate('+ui.value+'deg)'
					});
					$('.degrees',$this).html(ui.value);
				},
				stop		: function(event, ui) {
					newObject.rotation = ui.value;
				}
			});
		}
	}
});

When removing an element from the container, we want to remove it from the sidebar, from the JSON data object and also add it again to the elements list:

$('.remove',$('#tools')).live('click',function(){
	var $this = $(this);

	/* the element next to this is the input that stores the obj id */
	var objid = $this.next().val();
	/* remove the object from the sidebar */
	$this.parent().remove();
	/* ,from the picture */
	var divwrapper = $('#'+objid).parent().parent();
	$('#'+objid).remove();
	/* add again to the objects list */
	var image_elem 		= $this.parent().find('img');
	var thumb_width 	= image_elem.attr('width');
	var thumb_height 	= image_elem.attr('height');
	var thumb_src 		= image_elem.attr('src');
	$('',{
		id 			: 	objid,
		src			: 	thumb_src,
		width		:	thumb_width,
		//height		:	thumb_height,
		className	:	'ui-widget-content'
	}).appendTo(divwrapper).resizable({
		handles	: 'se',
		stop	: resizestop
	}).parent('.ui-wrapper').draggable({
		revert: 'invalid'
	});
	/* and unregister it - delete from object data */
	var index = exist_object(objid);
	data.images.remove(index);
});

The PHP

What we are doing here is getting all the info for each image dropped into the main container, and merging it with the background image. If there was a rotation then we need to make sure we recalculate the top and left, since the PHP imagerotate function is not that friendly and it scales down the image after rotation:

$res = JSON_decode(stripslashes($_POST['JSONdata']), true);
/* get data */
$count_images 	= count($res['images']);
/* the background image is the first one */
$background 	= $res['images'][0]['src'];
$photo1 		= imagecreatefromjpeg($background);
$foto1W 		= imagesx($photo1);
$foto1H 		= imagesy($photo1);
$photoFrameW 	= $res['images'][0]['width'];
$photoFrameH 	= $res['images'][0]['height'];
$photoFrame 	= imagecreatetruecolor($photoFrameW,$photoFrameH);
imagecopyresampled($photoFrame, $photo1, 0, 0, 0, 0, $photoFrameW, $photoFrameH, $foto1W, $foto1H);

/* the other images */
for($i = 1; $i < $count_images; ++$i){
	$insert 		= $res['images'][$i]['src'];
	$photoFrame2Rotation = (180-$res['images'][$i]['rotation']) + 180;

	$photo2 		= imagecreatefrompng($insert);

	$foto2W 		= imagesx($photo2);
	$foto2H 		= imagesy($photo2);
	$photoFrame2W	= $res['images'][$i]['width'];
	$photoFrame2H 	= $res['images'][$i]['height'];

	$photoFrame2TOP = $res['images'][$i]['top'];
	$photoFrame2LEFT= $res['images'][$i]['left'];

	$photoFrame2 	= imagecreatetruecolor($photoFrame2W,$photoFrame2H);
	$trans_colour 	= imagecolorallocatealpha($photoFrame2, 0, 0, 0, 127);
	imagefill($photoFrame2, 0, 0, $trans_colour);

	imagecopyresampled($photoFrame2, $photo2, 0, 0, 0, 0, $photoFrame2W, $photoFrame2H, $foto2W, $foto2H);

	$photoFrame2 	= imagerotate($photoFrame2,$photoFrame2Rotation, -1,0);
	/*after rotating calculate the difference of new height/width with the one before*/
	$extraTop		=(imagesy($photoFrame2)-$photoFrame2H)/2;
	$extraLeft		=(imagesx($photoFrame2)-$photoFrame2W)/2;

	imagecopy($photoFrame, $photoFrame2,$photoFrame2LEFT-$extraLeft, $photoFrame2TOP-$extraTop, 0, 0, imagesx($photoFrame2), imagesy($photoFrame2));
}
// Set the content type header - in this case image/jpeg
header('Content-type: image/jpeg');
imagejpeg($photoFrame, $targetfile);
imagedestroy($photoFrame);

And that’s it!
Enjoy!

View demo Download source

Message from TestkingBecome expert designer/developer with our testking 312-50 course. Download the testking 1Y0-A08 tutorials and testking 642-415 video to learn about jquery css3 and php.

jQuery Fancy Draggable Captcha

cody — Tue, 08 Sep 2009 21:17:31 +0000

Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.

Click to see a demo

Here you can download the source as a ZIP file: Captcha ZIP

DEMO