The scrolldeck.js library is probably one of the best ways out there to implement a scrolling presentation deck. All you have to do is build a web page with each slide as a div. It requires JQuery, Scrollorama, scrollTo, easing & scrolldeck  JS scripts to function. After linking all of the above scripts, create the slide deck on the document ready event and configure the settings as shown:

$(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', slides: '.slide', duration: 600, easing: 'easeInOutExpo', offset: 0 }); });

From here, all you have to do is add the animate classes to your slides elements as shown:

<div class="slide"> <p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p> <p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p> </div> <div class="slide"> <p>This slide is ’pinned‘ to the top of the screen until all the slide animation builds are complete.</p> <p class="animate-build" data-build="1">This is the default fade in animation)</p> <p class="animate-build" data-animation="space-in" data-build="2"> This paragraph will fade in while its letter spacing...

It’s been sometime since I’ve updated this HTML5 Canvas series, but this article should round out the tutorial series as article 6. We’ve covered creating 2D shapes, images, how to animate said shapes and images, and WebGL basics. In my example from Part 5 we coded together a basic cube with materials. With these foundations set in place we can start diving deeper into WebGL through animating the objects and even piecing together particle effects. If you have any questions please take a moment to revisit my previous articles concerning Canvas:

Part 1: Getting Familiar with the Basics Part 2: Creating Gradients and Patterns Part 3: Working with Images and Text Part 4: Animation Part 5: Building 3D objects

One of the basics in learning how to work with basic motion in an animation setting, you learn about the physics and force that cause a basic bouncing ball. In the case of creating our particle effect, you can create falling particle that might mimic snowfall or simulate a dynamic ball pit. When we begin coding out our Canvas the pattern we’ll create will seem rather chaotic at first, but we can wrangle it all in to make something amazing. Hopefully by the end of this we can create a group of soft glowing edge particle with random paths that resemble fireflies.

Check out the results of the code in this article here.

Let’s put our canvas in place with the HTML:

<canvas id="myCanvas" width="640" height="480"> Im sorry youre browser doesnt seem to support the CANVAS element. Try upgrading to a modern browser like <a href="http://chrome.com">Chrome</a>. </canvas>​

You can proceed by either writing your corresponding Javascript in an external JS file, for all intensive purposes of this article, I’ll be writing the Javascript in the section of the HTML file.

var canvas = document.getElementById('myCanvas'); var context = canvas.getContext("2d");

Although the dimensions of our canvas have already been defined in the tag in our HTML, we need to define the dimensions with the Javascript as variables.

var W = 640; var H = 480; ctx.fillStyle = "#333"; ctx.fillRect (0,0,W,H);

We’ve filled the space with a dark gray, something to make our particle pop against the background. And we’ve positioned the canvas on the page at a left and right of 0. You’ll notice that the variables for our width and height have already been used, this will allow us to dynamically change the dimensions. Getting down to the meat and potatoes of the article we’ll begin adding our first particle against the background.

ctx.beginPath(); ctx.fillStyle = '#FFF'; ctx.arc(100, 100, 15, Math.PI*2, false); ctx.fill();

The arc method helps us create a circle element with the x and y coordinates at 100 and it has a radius of 15. For a more in depth explanation of the arguments for the arc method, read Part 1 of this series. The last method tells our canvas to fill in the particle we just created. Now that we’ve created the particle, let’s bring it to life with a little animation. Let’s wrap our particle in a ‘draw’ function.

function draw { ctx.beginPath(); ctx.fillStyle = '#FFF'; ctx.arc(x, y, 15, Math.PI*2, false); ctx.fill(); x++; y++; } var x = 100; var y = 100; setInterval(draw, 110);

By using setInterval we’re telling Javascript which element we want to animate in our first argument, and the speed of acceloration in the 2nd argument. If we increase the interval number, you can begin to see the particle slow down. Adversely if we decrease that interval number, the speed of our particle increases. For the time being ’110′ seems to be an ideal speed. We’ve also introduced 2 new variables for the x and y properties of said particle.

From this point we’ll need to create an array above our draw function to help create multiple particle on the canvas like so: var particles = []; for...

Responsive Web Design took a big step forward on June 19, when a highly influential W3C Working Group published a draft recommendation stating that an additional slate of media queries should be incorporated into web browsers.

The CSS Working Group’s proposal would enable browsers to render web design layouts in a much more flexible manner, based on factors such as screen size, color depth, and device orientation.

Media queries consist of a media type (ex. screen or print), combined with defining expressions that pertain to specific media features, like height and width, in the following general format:

@media type { HTML tag { expression: value } }

The growing influence of Responsive Web Design has ushered in more fluid design styles that can automatically adapt page content to a user’s viewing device. It is most commonly associated with the industry mandate to develop websites that are compatible with desktops and laptops, as well as on smartphones.

Media Query Support

Established W3C standards, like HTML4 and CSS2, already support style variances based on media types.

For example, a stylesheet can specify that different fonts be utilized for screen viewing and for print.

