Mobile-Web-App

Monday, June 25, 2012

HTML5 details and summary

HTML5 provides <details> and <summary> to create an interactive widget that shows and hides some content.

Please note that not all browser support <details> and <summary>, it's the screen shot run the example on Google Chrome.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 details</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 details</h1>
 
<details>
 <summary>details</summary>
 <p>The details element represents a disclosure widget from which the user can obtain additional information or controls.</p>
</details>

</body>
</html>

Saturday, June 23, 2012

Google lower price of Google Maps API

Google lower Maps API usage fees and simplifying limits for both Styled and regular maps. Here are the details:

Changes to pricing. While the Maps API remains free for the vast majority of sites, some developers were worried about the potential costs. In response, we have lowered the online price from US $4 per 1,000 map loads to 50¢ per 1,000 map loads.
Simplified limits. We’re eliminating the previous distinction between Styled Maps and regular unstyled maps. The same usage limits and pricing now apply to applications using Styled Maps and the default Google Maps style.

Source: Google Geo Developers Blog -Lower pricing and simplified limits with the Google Maps API

Wednesday, June 20, 2012

Creating Your First Ubuntu App

A tutorial for how to create you first Ubuntu application. The tutorial shows how to create a simple web browser by generating a project, setting up your user interface, writing the code, and creating an Ubuntu package.

css exercise: text shadow

Example to apply shadow on text with css.

text-shadow: x y blur-amount colour;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: test css</title>
<style>

h1{
 text-shadow: 10px 10px 15px #aaa;
 color: #000;
 font: 200% Arial;
 font-weight: bold;
 
}

</style>
</head>
<body>
<h1>Mobile-Web-App: CSS Exercise - text shadow</h1>

</body>
</html>

Saturday, June 16, 2012

jsFiddle - an online editor for web snippets.

jsFiddle is a playground for web developers, a tool which may be used in many ways. You can use it as an online editor for snippets build from HTML, CSS and JavaScript.

Play jsFiddle online: http://jsfiddle.net/

Chrome App version is available in Chrome Web Store here.

Tuesday, June 12, 2012

jQuery fadeIn effect

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script>
  $(document).ready(function(){
    $("#myimage").hide();
    $("#myimage").fadeIn("slow");
  
  }) 

  </script>
</head>
<body>
<p>fadeIn</p>
<img id="myimage" src="http://goo.gl/BlQEX"/>

</body>
</html>

Friday, June 8, 2012

Load Flickr images and display in horizontal scroll bar, using jQuery

The former "Load Flickr image in JSON format, using jQuery - display in <ul>". In this version, it's modified to display in horizontal scroll bar.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script>
  $(document).ready(function(){    

    $.getJSON(
      "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
      { format: "json"},
        function(data){  
          var number_of_image = 0;
          $.each(data.items, function(i,item){  
            var new_img = $(document.createElement("img")); 
            new_img.attr("src", item.media.m); 
            new_img.css({"width": 150, "height": 150, "margin": 5});    
            $("#flickrimage").append(new_img);
            
            number_of_image++;
            
          }); 

          $("#flickrimage").css({"width": number_of_image * 160});       
        }
      );
      
  
  }) 

  </script>
</head>
<body>
<p>Display Flickr images in horizontal scroll bar</p>
<div style="width:800px; height: 180px; overflow:scroll;">
<div id="flickrimage">
</div>
</div>
</body>
</html>