Mobile-Web-App

Saturday, February 18, 2012

Firebug: a popular and powerful web development tool

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

website: http://getfirebug.com/

jquery-ui-map: Google maps plugin for jQuery and jQuery Mobile

The Google Map version 3 plugin for jQuery and jQM takes away some of the head aches from working with the Google Map API. Instead of having to use Google event listeners for simple events like click, you can use jQuery click events on the map and markers.

It is also very flexible, highly customizable, lightweight (3.3kB or 4kB for the full) and works out of the box with jQuery mobile. But one of its best features (atleast for SEO people) is that you can populate a map from microformats, RDFa or microdata on your site, which can be used as a fallback when a user doesn't have javascript enabled.

Project Home: jquery-ui-map

Friday, February 17, 2012

Control HTML5 video using Javascript

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML5 Video</title>
</head>
<body>

<p>
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
</p>
<video id="video" src="sample.mp4" controls></video>


<script>

var myVideo = document.getElementById("video");
var btnPlay = document.getElementById("play");
var btnPause = document.getElementById("pause");

btnPlay.addEventListener("click", function(){myVideo.play();}, false);
btnPause.addEventListener("click", function(){myVideo.pause();}, false);

</script>

</body>
</html>

Related:
- Play mp3 in HTML5 audio tag

Thursday, February 16, 2012

video on HTML5

It's a minimal HTML5 markup of <video>. Simple include src property to include mp4, controls property specify to include video control such as Play/Pause, time-line, volumn...

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: HTML5 Video</title>
</head>
<body>

<video src="sample.mp4" controls></video>

</body>
</html>

jQuery UI: progressbar

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script>
$("document").ready(function(){
 $("#myProgressBar").progressbar(
  {
   value: 50
  });
  
 $("#ProgressInc").click(function()
  {
   var newvalue = $('#myProgressBar').progressbar("value") + 1;
   $("#myProgressBar" ).progressbar(
    { value: newvalue }
   );
  });
  
 $("#ProgressDec").click(function()
  {
   var newvalue = $('#myProgressBar').progressbar("value") - 1;
   $("#myProgressBar" ).progressbar(
    { value: newvalue }
   );
  });
});

</script>

</head>
<body>

<div id="myProgressBar"></div>
<Label id="ProgressValue"></Label>
<button id="ProgressInc">Progress++</button>
<button id="ProgressDec">Progress--</button>

</body>
</html>

jQuery: checkbox

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script>
$("document").ready(function(){
 $("#myButton").click(function(){
  alert($("#myCheckbox").is(":checked"));
 });
});

</script>

</head>
<body>

<form>
 <input type="checkbox" id="myCheckbox"/>
 <button id="myButton">Click Me</button>
</form>

</body>
</html>

Wednesday, February 15, 2012

jQuery: Button and .click()

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script>
$("document").ready(function(){
 $("#myButton").click(function(){
  alert("Thanks for Click!");
 });
});

</script>

</head>
<body>

<form>
 <button id="myButton">Click Me</button>
</form>

</body>
</html>