jQuery 1.8 BETA

Well, just noticed that jQuery 1.8 Beta has been released last week. You can grab the code from jQuery CDN: http://code.jquery.com/jquery-1.8b1.js

I believe most of you should already have gone through the new features of jQuery 1.8 Beta 1, if you haven’t yet, check the announcement here. 

In the following post I have briefly show the way of use and code these new features of jQuery 1.8. Hope you will find it useful.

Custom jQuery

As of jQuery 1.8, you can create custom version of jQuery with excluding one or more modules that you do not need, for instance, AJAX module, CSS module, effects module, dimension module and offset module can be excluded from jQuery library.

In order to have custom builds jQuery, follow this documentation.

CSS Vendor Prefixes

Having nightmare to include all vendor prefixed CSS properties into stylesheet or JavaScript? With jQuery 1.8, you could save your time from this. Simply pass the non-prefixed property and jQuery will generate the vendor prefix that is appropriate for the user browser. It can be as simple as this:

$('.box').css({
	'transition': 'all 1s',
	'box-shadow': '1px 1px 3px #ccc',
	'border-radius': '5px',
	'box-sizing': 'border-box'
});

That’s all! These will automatically add -webkit- prefixes in webkit browsers as well as -moz- in Firefox.

New $.parseHTML() Method

This new method allows us to parse strings as HTML. It will be used to replace $() method in the way to parse HTML into a DOM fragment for better XSS protection.

I suppose the way of using it will be like this:

var html1 = $("<p>This is paragraph.</p>");
var html2 = $.parseHTML("<p>This is paragraph.</p>");
$('.box').append(html1);	//output: <p>This is paragraph.</p>
$('.box').append(html2);	//output: <p>This is paragraph.</p>

var html1 = $("<img src='z.jpg' />");
var html2 = $.parseHTML("<img src='z.jpg' />");
$('.box').append(html1);	//output: <img src='z.jpg' />
$('.box').append(html2);	//output: <img src='z.jpg' />

var html1 = $(".object");
var html2 = $.parseHTML(".object");
$('.box').append(html1);	//output: (The object HTML)
$('.box').append(html2);	//output: .object

New $.Animation Function

jQuery 1.8 uses a new core for creating an animation object – $.Animation( element, props, opts). It provides support for older browsers without built-in animations and fixes many bugs from previous versions.

However, at the moment there is only preliminary documentation for this. As for me I’m not clear in how to use it yet. Perhaps if you know the way please shares with us.

And Much More….

There are much more changes in jQuery 1.8 such as deprecation of APIs and features that are inefficient, ineffective and inadvisable. Of course, to know more about it you could simply read the official blog post.

Having problem of creating presentation slideshow in web page? In this tutorial we’ll show you how to create a web presentation CSS slideshow effect, with the combination of CSS3 Transitions and CSS :checked pseudo-class with sibling selector (~).

The Idea

The main idea is to create a web presentation CSS slideshow effect like in Microsoft PowerPoint but using HTML and CSS only.

The HTML Markup

The markup will consist of several slides and radio buttons, each radio button will be attached to a slide. The purpose of using radio button is to get the selected slide when attached radio button is checked. Hence, we can simply use <label> tag with for attribute inside presentation slides to make the radio button checked when clicked.

<div id="slideshow">
	<!-- radio button for each slide -->
	<input id="s1-chk" class="s1-chk main-chk s-input" name="slide" type="radio" checked />
	<input id="s2-chk" class="s2-chk main-chk s-input" name="slide" type="radio" />
	<input id="s3-chk" class="s3-chk main-chk s-input" name="slide" type="radio" />
	<input id="s2-sub1-chk" class="s2-chk sub1-chk s-input" name="slide" type="radio" />
	<!----------------------------------->
	<!-- You can add more radio button -->
	<!----------------------------------->
	<!-- A slideshow canvas -->
	<div id="slidecanvas">
		<!-- Slide 1 -->
		<section id="s1" class="slide-holder">
			<div class="main-slide slide">
				<!-- Slide content goes here -->
				<label for="s2-chk">Go to slide 2</label>
			</div>
		</section>
		<!-- Slide 2 with sub-slide -->
		<section id="s2" class="slide-holder">
			<div class="main-slide slide">
				<!-- Slide content goes here -->
				<label for="s2-sub1-chk">Go to sub-slide</label>
				<label for="s3-chk">Go to slide 3</label>
			</div>
			<div class="sub-slide slide">
				<!-- Slide content goes here -->
			</div>
		</section>
		<!------------------------------------------->
		<!-- You can have more presentation slides -->
		<!------------------------------------------->
	</div>