In CSS format, this looks like:

@media screen { body {font-family: tahoma, sans-serif; font-size: 14px;} } @media print { p {font-family: times new roman, serif; font-size: 12px;} }

The above command directs a user agent to display a 14px Tahoma font on screen, but if the text content is printed the designated font will be Times New Roman, at 12px.

The HTML directive to use a certain stylesheet, based on the desired media type, is expressed as:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">

In general, ‘sans-serif’ fonts (like Tahoma and Verdana) are more readily viewable on a computer screen, while serif fonts such as Times New Roman are typically utilized for printing purposes. This is reflected in the stylesheet designations above.

Media Query Specifics

As defined, a media query will only be deployed when the user agent determines that the answer for a given directive is ‘true’.

A query can address more than one feature in the same expression – for instance:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Limiting statements, such as ‘not’ and ‘only’ can also be utilized:

<link rel="stylesheet" media="not screen and (color)" href="example-1.css" /> <link rel="stylesheet" media="only screen and (color)" href="example-2.css" />

Media Features

‘Features’ act as qualifiers for media queries, and describe the requirements for an output device.

One such feature is ‘device-aspect-ratio’, which correlates with device orientation, and would be shown as:

<link rel="stylesheet" media="device-aspect-ratio: 16/9" href="widescreen.css" />

In a mobile device that allowed for both landscape and portrait views, the above stylesheet command would ensure that if the widescreen orientation was selected (landscape), then a browser would render web pages according to the correct set of style rules.

Other features have a ‘min-’ or ‘max-’ prefix, and are tied to a specific measure, like:

<link rel="stylesheet" media="max-device-width: 500px" href="mobile.css" />

In the above case, a mobile device possessing a screen width of less than 500px would be targeted by the mobile.css stylesheet.

Say, for instance, you wanted to target devices with a minimum color-index of 256, the command would look like this:

<link rel="stylesheet" media="screen and (min-color-index: 256)" href=”color.css" />

In another example, if you desired to ensure that a document was printed by an output device of least 300dpi capability, the CSS media query would be in the following format:

