Mobile applications come in numerous form factors these days. Wouldn’t it be nice to be able to write an application that can respond to the operating environment so that it always looks its best? In this video excerpt from Jon Flanders course Building Hybrid Mobile Applications with HTML5 you’ll see how to use the new CSS3 media query to create page that can reformat itself based on screen size and even play audio queues along the way. In the full course Jon goes on to cover topics such as designing the native application shell, using mobile friendly content, handling touch gestures, and offline scenarios.
Jon is the author of RESTful.NET from O’Reilly, as well as Essential ASP for Addison-Wesley, and was a co-author of Mastering Visual Studio.NET for O’Reilly. Jon’s current major interest is helping people to understand the advantages of REST.
If you’d like to learn how to make responsive mobile applications that can run in a number of different environments, check this course out now. Got any tips for creating your own mobile apps? Hit the comment links and share your knowledge with the rest of the world.
You can watch the full HD version of this video along with the other 2 hrs 40 min of video found in this professional course by subscribing to Pluralsight. Visit Building Hybrid Mobile Application with HTML5 to view the full course outline. Pluralsight subscribers also benefit from cool features like mobile apps, full library search, progress tracking, exercise files, assessments, and offline viewing. Happy learning!
Q: What is styleMedia? Can you write the code snippet showing what it is and where it is used?
// @media aquery demo play media when screen is resized
// source: http://blog.pluralsight.com/2012/03/27/video-make-your-mobile-applications-responsive-with-html5-and-css3/
// script
$(document).ready(function() {
$(window).resize(function() {
if(‘styleMedia’ in window && window.styleMedia.matchMedium(“screen and (max-width: 768px)”)){
$(‘#ooh’)[0].play();
}
else
{
$(‘#aah’)[0].play();
}
});
});
//HTML5
<audio id=”ooh”><source src=”ooh.mp3″ type=”audio/mp3″></source></audio>
<audio id=”aah”><source src=”aah.mp3″ type=”audio/mp3″></source></audio>
P.S. this is the best demo for responsive design yet, thank you (I’ve reposted so the entire snippet that included HTML5 will hopefully show, please disregard earlier posts and allow this one to go through so others can read the entire context of what you helped us to learn) And keep on grooving with that Jimmy Page stuff
Hi – thanks! StyleMedia is an object that lives on the window object in the DOM.
The [if 'styleMedia' in window ] code is there to make sure that this browser supports that object before I try to use it.
The styleMedia object is a way to programmatically run a media query. I’m using it in this case to play the mp3 files when the viewport of the browser changes. Normally I’d want these rules in my css declaratively – but there isn’t any styles associated with the audio tag that allows me to start and stop its audio with css properties. So its a good example of when you might need to put media queries into code. This video snippet is from the first module of my course – in the second module I go into much more detail on media queries and styleMedia.
Cheers
Jon
I am exicited about HTML5 but Flash can do all these things.html5 can do in a better way.Creating slideshow in HTML5! wow! what, flash did that 10 years ago! It is very easy to create a flash animation, for example a ball bouncing in flash professional in less than am minute. Javascript is a mess when compared to AS3.html5 player