Simply Sly`s Bighead

Simply Sly Software, Website Design, Website Hosting, Social Networking and Computer Consultation Blog

Who is SimplySly?

I am also available to take on new clients as my time may permit. While learning these new technologies I have travelled the four (4) corners of the United States also learning more about my country, my chosen technologies and myself.

Who is visiting Sly?

Get our toolbar!

Tuesday, December 4, 2012

Your Daily digest for Template Designer`s Tools, Tips, Tricks and Tutorials

Template Designer`s Tools, Tips, Tricks and Tutorials
Find The Web Design or Corporate Idetity Template That You Are Looking For At!
Facebook's $20 Million Privacy Settlement Gets Judge's Approval
Dec 4th 2012, 20:19

Facebook's offer of a $20 million cash settlement in a class-action lawsuit over the company's use of user's names and photographs in advertisements was granted preliminary approval by a federal judge Monday afternoon.

The lawsuit was initially filed on behalf of Facebook users objecting to the use of their names and pictures in Sponsored Stories, ads which turn a user's "likes" into ads appearing in friends' news feeds. The lawsuit argues the ads are a violation of privacy, as they turn users into spokespeople and endorsers without their direct approval.

If the proposed settlement receives final approval, Facebook will divvy the $20 million among Facebook users claiming damages relate… Continue reading...

More About: Facebook, US

thumbnail "Faces of Meth" Campaign Gets Shocking New Ad
Dec 4th 2012, 20:11

Few are the Internet users not aware of the “Faces of Meth” campaign launched by the Multnomah County Sheriff’s Office about 8 years ago in a desperate bid to curb the serious meth problem in Oregon. It just got a brand new ad. The idea behind the campaign is to shock people into awareness by presenting photos of real i... (read more)

thumbnail Mercury Pollution Found to Contaminate Seafood
Dec 4th 2012, 20:01

The journal Environmental Health Perspectives has recently witnessed the publication of a new study stating that seafood worldwide is presently running the risk of becoming contaminated by the mercury released into the atmosphere by various industrial processes. According to the specialists who have investigated this matter at hand, t... (read more)

thumbnail Mozillux 12.12.1 Distribution Features Firefox 17.0.1
Dec 4th 2012, 20:01

Mozillux, a Linux distribution based on the popular Ubuntu and Debian GNU/Linux operating system, is now at version 12.12.1. Mozillux 12.12.1 aims to promote Mozilla embedded in a desktop software suite which can be used by beginners and intermediate users. The distribution is based on Ubuntu 12.04 LTS with LXDE desktop, which means it also benefits from Canonical's repositories. Highlights of Mozillux 12.12.1: • A bug from Java7 which p... (read more)

Netflix Scores Exclusive Rights to Stream New Disney Movies
Dec 4th 2012, 19:59

Netflix and Disney have entered into a multi-year licensing deal that will make Netflix the exclusive paid TV subscription service for new Disney films.

More About: disney, netflix

thumbnail EVE Online: Retribution Expansion Is Live, Has Price Cut on Steam
Dec 4th 2012, 19:59

Developer CCP is launching the Retribution expansion for EVE Online and in order to celebrate the occasion digital distribution service Steam is offering the game with a 75 percent price cut, which means that players can get it for 5 dollars or Euro. The official description for the new content says: “CONCORD has revisited long-untouched regulation and moved to bring greater accountability to capsuleer actions. Meanwhile, concerns of growing power among the pilots has prompted... (read more)

Fashion Forward: How Tech Is Revamping the Runway
Dec 4th 2012, 19:57

Coco Rocha describes her fashion picks for Mashable's Innovation Index.

More About: Innovation Index, fashion, features, mashable

thumbnail XCOM: Enemy Unknown Slingshot DLC Now Available on Steam
Dec 4th 2012, 19:55

As expected, 2K has just released the first story-driven Slingshot DLC for XCOM: Enemy Unknown. The new content is available on Steam for €6.5, which might seem overpriced for players who are addicted by the XCOM series. XCOM: Enemy Unknown Slingshot DLC offers players the chance to play a new set of three linked Council missions. While attempting to repel the alien invasion in Slingshot, players will meet an enigmatic Triad operative, divert an alien ship’s c... (read more)

thumbnail Spotlight: Artist Uses Bicycle Chains to Make Dog Sculptures
Dec 4th 2012, 19:51

An Israel-based artist named Nirit Levav has recently discovered that she is quite gifted when it comes to turning old bicycle chains into dog sculptures. One would assume that Nirit Levav's creation would lean more on the side of abstract art, yet (as the picture above shows), the resemblance between the final artwork and the pooch that served as an inspiration for it is stunning, to say the least. Inhabitat reports that the first such sculpture Nirit Levav ever de... (read more)

thumbnail Gameloft's Modern Combat 4 to Land on Android After December 6
Dec 4th 2012, 19:51

Mobile game publisher Gameloft has confirmed that it would bring the Modern Combat 4: Zero Hour title to devices running under Google’s Android operating system soon, but not before December 6. In fact, the company confirmed that the game would arrive on iOS devices on that day, but that Android users still have a bit longer to wait for it. “Modern Combat 4 iOS will be live on Dec 6th & shortly after on Android,” the company said on Twitter. ... (read more)

thumbnail Most Married People Use Complex Passwords, Experts Find – Infographic
Dec 4th 2012, 19:51

ESET has released the results of an interesting study on password handling. The report details the costs, challenges and current user behavior. The figures show that 16% of respondents never change their passwords, 46% change them once per year, 31% once every six months, and only 8% modify them at least once a month. 39% of the subjects claimed to be using a unique and random password that’s probably hard to guess. Others use the names of the pets, the name of... (read more)

thumbnail 2012 Movie Trailer Mashup Is Epic, Insane
Dec 4th 2012, 19:41

Whether you like comedies or dramas, action flicks or more “serious” releases, if you like movies in general, you should definitely spare a few minutes of your time for what must be one of the coolest trailer mashups ever made. Put together by Sleepy Skunk and devised in 3 major parts, the video above aims to include most major releases of 2012 (in terms of trailers), whether indie or mainstream, and to make sense of them all in a larger context. Part 1 ... (read more)

Newark Mayor Cory Booker Tweets His Week on Food Stamps
Dec 4th 2012, 19:37

Mayor Cory Booker from Newark, N.J. will just spend $29.78 on food this week, in a solidarity campaign with people living on the Supplemental Nutrition Assistance Program (SNAP), formerly and more popularly referred to as food stamps.

The social media savvy mayor is tweeting the experience with the hashtag #SNAPChallenge. Booker first tweeted that he'd be participating in the challenge on Nov. 21, when he invited his followers to join him in the initiative to raise awareness for food justice. The N.J. Mayor also announced he will be documenting his experience on Twitter>, Facebook, LinkedIn and the video sharing platform he co-founded Waywire.

Moving into the Thanksgiving Holiday, let�… Continue reading...

More About: Social Good, Twitter, cory booker, food

Dwolla Rolls Out 'Guest Checkouts' for Payments
Dec 4th 2012, 19:37

PayPal's startup rival, Dwolla, has begun offering something its larger competitor doesn't: "guest checkouts."

That means that you can make a payment using Dwolla without having to sign up. Dwolla takes a $0.25 cut of every payment, though. The Des Moines-based firm announced the feature to developers over the weekend. The company plans to showcase the functionality in an end-of-year fundraising effort on Reddit for Kiva, Charity: Water and F Cancer, among others.

The guest checkout is an attractive option for consumers who don't want to give up their personal information. Coincidentally, Facebook rolled out a feature for its Android Messenger app on Tuesday that similarly doesn't req… Continue reading...

More About: dwolla, paypal, paypal alternatives

Google Announces Dates for I/O 2013
Dec 4th 2012, 19:36

Google has announced the dates for its annual developer conference.

The event will be held May 15-17, 2013 at the Moscone Center in San Francisco. Additional details surrounding the event will be available in early 2013.

At last year's conference, Google announced Android 4.1 Jelly Bean, the Nexus 7 tablet and the Nexus Q media-streaming device. Google co-founder Sergey Brin also demonstrated the company's new Google Glass by skydiving onto the Moscone Center wearing a pair of the futuristic glasses.

SEE ALSO: Everything You Need To Know From Google I/O

Exceptionally popular with developers, Google I/O traditionally sells out moments after tickets go on sale. While the event ha… Continue reading...

More About: Google, google io

thumbnail Download Gmail 2.0 for iPhone and iPad
Dec 4th 2012, 19:36

It's been less than a day since Google updated its Gmail client for Android devices and the iOS version has just received the same treatment. The new Gmail 2.0 for iPhone and iPad includes full support for multiple accounts, as well as infinite scrolling inbox. The most obvious change is the new UI, which has been completely redesigned with a fresh, cleaner look. With the latest version of Gmail, iOS users will be get a new welcome experience and support for ... (read more)

Livestreamed Variety Show Will Star Snoop Lion and YouTube Talent
Dec 4th 2012, 19:19

Snoop Lion and familiar YouTube faces will appear in the "Tube-a-Tweet-a-Thon Holiday Spectacular," a new variety show benefiting homeless youth.

More About: Holidays, Snoop Lion, Social Good, What's Trending, YouTube, charity, snoop dogg

4 Things Media Companies Must Do … or Die
Dec 4th 2012, 19:18

In the first half of this year, I wondered if the Mayans had media companies on their minds when allegedly predicting the end of the world. But with the rise of media and tech hybrids, we're going to see a new evolution.

More About: design, development, features, mashable, online advertising

Waste Time Watching 'Procrastination: The Musical'
Dec 4th 2012, 19:15

Deadline approaching? Assignment due? Who cares? There's Tumbling to do and Facebooks to stalk.

Procrastination is that marvelous ability to drag one's feet until one's toes grind down to bloody stubs. We've all done it; some of us could even be called supreme stallers.

SEE ALSO: Internet Flowchart Explains Why You Never Get Anything Done

No matter your postponing weapon of choice, you can probably relate to "Procrastination: The Musical" from YouTube channel AVbyte. Watch it on repeat for maximum time wasting effectiveness.

Thumbnail image courtesy of Flickr, nessimaelq

More About: viral video

Verizon Fails in Bid to Block Mobile Roaming Order
Dec 4th 2012, 19:11

Verizon Wireless' effort to overturn a Federal Communications Commission order requiring it and AT&T to make deals allowing customers of smaller providers to use the bigger companies' networks for data connection while roaming failed on Tuesday.

The unanimous decision, made by a three-judge panel on the U.S. Court of Appeals in Washington, rejected Verizon's argument that the FCC was out-of-bounds in regulating mobile service providers when it green-lighted the arrangement last year. Instead, the court found the FCC was acting legally in requiring Verizon and AT&T to strike deals in "commercially reasonable" terms.

What does the decision mean for customers?

At its core, the FCC… Continue reading...

More About: US, fcc, verizon wireless

Home Soda Maker SodaStream to Run Super Bowl Ad
Dec 4th 2012, 19:06

SodaStream, an Isreali company that lets consumers make their own carbonated sodas at home, will run an ad during next year's Super Bowl.

The company is working on an ad with Common, an agency headed by Alex Bogusky. Bogusky famously left traditional advertising in 2010 to find a "more genuine version" of himself. That mission has led him to come up against former clients, including Coca-Cola, which dismissed a recent Bogusky-produced anti-sugar video as "grandstanding."

Backing SodaStream may appear like another challenge to Coke, which is also advertising during the game (Pepsi is also sponsoring the halftime show.) However, the move is ostensibly more about saving the environment.… Continue reading...

More About: Advertising, Alex Bogusky, Super Bowl, coca cola

Pinterest Hides Surprise in New Inspiration Calendar
Dec 4th 2012, 18:59

Pinterest has put together an interactive holiday calendar, but hidden on the page is the company's own attempt at creating an Easter Egg surprise.

More About: Google, easter eggs, pinterest

Google Launches New Gmail App for iOS
Dec 4th 2012, 18:46

A new version of Gmail for iOS is now available.

Completely rebuilt from the ground up, Version 2.0 of the app brings with it a new look and feel, which Google hopes will result in a faster, sleeker and easier experience when using the app.

New features in the app include updated animations, infinite scrolling in message lists, and profile pictures in messages. The app also makes autocomplete predictions when you search and allows you to respond to Google Calendar invites and +1 Google+ posts from directly within the app.

The updated Gmail app is available now in the App Store [iTunes link]. Due to its exceptional popularity, some users are currently reporting issues downloading th… Continue reading...

More About: Google, apple, gmail, iOS, ipad, iphone

Your Screen-Obsessed Friend Will Adore These Smartphone Gloves
Dec 4th 2012, 18:33

Gift of the DayMashable's Gift of the Day series highlights cool, interesting and fun products for that special someone on your holiday list.

If you live in a climate that gets chilly in the winter and you want to keep your (connected) loved ones warm, we might have just the ticket. Have you considered a pair of winter gloves that your giftee can use with her gadget?

The nature of most touchscreens means that unless skin makes contact with the screen, it won't react. However, real silver threading woven throughout gloves puts the conductivity back into your touch.

The gloves from, a small New York startup, let you use your phone or tablet with your whole hand, as opposed to alternate options, which rely on special fingertip pads. With stretchy one-size-fits-all sizing, th… Continue reading...

More About: Gift of the Day, Lifestyle, accessories, fashion, holidays 2012, travel and leisure

Apple Launches iTunes in Russia, India and 54 More Countries
Dec 4th 2012, 18:08

Apple announced on Tuesday that it is bringing the iTunes Store to 56 countries, including Russia, Turkey, India and South Africa.

More About: apple, iTunes 11, iTunes Store, itunes

Urban Airship Extends Mobile Commerce Opportunities With Tello Acquisition
Dec 4th 2012, 18:06

UrbanAirship, the company behind the push-notifications in many of your favorite apps, announced on Tuesday its acquisition of Tello.

Tello streamlines the creation and management of passes for brands in Apple's Passbook. The company launched just a few months ago, on September 19, and already has thousands of customers, including professional sports teams and wireless carriers.

"We've focused on making it easy for all businesses to create and manage Passbook passes, including the industrial strength security and scalability that many require," Joe Beninato, founder and CEO of Tello said in a statement. "We've seen tremendous interest and adoption since launch and are excited t… Continue reading...

More About: apple passbook

10 Online Resources to Prepare for the Mayan Apocalypse
Dec 4th 2012, 17:52

1. 43 Things

Time's running out, so if you're serious about crossing all the items off your bucket list, try using 43 Things. The website lets you make a list of tasks you hope to accomplish. Then it connects you with others who have similar goals both for support and advice.

Click here to view this gallery.

According to the Mayans, the world is coming to an end. That's right, we'll soon be joining all our favorite files, up in the cloud.

You've probably encountered some form of the story by now. The last day on the Mesoamerican Long Count calendar, better known as the Mayan calendar is Dec. 21, 2012 (at least, that's the theory).

It could be a global catastrophe; it could be a transformative evolutionary event; or it could just be another in the long line of days where we all wake up, do some stuff and then go back to sleep. Fortunately, most scientists favor the "nothing's going to happen" theory.

Even though we're probably safe, it never hurts to be prepared. Check out the gallery a… Continue reading...

More About: Watercooler, Year End 2012, apps, features, humor

Seeing Red: 16 Fiery Photos From Mashable Readers
Dec 4th 2012, 17:51


Red outside of the Sign Museum in Cincinnati. -Will Jones

Click here to view this gallery.

This week we were blown away by your red photos in Mashable's Photo Challenge. We asked how you were inspired by the color red, and in response we received images of ancient ruins, passionate dances and awe-inspiring wildlife. Check out some of our favorites above, and let us know which images took your breath away.

You can see all of the submissions here, and make sure you check out the previous selections from silhouette,, urban and giving. By submitting your photos, you'll be eligible to win a Pansonic LUMIX G5 16 Megapixel Compact System Camera. You can find the full rules of the challenge here, and check out the other amazi… Continue reading...

More About: Mashable Photo Challenge Series, Red

Yahoo Acquires OnTheAir to Build Out Mobile Team
Dec 4th 2012, 17:43

Yahoo has acquired live video chat platform OnTheAir for an undisclosed amount, the startup announced on its website Monday.

This is the second known acquisition Marissa Mayer has made since she took over as CEO five months ago, following the acquisition of Stamped in late October.

Like Stamped, Yahoo is acquiring OnTheAir not for the product itself, but for the talent behind it. OnTheAir's CEO Josh Schwarzapel told Mashable that the startup's five-person team will be joining forces with Yahoo's mobile division in San Francisco to begin working on undisclosed projects. OnTheAir will no longer continue to exist as a standalone product.

The relationship between OnTheAir and Yahoo's m… Continue reading...

More About: Yahoo

Schools Use National Novel Writing Month to Turn Students Into Authors
Dec 4th 2012, 17:38

National Novel Writing Month officially concluded Dec. 1 at midnight, with participants from more than 60 countries logging 3.2 billion words.

More About: National Novel Writing Month, Stanford University Founders Are Back for an Encore
Dec 4th 2012, 17:20's co-founders unveiled a new startup Tuesday called Lumi that hopes to change the way people discover content online.

More About: Startups, last fm

How IFTTT is Changing the Way We Do Things on the Web
Dec 4th 2012, 16:56

IFTTT, If This Then That, is a service that lets you connect two different applications together based on specific parameters, which you define.

More About: App, IFTTT, Tech Innovators Series, features, mashable

Evernote Rolls Out Business App in 7 Countries
Dec 4th 2012, 16:50

Evernote launched a premium version of its flagship app on Tuesday geared towards business use.

More About: apps, evernote

Mashable's 10 Biggest Stories of 2012
Dec 4th 2012, 16:47

1. Super Bowl 2012 Commercials: Watch Them All Here

It's okay to admit you watch the Super Bowl just for the ads. The 54 commercials — each 30-second spot sold for $3.5 million — became our most viewed post in 2012.

Click here to view this gallery.

Before you begin making 2013 resolutions, take a moment to savor Mashable's top stories of 2012.

We scoured the web for fake privacy notices and unbelievable photos, covered everything from Apple launches to Gangam Style, all while staying faithful to our digital roots.

SEE ALSO: The 12 Best Memes of 2012

Relive the past twelve months in the gallery above, but be sure to let us know your most memorable headlines in the comments below.

Image courtesy of MarkWilson/Getty Images News/Getty Images

More About: Media, Social Media, Tech, World, Year End 2012, contributor, features

UPDATE: World's First 'Spidernaut' Dies at Smithsonian
Dec 4th 2012, 16:37

'Spidernaut,' a jumping spider that recently spent 100 days aboard the International Space Station as part of an experiment, will now join the Smithsonian.

More About: ISS, Newsy, Smithsonian, videos

No, No, No: 10 Bad Habits of Vintage Santas
Dec 4th 2012, 16:33

1. Santa Smoking

So that's why he's so hungry all the time. "What? I've always admired Colorado for its, like, mountains. And stuff. Dude, why do my hands look so weird right now?" Image courtesy of Flickr, riptheskull

Click here to view this gallery.

Take a look at these old school Santa post cards. Is Santa really as sweet and well-intentioned as we think?

More About: Christmas, Santa, Watercooler, vintage

Facebook Introduces Messenger For Non-Users
Dec 4th 2012, 16:29

Facebook on Tuesday introduced a feature for its Messenger Android app that lets users log on with a name and phone number, rather than having to enter their account info.

In practice, that means that you don't have to have a Facebook account to use Messenger. The feature, which will soon come to iOS as well, is rolling out to Android users in India, Indonesia, Australia, Venezuela and South Africa on Tuesday and will hit other markets "shortly after," according to the company.

The move represents an attempt by Facebook to lure holdouts or customers who deleted their accounts. The app is also an alternative to other SMS apps like GoogleVoice, Kik and WhatsApp, among others. For F… Continue reading...

More About: Facebook, Facebook Messenger, Marketing, Mobile

'Cut the Rope' Makers Announce New Game: 'Pudding Monsters'
Dec 4th 2012, 16:23

ZeptoLab, the makers of mobile smash Cut The Rope, announced Tuesday morning it is releasing its first new franchise in two years: Pudding Monsters.

Pudding Monsters introduces new, cute characters to mobile players. The Pudding Monsters live in a fridge, and are on a mission to save their pudding friend who was taken by a human.

The puzzle-based gameplay is split into levels similar to Cut the Rope. Players must stick the Pudding Monsters together to make them large enough to get through a level, as well as use the special powers of some monsters to get past some objectives. For instance, a Slime Monster leaves a trail of green goo that will be necessary to solve some puzzles. The mo… Continue reading...

More About: Gaming, cut the rope, zeptolab

Nokia Selling Headquarters in Finland for $220 Million
Dec 4th 2012, 16:12

Nokia is selling its Finland headquarters, but they're not moving out.

More About: Finland, Nokia, smartphones

Your Lytro Photos Just Got Upgraded
Dec 4th 2012, 16:10

The Lytro camera made a name for itself through photos that you can refocus after you take them, but that was just the first of many tricks you can do with light-field photography. As of today, Lytro owners will now be able to shift the perspective of their photos as well as add special Instagram-like filters.

The new abilities roll out today via a software update to the Lytro desktop client. For people looking at the photos, though, absolutely no update is needed -- the embeds work just like they always have, allowing viewers to refocus with a click. The only difference is now there's a line about how to use perspective shift: click and hold.

SEE ALSO: Will Lytro Ever Go Mainstream?Continue reading...

More About: Lytro, light-field camera, light-field photography

Responsive & Touch-Friendly Audio Player
Dec 4th 2012, 14:10

Audio Player: Responsive & Touch-Friendly

View demo Download source

You know that feeling when you are in the design heaven of Photoshop (or another maybe not that overpriced app), then come to writing the markup and things like <select>, <input type="radio|checkbox|file" /> throw you back into the harsh reality? Just because the usual CSS styling was not granted to them when God created the earth. Poor <audio> element is no different. Each HTML5-compatible browser has its own visual interpretation of the element.

But we also have events, methods and properties for the <audio> elements, which means it can be manipulated using JavaScript. Experimenting is nice, but all of this would be worthless without practical use. Despite the fact that video is the most popular type of media on the Internet, there are also situations when audio is important or even the major content, think podcasts or websites of musicians. My situation was quite different though.

One of the projects I’m working on is a service of cloud-based IP telephony (VOIP). I’m building a web-based app which enables our clients to manage their telephony using only a web browser. One of the features that the app has is IVR (Interactive Voice Response). Clients can make their own virtual menus by assigning functions to phone buttons and uploading audio files which are played during the call. Wouldn’t it be nice if our clients could check their uploads by listening to them on their laptop or tablet? That’s why I have built a jQuery plugin for a responsive and touch-friendly audio player.

The plugin

Simply put, it’s a jQuery plugin. jQuery users, who are the majority among all of the JavaScript framework users, will be glad to add it to their jQuery library. The jQuery plugin itself would be pretty much useless without the respective CSS which is responsible for the looks and some of the features summarized below.


Don’t confuse this player with the whole media centre like iTunes or so. It is nothing like that. This is a tiny, lightweight player with a very clear purpose: to play a single audio file. I have built it having this credo in mind: “don’t solve problems that do not exist”. You don’t need complex plugins or ugly Flash players with thousands of useless functions to play that damn audio file. Be innovative, be subtle.

How it works

The plugin replaces targeted <audio> elements with some HTML and JavaScript events attached to it.



Smartphone, tablet or thirty inches large display: the player feels fine with any screen size. Without the need of media queries, a simple, fluid layout was adopted. The player is a quite small object so that’s the easiest part. We will look deeper into this later in the article (CSS part).


It is real, alive and you can touch it. The player can be used on touch-capable screens as well. Everything you can do with the cursor, you can also do with your finger. Every action has its touch events defined and enabled.


  • Got JavaScript disabled? No worries, the default browser’s player will do the job.
  • The Volume button hides when volume control is not available (bad for iOS).
  • When the browser does not support the <audio> element entirely or any of the provided audio files, the player then gracefully degrades to a one-button (Play/Pause) <embed /> element based player which will use a third party plugin (mostly Quick Time on Mac, Windows Media Player on Windows) to play the audio.


No animals were harmed in the making of this player. I mean, the looks of the player is all CSS, not a single image is used.


  • The essential Play / Pause and playback progress controls;
  • Volume On / Off / Up / Down controls;
  • Indication of how much of the audio is loaded (buffered).


The player is in no way native, but it fights to be as close to that as possible. Firstly, it behaves according to defined <audio>-element-specific attributes:

  • src specifies the location (URL) of the audio file;
  • autoplay boolean attribute, specifies whether to play the audio when it is ready;
  • loop boolean attribute, specifies whether to play the audio over again, every time it is finished;
  • preload specifies how the audio file should be loaded, values: auto|metadata|none.

If you are familiar with the <audio> element, you may be wondering where the controls attribute is. The thing is, it has nothing to do with the plugin. The attribute is important when JavaScript is disabled in the browser or the plugin could not be loaded as it assures the default is displayed then. Secondly, it accepts child elements of <source> and plays the first browser-compatible audio file.


The minified version of the plugin is just 4KB large small.

How to use it

Enough of the theory, let the fun part begin!

Initial HTML

Nothing special, just the typical usage of the <audio> tag with some of the attributes from the Nativeness section above (remember what was mentioned about the controls):

<audio src="audio.wav" preload="auto" controls></audio>

This will only load the audio.wav file. Be careful with the preload and do not preload too many files at once. Use values none or metadata for a lighter effect.

Feel brave enough? You can autoplay the file when it loads and then loop it:

<audio src="audio.wav" preload="auto" controls autoplay loop></audio>

To support as many browsers as possible you can specify multiple audio formats in this way:

<audio preload="auto" controls>  	<source src="audio.wav" />  	<source src="audio.mp3" />  	<source src="audio.ogg" />  </audio>

Plugin Call

Now that we have this huge and heavy HTML done, let’s add some JavaScript beneath simply by adding a few lines:

  <audio src="audio.wav" preload="auto" controls></audio>  <script src="jquery.js"></script>  <script src="audioplayer.js"></script>  <script>$( function() { $( 'audio' ).audioPlayer(); } );</script>

On the 4th line the plugin is applied to the audio element. You can also target elements using an appropriate method from a really wide range of selectors, for example: <audio class="music"… and then use $( '.music' )….

Besides that, the audioPlayer element has some optional parameters. The most important one is called classPrefix. The passed value becomes a class name for the parent element and class name prefix for child elements. Other parameters may only be advantageous for languages other than English. Using them is easy:

$( 'audio' ).audioPlayer(  {  	classPrefix: 'player', // default value: 'audioplayer'  	strPlay: 'Play', // default value: 'Play'  	strPause: 'Pause', // default value: 'Pause'  	strVolume: 'Volume', // default value: 'Volume'  });

The Magic

Just kidding, there is nothing too magical here. I’m just trying to grab you attention for this important moment. When you call an instance of the plugin, it replaces the <audio> element entirely with the new piece of custom HTML code. There are two types of code: Full – when the audio element and at least one of the given audio files is compatible with the browser:

<div class="audioplayer">  	<audio src="audio.wav" preload="auto" controls></audio>  	<div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>  	<div class="audioplayer-time audioplayer-time-current">00:00</div>  	<div class="audioplayer-bar">  		<div class="audioplayer-bar-loaded"></div>  		<div class="audioplayer-bar-played"></div>  	</div>  	<div class="audioplayer-time audioplayer-time-duration">&hellip;</div>  	<div class="audioplayer-volume">  		<div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>  		<div class="audioplayer-volume-adjust"><div><div></div></div></div>  	</div>  </div>

Moreover, there are three unmentioned class names assigned to the parent element when:

  • audioplayer-playing – audio is being played (e.g. <div class="audioplayer audioplayer-playing">);
  • audioplayer-mute – volume is muted (e.g. <div class="audioplayer audioplayer-mute">);
  • audioplayer-novolume – no volume adjustment is available (e.g. <div class="audioplayer audioplayer-novolume">).

Mini – when the audio element is not supported or none of the given audio files is compatible with the browser:

<div class="audioplayer audioplayer-mini">  	<embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" />  	<div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>  </div>

Sadly, but in this situation the friendship between JavaScript and <embed /> is not great. Therefore, the player gracefully degrades to a simplified one-button (Play and Pause) player. And this is okay for older browsers:

Remember the Adaptiveness paragraph from above? That was the theory and this is the practice.


All that’s left is to apply some styles to the HTML code above! To save your time and make CSS goal-focused, I will not use gradients, shadows and other fancy properties in the code below (but you will find it in the demo). It means if you apply the CSS below, your player will look like this: Some notes before diving into the CSS:

  • We’ll go though the CSS from left to right regarding the player describing each zone in the following order:
    1. Parent element and inner structure
    2. Play / Pause button
    3. Timers
    4. Progress bar
    5. Volume adjuster
  • Almost all size units are ems in order to ensure scalability and consistency. In the comments, following the em, you’ll find their equivalent in pixels when the body font size is 100% (16px).

Parent element and inner structure

*  {  	-webkit-box-sizing: border-box;  	-moz-box-sizing: border-box;  	box-sizing: border-box;  }  .audioplayer  {  	height: 2.5em; /* 40 */  	color: #fff;  	background: #333;  	position: relative;  	z-index: 1;  }    	/* fallback case (read Adaptiveness chapter) */  	.audioplayer-mini  	{  		width: 2.5em; /* 40 */  		margin: 0 auto;  	}    	/* inner elements positioning (helps to achieve responsiveness) */  	.audioplayer > div  	{  		position: absolute;  	}

If you have never used box-sizing: border-box, then it is the right time to start. This is a game-changing technique. Having this and making first-level inner elements position absolute, we will achieve responsiveness. Don’t get what I mean? Check the following scheme:

Tiny elements have a fixed width, and that is totally fine as long as they are tiny, while the progress bar is fluid along with the parent element. There are also more responsive techniques suitable for the player.

Play / Pause button

.audioplayer-playpause  {  	width: 2.5em; /* 40 */  	height: 100%;  	text-align: left;  	text-indent: -9999px;  	cursor: pointer;  	z-index: 2;  	top: 0;  	left: 0;  }  	.audioplayer-mini .audioplayer-playpause  	{  		width: 100%;  	}  	.audioplayer-playpause:hover,  	.audioplayer-playpause:focus  	{  		background-color: #222;  	}  	.audioplayer-playpause a  	{  		display: block;  	}    	/* "play" icon when audio is not being played */  	.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a  	{  		width: 0;  		height: 0;  		border: 0.5em solid transparent; /* 8 */  		border-right: none;  		border-left-color: #fff;  		content: '';  		position: absolute;  		top: 50%;  		left: 50%;  		margin: -0.5em 0 0 -0.25em; /* 8 4 */  	}    	/* "pause" icon when audio is being played */  	.audioplayer-playing .audioplayer-playpause a  	{  		width: 0.75em; /* 12 */  		height: 0.75em; /* 12 */  		position: absolute;  		top: 50%;  		left: 50%;  		margin: -0.375em 0 0 -0.375em; /* 6 */  	}  		.audioplayer-playing .audioplayer-playpause a:before,  		.audioplayer-playing .audioplayer-playpause a:after  		{  			width: 40%;  			height: 100%;  			background-color: #fff;  			content: '';  			position: absolute;  			top: 0;  		}  		.audioplayer-playing .audioplayer-playpause a:before  		{  			left: 0;  		}  		.audioplayer-playing .audioplayer-playpause a:after  		{  			right: 0;  		}  


.audioplayer-time  {  	width: 4.375em; /* 70 */  	height: 100%;  	line-height: 2.5em; /* 40 */  	text-align: center;  	z-index: 2;  	top: 0;  }  	.audioplayer-time-current  	{  		border-left: 1px solid #111;  		left: 2.5em; /* 40 */  	}  	.audioplayer-time-duration  	{  		right: 2.5em; /* 40 */  	}  		.audioplayer-novolume .audioplayer-time-duration  		{  			border-right: 0;  			right: 0;  		}

Progress bar

.audioplayer-bar  {  	height: 0.875em; /* 14 */  	background-color: #222;  	cursor: pointer;  	z-index: 1;  	top: 50%;  	right: 6.875em; /* 110 */  	left: 6.875em; /* 110 */  	margin-top: -0.438em; /* 7 */  }  	.audioplayer-novolume .audioplayer-bar  	{  		right: 4.375em; /* 70 */  	}  	.audioplayer-bar div  	{  		width: 0;  		height: 100%;  		position: absolute;  		left: 0;  		top: 0;  	}  	.audioplayer-bar-loaded  	{  		background-color: #555;  		z-index: 1;  	}  	.audioplayer-bar-played  	{  		background: #007fd1;  		z-index: 2;  	}

Volume adjuster

.audioplayer-volume  {  	width: 2.5em; /* 40 */  	height: 100%;  	border-left: 1px solid #111;  	text-align: left;  	text-indent: -9999px;  	cursor: pointer;  	z-index: 2;  	top: 0;  	right: 0;  }  	.audioplayer-volume:hover,  	.audioplayer-volume:focus  	{  		background-color: #222;  	}  	.audioplayer-volume-button  	{  		width: 100%;  		height: 100%;  	}    		/* "volume" icon */  		.audioplayer-volume-button a  		{  			width: 0.313em; /* 5 */  			height: 0.375em; /* 6 */  			background-color: #fff;  			display: block;  			position: relative;  			z-index: 1;  			top: 40%;  			left: 35%;  		}  			.audioplayer-volume-button a:before,  			.audioplayer-volume-button a:after  			{  				content: '';  				position: absolute;  			}  			.audioplayer-volume-button a:before  			{  				width: 0;  				height: 0;  				border: 0.5em solid transparent; /* 8 */  				border-left: none;  				border-right-color: #fff;  				z-index: 2;  				top: 50%;  				right: -0.25em;  				margin-top: -0.5em; /* 8 */  			}  			.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after  			{  				/* "volume" icon by Nicolas Gallagher, */  				width: 0.313em; /* 5 */  				height: 0.313em; /* 5 */  				border: 0.25em double #fff; /* 4 */  				border-width: 0.25em 0.25em 0 0; /* 4 */  				left: 0.563em; /* 9 */  				top: -0.063em; /* 1 */  				-webkit-border-radius: 0 0.938em 0 0; /* 15 */  				-moz-border-radius: 0 0.938em 0 0; /* 15 */  				border-radius: 0 0.938em 0 0; /* 15 */  				-webkit-transform: rotate( 45deg );  				-moz-transform: rotate( 45deg );  				-ms-transform: rotate( 45deg );  				-o-transform: rotate( 45deg );  				transform: rotate( 45deg );  			}    	/* volume adjuster */  	.audioplayer-volume-adjust  	{  		width: 100%;  		height: 6.25em; /* 100 */  		cursor: default;  		position: absolute;  		left: 0;  		top: -9999px;  		background: #222;  	}  		.audioplayer-volume:not(:hover) .audioplayer-volume-adjust  		{  			opacity: 0;  		}  		.audioplayer-volume:hover .audioplayer-volume-adjust  		{  			top: auto;  			bottom: 100%;  		}  		.audioplayer-volume-adjust > div  		{  			width: 40%;  			height: 80%;  			background-color: #555;  			cursor: pointer;  			position: relative;  			z-index: 1;  			margin: 30% auto 0;  		}  			.audioplayer-volume-adjust div div  			{  				width: 100%;  				height: 100%;  				position: absolute;  				bottom: 0;  				left: 0;  				background: #007fd1;  			}  	.audioplayer-novolume .audioplayer-volume  	{  		display: none;  	}  

That’s it! Check out the demo if you haven’t yet or download the full source.

Be sure to share your thoughts, insights or experience in the comments. Thank you.

View demo Download source

Cloudinary Giveaway: Image Management in the Cloud
Dec 4th 2012, 09:57

In this giveaway you can win one of three Basic Plan registrations (for three months) from Cloudinary worth $120 each.

Cloudinary is a SaaS for image management, which streamlines all your online image management needs. With Cloudinary you can easily upload images to the cloud. Automatically perform smart image resizing, cropping (including face detection based cropping), merging, overlay, watermark, apply effects, rotations, format conversions, without installing any complex software. All your images are then seamlessly delivered through a fast CDN, optimized and using industry best practices. Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with new and existing web and mobile applications.


Features and Benefits of Cloudinary

  • Streamline Your Image Management Pipeline.
  • Vast array of image manipulation capabilities.
  • Virtually limitless scale.
  • Fast image delivery.
  • Improves user experience & website performance.
  • Reduce development costs & times.
  • Useful from early stage startups to large enterprise applications.
  • Easy to integrate with any web development framework.


The Prize

The prize is one of three Cloudinary three months Basic Plan registration (10 GB Storage, 1 Million Images and 40 GB Monthly Bandwidth), worth $120 each

How to enter

All you have to do to get a chance to win is the following:

  • Comment below and tell us why you’d like to try Cloudinary
  • Share this giveaway on a social network of your choice. You can also use this tweet button: You can also use this tweet button: Tweet

Good luck to everybody!

This giveaway will end on December 12, 2012, 10 p.m. GMT+0.

"Creative Sandbox" is a Place for Intelligence to Have Fun
Dec 4th 2012, 08:00

Need some inspiration? Visit the Creative Sandbox newly developed project by Google.

You are receiving this email because you subscribed to this feed at

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions


Social Media Feeds

Twitter Feed

Facebook Posts

ad placement