@media print and (min-resolution:...

With the progress element, HTML5 pages can display the progress of a task, for example a download or background activity. In this tutorial we will demonstrate how to use the progress element in your pages, with a simple JavaScript function updating the element as the task executes. At the moment the progress element is only really supported in Firefox, Chrome and Opera, with support developing in Internet Explorer and Safari, so you can’t rely on it just yet.

For demonstration, we are simply going to update the progress element using a JavaScript timeout. We will allow the user to start the task by pressing a button, which we will disable while the task executes, updating the progress element and a textual indicator throughout. When the task is complete, the button will be enabled again and the user can start the task over again if they wish. This is how the progress bar looks in my installation of Firefox while the function is executing:

Create a Page

Create your HTML5 page using the following outline:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

We will place our JavaScript function in the script section and the page elements in the body next.

Add the Progress Element

Add the progress element to the body section of your page, together with a little informative text:

<p>Task progress:</p> <progress id="prog" value="0" max="100"></progress>

We are starting our task progress at 0. Since the maximum value is 100, when the task is complete the value will also be 100. We will update the value from JavaScript, so this markup is purely for the initial display of the progress element when the user browses to the page.

Provide User Interaction

Let’s allow the user to start the progress of the task by pressing a button. We will also indicate the percentage of progress in a textual element:

<input id="startBtn" type="button" value="start" onclick="startProgress()"/> <div id="numValue">0%</div>

The input element will start the task executing, which will cause the JavaScript function to update the progress element. We will also update the div with the percentage indicator as the task progresses.

Implement the JavaScript

Let’s now complete the JavaScript for our task progress. In the script section of your page head, add a few variables to track progress:

//current progress var currProgress = 0; //is the task complete var done = false; //total progress amount var total = 100;

Now add the function outline:

//function to update progress function startProgress() { }

Inside the function, first retrieve references to the page elements we are working with:

//get the progress element var prBar = document.getElementById("prog"); //get the start button var startButt = document.getElementById("startBtn"); //get the textual element var val = document.getElementById("numValue");...

Since CSS2 developers have been able to use HTML element attribute values to identify Web page items for styling properties. With CSS3, this is extended significantly with the addition of substring matching within attribute selection. This allows you to define styling rules in a more dynamic and efficient way than before, by identifying elements with one or more chained substrings defined in your CSS code.

In this tutorial we will outline how to use these new substring matching attribute selectors. You are most likely to find attribute selectors of this kind useful when styling links, so that is what we will focus on here. There are three main attribute matching additions to CSS3, allowing you to specify substrings to match at the beginning or end of an attribute string, or anywhere within the entire string.

Create a Page

Let’s create a page to use our attribute selectors with. Use the following HTML5 outline:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

We have a style section for our CSS3 code and will place some HTML content in the body section.

Create Some Links

Add the following sample links to your page for demonstration:

<div class="links"> <a href="http://developerdrive.com/section">Site</a> <a href="https://developerdrive.com/secure_section">Secure Site</a> <a href="docs/document.pdf">PDF Document</a> <a href="http://developerdrive.com/files/data.xml">XML File</a> </div>

These do not link to actual resources, so you may wish to replace them with your own. Let’s add some default link styling in the page head style section:

.links a:link { padding-top:15px; padding-bottom:10px; padding-right:35px; margin-right:30px; font-weight:bold; text-decoration:none; font-family:sans-serif; }

You can of course alter this code to suit yourself.

Apply the “Begins With” Substring Matching Attribute Selector

Let’s use the “begins with” selector to apply particular styling to any links connecting the user to secure URLs. We can do this by matching the “https” at the start of a link element’s “href” attribute value. Add the following to your CSS code:

a[href^="https"] { background: url(secure_icon.png) no-repeat right; }

You can use the following image:

The “^” character indicates that we want to match any “href” attributes for anchor elements starting with the specified string: “https”. We display the icon after the link text as we have the padding properties set to allow this.

Note: You can optionally use the “:after” pseudo-selector together with the “content” declaration, but I have personally found this to be a little unpredictable in certain browsers.

Test your page in a browser, this is how the secure link appears in Chrome:

Apply the “Ends With” Substring Matching Attribute Selector

Let’s use the “ends with” selector to style links to PDF documents using an icon, as we did with the secure link. Add the following to the style section in your page:

a[href$=".pdf"] { background: url(pdf_icon.png) no-repeat...

Responsive designs are all the hype in Web development communities nowadays. With videos becoming an important marketing tool on many websites, there is a growing need to incorporate responsive videos into these designs. Responsive videos are elastic and are especially favored where web pages will be viewed on different screen sizes using a variety of browsers.

Using the HTML5 video element however is not enough when handling video embed code that uses iframes and objects tags. Using the HTML5 video element will therefore not work for video found on most video sharing sites like YouTube and Vimeo. In order to do this,  you need to embed the code with a <div> container and specify the child elements with absolute positions. In this case, give 100% to both width and height. This forces the embed elements to automatically expand full width. Check out how this has been done in the markup below:

<head> <title>Demo: Elastic Videos</title> </head> <body> <div id="pagewrap"> <h1> <h2>Resize your browser window to see the elastic videos</h2> <h3>New YouTube Code (iframe)</h3> <div class="video-container"> <iframe width="853" height="510" src="http://www.youtube.com/embed/3R2cnxz27LI" frameborder="0" allowfullscreen=""/> </div> <h3>Old YouTube Code (embed)</h3> <div class="video-container"> <object width="500" height="400"> <param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/> <param name="wmode"...

From family photos to business documents, file uploads power many of the major web applications. A typical HTML form that allows the user to upload a file may look like this:

<html> <body> <form action="upload_file.php" method="post" enctype="multipart/form-data"> File Name: <input type="file" name="file" id="file" />  <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html>

In this case, the only field displayed on the form is the “file” field.  This field allows the user to browse their hard drive for the file they wish to upload. The enctype “multipart/form-data” specifies that the field should be filled with binary data, as from a file, rather than typed input from the user. PHP applications allow users to upload files through its $_FILES object. Developers can use the $_FILES object to check on the properties of an uploaded file:

$_FILES["file"]["name"] – the name of the uploaded file $_FILES["file"]["type"] – the type of the uploaded file $_FILES["file"]["size"] – the size in bytes of the uploaded file $_FILES["file"]["tmp_name"] – the name of the temporary copy of the file stored on the server $_FILES["file"]["error"] – the error code resulting from the file upload

For files that upload successfully, the value of $_FILES["file"]["error"] is 0. However, some developers may want to place restrictions on the files users can upload.

File Type

Developers can use the $_FILES["file"]["type"] property to limit the types of files uploaded to those in use for specific applications. For instance, businesses may wish to restrict file types to documents, spreadsheets and presentations, but not allow users to post photos, videos or executable programs.

<?php if (($_FILES["file"]["type"] != "application/msword") || ($_FILES["file"]["type"] != "application/vnd.ms-excel ") || ($_FILES["file"]["type"] != "application/vnd.ms-powerpoint"))   {   echo "Invalid file type";   } ?>

File Size

Network administrators may also choose to limit the size of files users can upload to a server in order to reduce bandwidth usage. Developers can set limits on the size of a file a user can upload.

<?php if ($_FILES["file"]["size"] < 25000)) // Max File Size: 25KB   {   echo "File size exceeds maximum.";   } ?>

Upload Timed Out

Another method that administrators use to conserve bandwidth is to limit the time that a page can use to upload a file. Most PHP applications time out after 30 seconds, but the developer can set the time to as little or as much as needed by changing either the php.ini file on the server or setting the time in the application itself. PHP.INI File max_input_time 300

PHP Script

<?php // code to upload file to temporary directory ini_set('max_input_time', 300); // code to move file to new directory ?>...