Cagintranet Web Design » jQuery

Create an iPad-Like Dropdown (PopOver)

Chris Cagle — Wed, 02 Feb 2011 02:44:42 +0000

I came up with this little bit of CSS and jQuery magic when working on the “Google Maps” version of BuyDeals.in.

The HTML


	
  
    Choose Your City
  
  
    
		Alabama
		Birmingham
		Huntsville
		Mobile
		Alaska
		Anchorage
		Arizona
		Mesa
		Phoenix
		Scottsdale
		Tucson
		Arkansas
		Little Rock
		California
		Anaheim 

		...

The jQuery

This is the javascript that opens (fades in) the popover and sets the button’s class to active.

$('#popover_button').live('click', function($e){
	$e.preventDefault();
	$('#popover').fadeToggle('fast');
	if ($('#popover_button').hasClass('active')) {
		$('#popover_button').removeClass('active');
	} else {
		$('#popover_button').addClass('active');
	}
});

This is the javascript that closes the popover if anything else is clicked other than the button and/or the popover.

$('body').click(function(event) {
	if (!$(event.target).closest('#popover').length && !$(event.target).closest('#popover_button').length) {
		$("#popover").stop(true, true).hide();
		$('#popover_button').removeClass('active');
	};
});

The CSS

The CSS file for this demo is pretty straightforward. The one thing that might trip some people up is the fact that since the popover is absolutely positioned, it is given a top position. So to get it working in your particular instance, you will probably have to mess with the position properties to match where your button is.

jQuery Cycle Demo: HTML5, Dual Sliders and a Custom Pager

Chris Cagle — Sun, 16 Jan 2011 20:53:34 +0000

Here we customize the use of the popular jQuery plugin, Cycle. We use HTML5, a customized paging feature and pseudo dual sliders (one is a fade, but still looks cool).

Download Files or View Demo

The HTML5

Nothing really special here other than the fact that we use the new HTML5 Data- attributes to link the slides to their respective logos.




	
	Pittsburgh Sports : Teams & Stadiums
	
	
	
	

	
	

	



	
		
			Pittsburgh Sports

The jQuery

The Malsup Cycle options can be viewed here

pager – This is the #id of the empty ul element that gets populated with the new li‘s that are generated by our pageAnchorBuilder function.
pageAnchorBuilder – This is the function that custom builds own new menu. It pulls the title attribute of the section and uses it as the menu’s anchor text.
before – This is the function that runs before the slide changes. We use it to hide “all” images within the figure element.
after – This is the function that runs after the slide changes. We use it to fadeIn the new slide’s corresponding logo.

$('#slides').cycle({
	fx:     'scrollLeft',
	timeout: 0,
	speed:  1000,
	pager:  '#nav',
	pagerAnchorBuilder: function(idx, slide) {
	  var stadium = jQuery(slide).attr('data-team');
	  var title = jQuery(slide).attr('title');
	  return '' + title + '';
	},
	before:  onBefore,
	after:   onAfter
});
function onBefore() {
	$('figure img').fadeOut('fast');
}
function onAfter() {
	var logo = $(this).attr('data-team');
	$('figure img[data-team='+ logo+']').fadeIn('slow');
}

Tutorial: How to Implement Uploadify into an Application

Chris Cagle — Thu, 15 Oct 2009 10:00:32 +0000

Last week I showed how to implement Jcrop into an application. In this tutorial – which also pulls from my experiences developing GetSimple – I implement the jQuery plugin Uploadify.

In this tutorial, we create a simple file upload script that also displays an unordered list of the files in the upload directory. The list of files refreshes via an ajax call every time Uploadify processes a queue.

Demo

View the demo or download the files

The Basic HTML

Uploadify Application Demo

The PHP

//folder where the files are stored at
//you may need to chmod this folder to 775 or 777 for it to work
$src_folder = 'files/';

//file that includes the function to list all files in ul
include("inc/file_list.php");

//if javascript is disabled, the ftp will still work
if (isset($_FILES["file"])) {
	if ($_FILES["file"]["error"] > 0) {
	  $error = 'Error Uploading!';
	} else {
    $count = '1';
    $file_loc = $path . $_FILES["file"]["name"];
    $base = $_FILES["file"]["name"];
    while ( file_exists($file_loc) ) {
		$file_loc = $path . $count.'-'. $_FILES["file"]["name"];
		$base = $count.'-'. $_FILES["file"]["name"];
		$count++;
	}
    move_uploaded_file($_FILES["file"]["tmp_name"], $file_loc);
	}
}

