Mobile-Web-App

Saturday, May 26, 2012

jQuery for Designers: Beginner's Guide

Part of Packt’s Beginner’s Guide series, each chapter focuses on a specific part of your website and how to improve its design with the use of jQuery. There are plenty of screenshots and practical step-by-step instructions making it easy to apply jQuery to your site. This book is for designers who have the basics of HTML and CSS, but want to extend their knowledge by learning to use JavaScript and jQuery.

Friday, May 25, 2012

jQuery, handle event one time only - .one()

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .one()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){

   $("#clickme").one('click', (function(event){
    alert("'clickme' Clicked!");
   }));
    
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .one()</b></P>

<p id='clickme'>Click Me (accept one time only)</p>
</body>
</html>

jQuery .live() and .die()

Similar to .bind() and .unbind(), .die() remove the handler set by .live().

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .live() and .die()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
  
   //"#clickme" not yet existed
   $("#clickme").live('click', (function(event){
    alert("'clickme' Clicked! and die.()");
    $("#clickme").die('click');
   }));
    
   $("<p id='clickme'>Click Me (accept one time only)</p>").appendTo("#addhere");
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .live() and .die()</b></P>
<div id="addhere"></div>
</body>
</html>

Thursday, May 24, 2012

Web base Interactive g++ compiler - GCC Explorer

GCC Explorer (http://gcc.godbolt.org/) is a web base g++ compiler. You can enter your C++ code and view the assembly output by various version of g++ compiler.

Handle event using .live() in jQuery

jQuery .live() can be used to bind a event handler with a not yet existed DOM elements.

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .live()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
  
   //"#clickme" not yet existed
   $("#clickme").live('click', (function(event){
    alert("'clickme' Clicked!");
   }));
    
   $("<p id='clickme'>Click Me</p>").appendTo("#addhere");
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .live()</b></P>
<div id="addhere"></div>
</body>
</html>

Handle event using .bind() and .unbind() in jQuery

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .bind()/.unbind()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
   $("#clickme").bind('click', (function(){
    alert("'clickme' Clicked! and unbind.");
    $("#clickme").unbind('click');
   }));    
   
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .bind()/.unbind()</b></P>
<p id="clickme">Click Me (accept one time only)</p>
 
</body>
</html>

Handle event using .bind() in jQuery

<!doctype html>
<head>
 <title>Mobile-Web-App: jQuery .bind()</title>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script>
  $(document).ready(function(){
   $("#clickme").bind('click', (function(){
    alert("'clickme' Clicked!");
   }));
   
  });
 </script>
 
</head>
<body>
<p><b>Mobile-Web-App: jQuery .bind()</b></P>
<p id="clickme">Click Me</p>
 
</body>
</html>