<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i can code! for Web.</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'name');
data.addColumn('number', 'data');
data.addRows(5);
data.setValue(0, 0, 'A');
data.setValue(0, 1, 50);
data.setValue(1, 0, 'B');
data.setValue(1, 1, 50);
data.setValue(2, 0, 'C');
data.setValue(2, 1, 50);
data.setValue(3, 0, 'D');
data.setValue(3, 1, 25);
data.setValue(4, 0, 'E');
data.setValue(4, 1, 25);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Google Chart Tools - Visualization: Pie Chart"});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
Wednesday, September 28, 2011
Using Google Chart Tools - Visualization: Pie Chart
It's a example of using Google Chart Tools - Visualization: Pie Chart.
Labels:
Google Chart Tools,
JavaScript
Tuesday, September 27, 2011
jQTouch
jQTouch is a jQuery plugin for mobile web development on the iPhone,
Android, iPod Touch, and other forward-thinking devices.
http://jqtouch.com/
Android, iPod Touch, and other forward-thinking devices.
http://jqtouch.com/
Labels:
jQTouch
Sunday, September 25, 2011
Targeting screen sizes by using media queries
In this exercise, we have two css files, desktop.css and mobile.css. In our HTML, dualcss.html, we will load the suitable css according to the browser width (not the device screen width in this exercise).
desktop.css
mobile.css
dualcss.html
desktop.css
body {
font-size: 50px;
font-weight: bold;
font-family: Arial;
}
a { font-style: italic; }
h1 {
font-size: 50px;
font-weight: bold;
font-family: Arial;
}
mobile.css
body {
font-size: 10px;
font-weight: bold;
font-family: Arial;
}
a { font-style: italic; }
h1 { font-style: italic; }
dualcss.html
<html>
<head>
<title>i can code! for Web: Dual CSS</title>
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
</head>
<body>
<h1>i can code! for Web: Dual CSS</h1>
<p><a href="http://icancode-4-web.blogspot.com/">http://icancode-4-web.blogspot.com/</a></p>
</body>
</html>
Saturday, September 24, 2011
Yahoo! Site Explorer transition to Bing Webmaster Tools
Bing Webmaster Tools are supporting the Yahoo! Site Explorer community. Webmasters should now be using the Bing Webmaster Tools to ensure that their websites continue to get high quality organic search traffic from Bing and Yahoo!.
Since the middle of August 2011, the Bing Webmaster Tools have also been integrating traffic data from Yahoo! into its reports. Please check out the Bing Webmaster blog post for more information.
Since the middle of August 2011, the Bing Webmaster Tools have also been integrating traffic data from Yahoo! into its reports. Please check out the Bing Webmaster blog post for more information.
Labels:
info
Friday, September 23, 2011
IE 9 Guide for Developers
The Internet Explorer 9 Guide for Developers provides a look at the features and improvements in Internet Explorer 9. By using this guide, web developers and designers can take full advantage of these enhancements.
link: http://msdn.microsoft.com/en-us/ie/ff468705
Labels:
Development Tools
Wednesday, September 21, 2011
Developer Preview of Google+ Hangouts API
Google announced developer preview of Google+ Hangouts API, The Google+ Hangouts API allows you to develop collaborative apps that run inside of a Google+ Hangout. Hangout apps behave much like normal web apps, but with the addition of the rich, real-time functionality provided by the Hangouts APIs. Apps have the ability to control aspects of the user interface, synchronize data between hangout participants, and respond to various events in the hangout.
Getting started is easy. First, build your app or just start with one of the pre-built examples. Next, register it in the APIs Console, and tell us who on your team should be able to load your app. Then, start a hangout with your app!
http://developers.google.com/+/hangouts/
Labels:
news
Saturday, September 17, 2011
Define callback functions
It's a example show how to define callback function; for example, open, close.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){
var functionOK = function(){
alert("OK");
},
functionCancel = function(){
alert("Cancel");
},
Options = {
open: function() {
alert("callback function - open");
},
close: function() {
alert("callback function - close");
},
title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
buttons:{
"OK": functionOK,
"Cancel": functionCancel
}
};
$("#myDialog").dialog(Options);
})(jQuery);
</script>
</body>
</html>
Set dimensions of jQuery UI dialog
To set dimensions of jQuery UI dialog, we can use options of width, height, minWidth, minHeight, maxWidth, maxHeight.
example:
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){
var functionOK = function(){
alert("OK");
},
functionCancel = function(){
alert("Cancel");
},
Options = {
width: 300,
height: 200,
minWidth: 200,
minHeight: 200,
maxWidth: 600,
maxHeight: 250,
title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
buttons:{
"OK": functionOK,
"Cancel": functionCancel
}
};
$("#myDialog").dialog(Options);
})(jQuery);
</script>
</body>
</html>
Tuesday, September 13, 2011
Add buttons in jQuery UI dialog
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){
var functionOK = function(){
alert("OK");
},
functionCancel = function(){
alert("Cancel");
},
Options = {
title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>",
buttons:{
"OK": functionOK,
"Cancel": functionCancel
}
};
$("#myDialog").dialog(Options);
})(jQuery);
</script>
</body>
</html>
Set linkable title on jQuery UI dialog
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){
var Options = {
title: "<a href='http://icancode-4-web.blogspot.com/'>i can code! for Web.</a>"
};
$("#myDialog").dialog(Options);
})(jQuery);
</script>
</body>
</html>
Monday, September 12, 2011
Example of jQuery UI - Dialog
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/smoothness/jquery-ui.css">
<title>jQuery UI Dialog</title>
</head>
<body>
i can code! for Web.
<div id="myDialog" title="My Dialog">
Test Dialog of jQuery UI
</div>
<script>
(function($){
$("#myDialog").dialog();
})(jQuery);
</script>
</body>
</html>
Sunday, September 11, 2011
Apply style on div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test CSS</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}
#background{
background: #a0a0a0;
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
}
#reddot {
background: #f00;
position: absolute;
width: 30px;
height: 30px;
left: 185px;
top: 135px;
border-radius: 15px;
}
</style>
</head>
<body>
<h1>i can code! for Web</h1>
<center>
<div id="background">
<div id="reddot"></div>
</div>
</center>
</body>
</html>
Labels:
CSS
Saturday, September 10, 2011
Load jQuery from web page, without download.
To load jQuery, we can add the code below:
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
example:
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
example:
<html>
<head><title>Test CSS</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }
</style>
</head>
<body>
<h1>i can code! for Web</h1>
<p>Load something here...</p>
<script>
$(function(){
alert("Hello, from i can code! for Web.\n"
+ "jQuery loaded.");
});
</script>
</body>
</html>
Labels:
JavaScript,
jQuery
Wednesday, September 7, 2011
Link css in separated file
It have same output as last post Simple usage of css, with css in separated file.
mycss.css
<html>
<head><title>Test CSS</title>
<link rel="stylesheet" href="mycss.css" type="text/css">
</head>
<body>
<h1>i can code! for Web</h1>
<p>Test CSS</p>
</body>
</html>
mycss.css
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }
Labels:
CSS
Simple usage of css
<html>
<head><title>Test CSS</title>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 24pt helvetica}
p { font-size: 20px; }
</style>
</head>
<body>
<h1>i can code! for Web</h1>
<p>Test CSS</p>
</body>
</html>
Related Post:
-Link css in separated file
Labels:
CSS
HTML5 Rocks - A resource for open web HTML5 developers
Labels:
Development Tools
Safari Developer Tools Guide (former Safari User Guide for Web Developers)
Safari 4.0 and later includes built-in tools such as the Web Inspector to help you prototype, analyze, debug, and optimize websites and web applications. Safari 5.0 and later has additional tools you can use to develop and debug Safari extensions.
Safari has tools for prototyping HTML, CSS, and JavaScript, tools for interactively inspecting and debugging elements, attributes, properties, and styles, an integrated JavaScript debugger, and optimization tools such as audits, a latency and download timeline, and a JavaScript profiler.
These tools are built into Safari on the desktop (Mac OS X and Windows) and you can enable them in other Webkit-based applications. A subset of the tools are available in Safari on iOS-based devices (iPhone, iPad, and iPod touch).
Know more: Safari Developer Tools Guide (former Safari User Guide for Web Developers)
Labels:
Development Tools
Subscribe to:
Posts (Atom)