</div>

There can be any number of presentation slides. Just to make sure that each slide have attached with a radio button.

The CSS

Note that we will exclude all vendor styles. Yet you can find them in the source files.

The #slidecanvas will hold all the presentation slides and where the animation takes place. Depending on how many main slides we have, set its width accordingly so that the slideshow able to present in full screen view.

#slidecanvas
{
	position: absolute;
	top: 0;
	left: 0;
	width: 400%;
	height: 100%;
	transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	-moz-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	-webkit-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	-ms-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	-o-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

The .slide-holder class will be used to segment out the main slides into different columns. Since we have four main slides in demo, set the width to 25% (100 / 4).

.slide-holder
{
	position: relative;
	float: left;
	width: 25%;
	height: 100%;
}

Also, we will style each slide using .slide class. In order to make the slide align in vertical center, we will use CSS calc function to calculate and set the height of slides according to user browser resolution.

.slide
{
	position: relative;
	background: url(slidebg.png) 0 0 repeat #fafafa;
	margin: 80px 120px;
	padding: 25px 50px;
	height: 600px;  /* fallback */
	height: -moz-calc(100% - 160px);
	height: -webkit-calc(100% - 160px);
	height: calc(100% - 160px);
	min-height: 600px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

Now let’s animate the slideshow using radio button :checked pseudo-class with sibling selector. When selected radio button is checked, the #slidecanvas will move to the point we specified and at the same time create a slideshow effect.

input.s1-chk:checked ~ #slidecanvas
{
	left: 0;
}
input.s2-chk:checked ~ #slidecanvas
{
	left: -100%;
}
input.s3-chk:checked ~ #slidecanvas
{
	left: -200%;
}
input.main-chk:checked ~ #slidecanvas
{
	top: 0;
}
input.sub1-chk:checked ~ #slidecanvas
{
	top: -100%;
}

Last simply hide the radio buttons using CSS visibility properties since we want the presentation slideshow have its own flow.

.s-input
{
	position: relative;
	visibility: hidden;
}

That’s it! You can freely to style the content inside presentation slide just like normal using CSS. Hope you enjoyed this pure CSS Slideshow tutorial and find it inspiring!

You might be interested in our other CSS tutorials as well: =)

• Fancy Hover Effects with CSS3 Transitions
• Fancy Image Gallery with CSS3 Transitions
• CSS3 3D Transforms Animation
• CSS3 Background Animations
• CSS Tricks for Headings, Fonts and Text Styling

View Demo Download

I’ve created an example of HTML5 drag and drop file upload with the capabilities to resize, crop or reformat/filter the uploaded image through HTML5 canvas before sending to the server. The techniques included are:

• HTML5 File API (Filereader)
• Drag and Drop API
• jQuery Template
• and CSS3 for styling purpose.

You could check out the working demo through the link up there. Have fun with this HTML5 drag and drop file upload with canvas!

The HTML Markup

The demo consists of two major parts, an area for drag and drop as well as the upload preview part. The idea is to capture the files uploaded by user whether through drag and drop area or browse button, and then display it in the preview section before upload to the server.

<!-- drop area -->
<div id="droparea">
	<div class="dropareainner">
		<p class="dropfiletext">Drop files here</p>
		<p>or</p>
		<p><input id="uploadbtn" type="button" value="Select Files"/></p>
		<!-- extra feature -->
		<p id="err"><!-- error message --></p>
	</div>
	<input id="upload" type="file" multiple />
</div>
<!-- result area -->
<div id="result"></div>

Also, we will using jQuery Template to create image preview wrapper which contains preview of uploaded image, image name, original image size, and final size of image that will upload to the server.

<script id="imageTemplate" type="text/x-jquery-tmpl">
    <div class="imageholder">
		<figure>
			<img src="${filePath}" alt="${fileName}"/>
			<figcaption>
				${fileName} <br/>
				<span>Original Size: ${fileOriSize} KB</span> <br/>
				<span>Upload Size: ${fileUploadSize} KB</span>
			</figcaption>
		</figure>
	</div>
</script>

Events Binding

Now, let’s get our hand dirty with some jQuery coding. The first thing that we are going to do is to bind the Drag and Drop events to our #droparea element. There are a number of drag events, but we will use only dragover, dragleave, and drop events.

var dropzone = $('#droparea');
dropzone.on('dragover', function() {
	//add hover class when drag over
	dropzone.addClass('hover');
	return false;
});
dropzone.on('dragleave', function() {
	//remove hover class when drag out
	dropzone.removeClass('hover');
	return false;
});
dropzone.on('drop', function(e) {
	//prevent browser from open the file when drop off
	e.stopPropagation();
	e.preventDefault();
	dropzone.removeClass('hover');
	//retrieve uploaded files data
	var files = e.originalEvent.dataTransfer.files;
	processFiles(files);
	return false;
});

dataTransfer.files will returns a FileList of the files being dragged.

Not only drag and drop area, instead we will create a ‘browse’ button as well. But we don’t want to use native browser file upload button, so here is a little trick for this.

var uploadBtn = $('#uploadbtn');
var defaultUploadBtn = $('#upload');
uploadBtn.on('click', function(e) {
	e.stopPropagation();
	e.preventDefault();
	//trigger default file upload button
	defaultUploadBtn.click();
});
defaultUploadBtn.on('change', function() {
	//retrieve selected uploaded files data
	var files = $(this)[0].files;
	processFiles(files);
	return false;
});

The best practice of using new HTML5 objects is to check for object availability before using it, else simply skips the function or show a fallback plan if any.

function processFiles(files) {
	//check for browser support
	if(files && typeof FileReader !== "undefined") {
		//extract FileList as File object
		for(var i=0; i<files.length; i++) {
			readFile(files[i]);
		}
	}
	else {
		//some message or fallback
	}
}

Each File object contains properties like name, size, and type.

The FileReader Object

Next, we will read the content of uploaded file through FileReader object which allows browser asynchronously to read files from user desktop.

var readFile = function(file) {
	if( (/image/i).test(file.type) ) {
		//define FileReader object
		var reader = new FileReader();
		//init reader onload event handlers
		reader.onload = function(e) {
			var image = $('<img/>')
			.load(function() {
				//get new image URL from canvas image
				var newimageurl = getCanvasImage(this);
				//create preview using jQuery Template
				createPreview(file, newimageurl);
				//upload the new image to server
				uploadToServer(newimage, imageObj);
			})
			.attr('src', e.target.result);
		};
		//begin reader read operation
		reader.readAsDataURL(file);
	} else {
		//some message for wrong file format
	}
}

Once the reader is loaded, we can bind the uploaded image (in Base64-encoded) to <img> tag through e.target.result. After that, we will use it to draw a canvas image so that we can modify it with JavaScript before proceed to the server. This definitely will save the bandwidth compare to process it at server side.

Canvas Image

We can resize the image as well as apply different filters to our canvas image. However I won’t cover them here, still, you can grab them from the source files. When the canvas image was drawn, convert it to file URL format through toDataURL method and attach it to jQuery Template.

var getCanvasImage = function(image) {
	var imgWidth = 180,
	    imgHeight = 180;
	//define canvas image
	var canvas = document.createElement('canvas');
	canvas.width = imgWidth;
	canvas.height = imgHeight;
	var ctx = canvas.getContext('2d');
	ctx.drawImage(image, imgWidth, imgHeight);
	//convert canvas to jpeg URL
	return canvas.toDataURL("image/jpeg");
}

jQuery Template

When we have everything we need, simply bind them to jQuery Template and append to our #result element.

var createPreview = function(file, newURL) {
	//populate jQuery Template binding object
	var imageObj = {};
	imageObj.filePath = newURL;
	imageObj.fileName = file.name.substr(0, file.name.lastIndexOf('.')); //subtract file extension
	imageObj.fileOriSize = convertToKBytes(file.size);
	imageObj.fileUploadSize = convertToKBytes(dataURItoBlob(newURL).size); //convert new image URL to blob to get file.size
	//append new image through jQuery Template
	var img = $("#imageTemplate").tmpl(imageObj).prependTo("#result");
}

There is a need of converting newURL (in DataURI format) to Blob so that we can access it’s attributes like file size or file type whether from client side or server side.

For dataURItoBlob function, you might found them in script.js file inside source files.

Upload To Server

Last but not least, we can upload the new image to our server through jQuery AJAX.

var uploadToServer = function(oldFile, newFile) {
	// prepare FormData
	var formData = new FormData();
	//we still have to use back some of old file data
	//since new file doesn't contains original file data
	formData.append("filename", oldFile.name);
	formData.append("filetype", oldFile.type);
	formData.append("file", newFile);
	//submit formData using $.ajax
	$.ajax({
		url: "upload.php",
		type: "POST",
		data: formData,
		processData: false,
		contentType: false,
		success: function(data) {
			//some success code here
		}
	});
}

The File Upload PHP Script

Though this is not a complete PHP upload script, but hope this will helps you get to know how it works inside the back end code.

if(isset($_FILES['file'])) {
	if(move_uploaded_file($_FILES["file"]["tmp_name"],
						"upload/".$_POST["filename"])) {
		echo 'Upload Success';
	} else {
		echo '#Fail';
	}
}

View Demo Download Source

Thanks to CSS3 @font-face rule we were able to render any web fonts within web pages. This also means that we can include icons into web pages through icon web fonts instead of using images or CSS sprite. Moreover, it’s much easier to manage, plus icon web fonts being scalable and able to style using CSS properties like font-size, color, text-shadow, and etc.

In this post I have compiled a list of 15 free but useful @font-face Icon sets that might integrated into your web pages.

Heydings Icons

by Heydon Pickering

Heydings Icons is a collection of 60 glyphs specifically intended for the classification of textual cues such as hyperlinks, navigation and buttons.

Download

Web Sysmbols Font

by Just Be Nice Studio

Web Symbols is a set of vector HTML-compliant typefaces which contains set of icons for CMS, icons for gallery navigation, social networks icons, icons for service site, and etc.

Download

Modern Pictograms Font

by John Caserta

Modern Pictograms is a typeface for interface designers and programmers. It’s designed for the Flatfile WordPress theme in early 2011.

Download

Entypo Font

by Daniel Bruce

Entypo is a set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font.

Download

Iconic

by P.J. Onori

Iconic is an open source icon set consisting of 171 glyphs in raster, vector and font formats.

Download

Raphaël Icon-Set

by Dmitry Baranovskiy

This is the great Raphael icon set which converted to a web font.

Download

Foundation Icon Fonts

by Zurb

Foundation Icon Fonts is a custom icon sets which consists of three different categories – General Set, General Enclosed Set, and Social Set.

Download

Typicons

by Typicons

Typicons are free-to-use vector icons embedded in a webfont kit for easy use in your user interface.

Download

Social Media Icons Pack

by Jelop Dimitrov

Social Media Icons Pack – Socialico is a set of 74 social media icons with two different designs – circle and non-circle.

Download

Guifx v2 Transports

by Guifx

Guifx v2 Transports is a TrueType font contains of 58 glyphs for audio and video interface controls.

Download

ikoo

by dasmuse

ikoo typo is a web font specially developed to be integrated into web page without using images but through @font-face.

Download

Social Logos

by CtrlAltF12

Social Logos icon set contains full logo of popular social media such as Facebook, Twitter, Digg, Linked, and etc.

Download