The jQuery

$('#mainftp').uploadify({
	'uploader' : 'js/uploadify/uploadify.swf',
	'script' : 'js/uploadify/uploadify.php',
	'multi' : true,
	'auto' : true,
	'height' : '32',
	'width' : '250',
	'buttonImg' : 'img/browse.png',
	'cancelImg' : 'img/cancel.png',
	'folder' : 'files/',
	onProgress: function() {
		$('#loader').show();
	},
	onAllComplete: function() {
		$('#loader').hide();
		$('#allfiles').load(location.href+" #allfiles>*","");
	}
});

Notes about this javascript:

Uploadify was unzipped directly from the download on their site. To upgrade, simply replace the js/uploadify/ folder with the newer version.
height and width are for the respective dimentions of your custom button image – the demo’s being in img/browse.png
folder is the location where the files will be uploaded to. This is also the folder that should be listed on line #3 of the PHP code above in the $src_folder variable.
$(‘#loader’).show(); and $(‘#loader’).hide(); start and stop the loading gif that many applications use now to show that something is being uploaded/processed.
$(‘#allfiles’).load(location.href+” #allfiles>*”,”"); – replaces the whole div with the id of allfiles with and updated listing with the newly uploaded files in it

Tutorial: How to Implement Jcrop into an Application

Chris Cagle — Sat, 10 Oct 2009 20:17:19 +0000

When creating the ‘image control panel’ for the latest version of GetSimple, I decided to integrate the wonderful Jcrop jQuery plugin into it. Amazingly, there are very few tutorials online that show the full extent of how to use Jcrop in real world situations. The only one I found that was of use was TalkInCode’s tutorial. I did start out using that example’s ImageManipulation class, but changed it slightly so that after submission, you are brought back to the original page instead of being shown the thumbnail.

Demo & Features

View the Demo or download the files.

Some of the more unique features of this demo are:

The aspectRatio changes to 1:1 when ctrl-Q or command-Q is pressed
The dimensions of the selected area are shown in an interesting way
Stats on the thumbnail and the current image are displayed

The Basic HTML

The demo/download has some extra code for displaying the image stats & linking of the css, js and class files.


" id="cropbox" />


Selection Dimentions
 x 



  
  
  
  
  
    ctrl-Q or command-Q for square

The PHP

//the name of the passed image
//example would be:   http://myapplication.com/image.php?i=photo.jpg
$src = $_GET['i'];

//folder where the images are
$src_folder = 'images/';

//folder where the thumbnails will be saved to
//you may need to chmod 775 or 777 this folder
$thumb_folder = 'images/thumbnails/'; 

if ($_SERVER['REQUEST_METHOD'] == 'POST'){

	require('inc/imagemanipulation.php');

	$objImage = new ImageManipulation($src_folder . $src);
	if ( $objImage->imageok ) {
		$objImage->setCrop($_POST['x'], $_POST['y'], $_POST['w'], $_POST['h']);
		$objImage->save($thumb_folder . 'thumbnail.' .$src);
	} else {
		echo 'Error!';
	}
}

The jQuery

function updateCoords(c) {
	$('#handw').show();
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  $('#pich').html(c.h);
  $('#picw').html(c.w);
};

function checkCoords()
{
  if (parseInt($('#x').val())) return true;
  alert('Please select a crop region then press submit.');
  return false;
};

jQuery(document).ready(function() { 

	$(window).load(function(){
	var api = $.Jcrop('#cropbox',{
    onChange: updateCoords,
    onSelect: updateCoords,
    boxWidth: 500,
    boxHeight: 500
  });
  var isCtrl = false;
	$(document).keyup(function (e) {
		api.setOptions({ aspectRatio: 0 });
		api.focus();
		if(e.which == 17) isCtrl=false;
	}).keydown(function (e) {
		if(e.which == 17) isCtrl=true;
		if(e.which == 81 && isCtrl == true) {
			api.setOptions({ aspectRatio: 1 });
			api.focus();
		}
	});
});

});