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.
Create a Slide-In Panel with jQuery
In this tutorial, I'll explain how to create a slide-in panel effect with jQuery. Basically, this means a hidden panel the slides into view when it is triggered by a button or other action. This is often used to display a contact form in a fun way, which is exactly what I am using it for on the new UltraMega website. As it turns out, this is very easy to do.
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; } |
Playing Sounds With SoundManager
Playing sounds on a webpage can be challenging since different browsers use different HTML elements that handle embedded sounds, and using them all breaks standards compliance. Fortunately, Flash can play sounds and is widely supported by all modern browsers. Even better, you don't even have to own Adobe Flash or know how to use it to take advantage of its sound-playing ability.
SoundManager 2 is "A Javascript Sound API supporting MP3, MPEG4 Audio and Video." Basically it's a JavaScript package that uses a small Flash file to stream audio and video to the browser. It gives you full control over the Flash functions via JavaScript, including but not limited to: load, play, stop, pause, seek, and volume. It also supports ID3 tag parsing and more advanced features like displaying peak and spectrum data.
Saving Time With jQuery
jQuery is a popular JavaScript library that greatly simplifies developing advanced JavaScript applications. It is extremely powerful and lightweight at the same time. I've been using it for the first time on a current project, and I really like it.
jQuery supports all major browsers, has a small file size, and is used by major websites such as Google! Here is the description from their website:
"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."
Categories
- General (7)
- News (4)
- Projects (13)
- Noty (2)
- TempServers (9)
- Software (8)
- Tips & Tutorials (51)
Archives
Links
Meta
