Record HTML Canvas Animations to Video
Sometimes it might be useful to be able to record your canvas animation to a video format. Maybe you want to use your JavaScript skills to create fancy effects for a video. You could use some kind of screen capturing program and crop the video, but I'll show you how to do it with code!
Note: You'll need an HTTP server with PHP running on your local machine to do this. Don't try this with your website over the Internet, unless you don't mind waiting for tons of images to upload... Also, I recommend using Chrome for best results.
Let's start with our simple animation. You can see it in action here.
Default Form Values with jQuery
Here's a useful jQuery snippet that clears the default values of form fields on focus and refills them if no text is entered. It uses the attribute called defaultValue which stores the original value of a form field.
$(document).ready(function() { $('input[type=text]').focus(function() { if($(this).val() == $(this).attr('defaultValue')) { $(this).val(''); } }) .blur(function() { if($(this).val().length == 0) { $(this).val($(this).attr('defaultValue')); } }); });
For example, assume you have a field like this:
<input type="text" value="Search..." />When the page loads, the text field will have "Search..." filled in. When you focus on it, this text will disappear (assuming it hasn't already been edited by you). When you leave focus without typing anything, the text will reappear.
Degradable Tabs With jQuery UI
Creating tabbed content is easy with jQuery UI. Using a simple HTML layout and calling the tabs function is all it takes. Here, I'll show you how to make a degradable tabbed interface. That is, we'll make it so the page is still readable when JavaScript is disabled. This involves hiding and showing elements using JavaScript before enabling tabs.
See the live demo. Try turning off JavaScript to see how it degrades.
Data Storage with jQuery
The jQuery data functions provide a clean way to store information for any kind of use. You can assign any amount of data to an element on the page and access it later by referencing the element. Like everything in jQuery, this is very easy to use.
In the following examples, we will be using an element with the id db to store information about fruit.
Store something:
// Store the current fruit $("#db").data("fruit", "orange"); // Store an array of fruit info $("#db").data("orange", { type: "citrus", color: "orange" } );
Fetch something:
// Find out what the current fruit is var fruit = $("#db").data("fruit"); // orange // Get the type of the current fruit var type = $("#db").data("orange").type; // citrus
Remove something:
// Remove all fruit data $("#db").removeData("fruit").removeData("orange");
Add Records to a Queue with jQuery
This tutorial will explain how to make an animated "add to queue" type functionality with jQuery. Since it is hard to explain the results, check out the demo. First, I'll show how to create the actual effect, and then how to implement AJAX submission to a back-end script for database storage or some other processing.
Snippet: Converting Seconds to Readable Time (PHP & JS)
Sometimes, you might need to convert an integer representing seconds into a format that is easier to read. These functions can be used to turn a number of seconds into a simple format of HH:MM:SS, with leading zeros (ex. 15272 = 04:14:32). This can be used for countdown scripts, which is why I also include both a PHP and a JavaScript version.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function formatTime($secs) { $times = array(3600, 60, 1); $time = ''; $tmp = ''; for($i = 0; $i < 3; $i++) { $tmp = floor($secs / $times[$i]); if($tmp < 1) { $tmp = '00'; } elseif($tmp < 10) { $tmp = '0' . $tmp; } $time .= $tmp; if($i < 2) { $time .= ':'; } $secs = $secs % $times[$i]; } return $time; } |
Categories
- General (6)
- News (4)
- Projects (11)
- Lock My Stuff (2)
- Noty (1)
- TempServers (8)
- Software (8)
- Tips & Tutorials (46)
Archives
Links
Meta
