Play Audio in the Background Using HTML5 Audio | World Wide What? Posted on August 8th, 2011 in category: Tutorials On of the most interesting new features of HTML5 is the audio support, it allows you to easily play audio using native HTML. This can be very useful for media focused sites but also for just playing simple alert messages from JavaScript when showing dialogs or to notify the user of certain events. A common misunderstanding for users new to HTML5 is that you need the audio HTML tag to be able to play audio.
But that’s not the case at all as there’s also the JavaScript Audio object which allows you to play audio through script, in this tutorial I will show you how to do this. Step 1. The Basic HTML We start of by creating a simple HTML page with four links, one for each playable sound. Step 2. Next we create a script tag inside our page header and add a play function to it. The play function accepts the name of the audio file we want to play as a parameter. Note Example Try out the finished example here: Example. Download. How to build a web widget (using jQuery) - Alex Marandon. Published on 15 June 2010, updated on 10 February 2015, 110 Comments Introduction I created some web widgets for the London’s Design Museum and learned a few useful things in the process.
Although all the necessary information can be found on the web, I couldn’t find a really comprehensive guide about doing this with jQuery so I decided to write this one. I’ll cover only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily. The interesting points will be: ensure the widget’s code doesn’t accidentally mess up with the rest of the page, dynamically load external CSS and JavaScript files, bypass browsers’ single-origin policy using JSONP. Don’t worry if all this doesn’t make sense to you yet, we’ll see in details what these techniques are used for in the context of building web widgets.
That’s really all that a web site owner would need to include our widget on her pages. Can’t it be even simpler? Building JavaScript Widgets | dtsn. Little pieces of JavaScript you embed onto your website are getting more popular. Every major provider of a service on the web also gives you a little widget that you can put on your blog or webpage to promote what you are doing, for example Twitter, Last FM and Digg all provide widgets which are great for you and great for the service. I am going to talk you through the development and pitfalls associated with the design and development of widgets. First and foremost, you need to decide what you want to show with your widget.
Knowing this you can make an educated choice about which method you want to use to create a widget, there are basically two methods associated with widget development. IFrame’s No, iframe’s aren’t dead. Document.write('<iframe src=" width="50" height="50"></iframe>'); To install the widget all you have to do is to point the user at your bit of JavaScript: That's it! Client Side Pitfalls AJAX won’t work! Modernizr. Farbtastic Color Picker. Basic Usage Include farbtastic.js and farbtastic.css in your HTML:<script type="text/javascript" src="farbtastic.js"></script> <link rel="stylesheet" href="farbtastic.css" type="text/css" /> Add a placeholder div and a text field to your HTML, and give each an ID:<form><input type="text" id="color" name="color" value="#123456" /></form> <div id="colorpicker"></div> Add a ready() handler to the document which initializes the color picker and link it to the text field with the following syntax:<script type="text/javascript"> $(document).ready(function() { $('#colorpicker').farbtastic('#color'); }); </script> See demo1.html and demo2.html for an example (jquery.js is not included!).
Styling The color picker is a block-level element and is 195x195 pixels large. Note that the black/white gradients inside wheel.png and mask.png were generated programmatically and cannot be recreated easily in an image editing program. Advanced Usage jQuery Method $(...).farbtastic() $(...).farbtastic(callback) .hsl. Zoomooz.js. Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work.
Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on. You can also add some additional attributes for tuning the animation as data fields of the element: <div class="zoomTarget" data-targetsize="0.45" data-duration="600">This element zooms when clicked on. Target 1 Target 2 Target 3 Target 4.