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."
Reloading Images Using JavaScript
There are some situations where you want to reload an image without refreshing the page containing it. This is especially handy with CAPTCHA images, where you might want to give the user the option to get a new code in case the first is too hard to read.
It sounds simple enough, but then there is browser caching that you need to work around. Fortunately, this problem is easy to solve just by altering the URL of the source, adding a unique string to the end (such as a timestamp) as a GET parameter. Here is a little JavaScript function that will accomplish this:
Toggle Display of Page Elements with JavaScript
This mini tutorial explains how to show/hide elements on a web page using JavaScript. There are many reasons why you would want to do this, and luckily it is very simple.
All it takes is changing the display CSS property. Setting display: block; (the default for div tags) makes it visible, and display: none; makes it hidden. The advantage to using display is that other items on the page will move to close the void left by the hidden object.
What is AJAX?
AJAX stands for Asynchronous JavaScript and XML. Many modern websites, big and small, implement this technology in many different ways, but what exactly is it? Here is an explanation in simple terms...
An AJAX application is a web page that functions more like a desktop application than a traditional web page in that it feels more responsive. It works by transferring small pieces of information in the background and updating just the affected area of the page without reloading the whole thing. This not only speeds up web applications and lowers bandwidth consumption, it also increases end-user enjoyability. As AJAX becomes more popular, the gap between the Internet and desktop applications will become increasingly smaller.
