Monday, 10 December 2012
Sunday, 2 December 2012
Sunday, 21 October 2012
Multiple Search
Multiple Search is a very useful website that it provide all search result in on e page. It is quit convenient when you want to compare several item. With this website,you cant save time for travel in many tab for comparing different search result
Tuesday, 2 October 2012
Fill in the Blank Generator 2
The new Version of Fill in the Blank Generator support two new feature.
Now you can manual pick up words or sentence in the article.
And the most powerful function is .........................article analysis.
after you click analysis button, this application will find out all part of speech of each words.
So What? oh~well, that mean this application can pick up the words base on part of speech. for example,you can create exercise to test student knowledge of verb.
Saturday, 22 September 2012
Fill in the blank Generator
why I develop this tool? I want to speed up the progress of producing fill in the blank exercise to students.
Traditionally,how many step for creating fill in the blank exercise?
May be too many step.First, the teacher need to find or type essay.Then, they need to think which word should pick up.Finally, they need to replace picked word with underline and question no......
Above progress is quit slow and boring.Can teacher find some tool to speed up this progress.
Therefore, I develop "Fill in the blank Generator" to teacher.
Tuesday, 11 September 2012
Make website faster(feel or look like)
What we Focus Today
Want website look like faster?provide visual feedback faster? load DOM first! put javascript and css file at the bottom
we can make website loading faster by changing a lot thing.Such as Minimize HTTP Requests,Use a Content Delivery Network.......(want more? go to Best Practices for Speeding Up Your Web Site)
But today,we just do some little trick, let user feel faster.
So how to do that? we just put our external link(like css or javascript) at the bottom of file.After that, the browser will load the DOM fist, then it load external file.When we do that,user can get response as soon as possible. Otherwise,browser load javascript file,css first, it require a lot of time(as CDN network may be down, file is too big).
the philosophy behind that ,when user browse website, what they can see? just html page, CSS? javascript? they can can't "see".
HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience. by Best Practices for Speeding Up Your Web Site
DrawBack
if you put CSS file at the bottom,user may see the page without any style,layout. If you produce some javascript or jquery function to hide some image or paragraph, and you put javascript file at the bottom, the page will show all thing that you want to hide, then hide it.Conclusion
Before you put external link at the bottom, you should decide put what file carefully. the file about visual effect, you should put it at the topMonday, 10 September 2012
Regex Colorizer - syntax highlighter
Source from Regex Colorizer
apply to blogger
- go to "Template tab" -> click "Edit html"
- find </head>
- add below code to above </head>
- find <body> repleace <body> with :
- when you want to highlight some code
<!---start regex-colorizer.js--> <script src='http://stevenlevithan.com/regex/colorizer/regex-colorizer.js' type='text/javascript'/> <link href='http://stevenlevithan.com/regex/colorizer/themes/nobg.css' rel='stylesheet' type='text/css'/> <!---end regex-colorizer.js-->
<body onload='RegexColorizer.colorizeAll()'>
<pre class="regex"> you some code </pre>
Demo
View:
- click result tab to see highligher effect
- click html tab to see html code
- click source tab to see source
Saturday, 8 September 2012
Get Your tweets
Install location : after download file,please put it at your server folder.like htdocs(MAMP and WAMP).
What I want to Do ?
this app is simple web app to retrieve recent tweets from someone.- User need to type user ID (default : Obama)
- click "get Your tweet" button"
- retrieve recent tweet
What I ignore ?
- Page function
- Auto Update
Code focus
//BarackObama is user id you enter //callback=updateTweets is function we call to handle json data "http://twitter.com/statuses/user_timeline/BarackObama.json?callback=updateTweets";
Data we Retrieve(json) fragment
"in_reply_to_status_id":null,
"in_reply_to_user_id_str":null,
"id_str":"244873182916526080",
"retweet_count":373,
"favorited":false,
"truncated":false,
"source":"\u003Ca href=\"http:\/\/www.barackobama.com\/\" rel=\"nofollow\"\u003EObama for America\u003C\/a\u003E",
"created_at":"Sun Sep 09 19:01:30 +0000 2012",
"possibly_sensitive_editable":true,
"id":244873182916526080,
"in_reply_to_screen_name":null,
"text":"Easy: Pick out your favorite bumper sticker and we\u2019ll get it in the mail. http:\/\/t.co\/H4h9qc6e"
Hot to handle data
//tweet. + data you want to
//tweet.id_str = 244873182916526080
var data = tweet.text.replace("\"", "'");
var date = tweet.created_at ;
Back to Our code
$(function(){
$("#tweet").toggle();
function getInput(){
$("#get").click(function(){
//retreive data from $("input:text")
var id = $("input:text").val();
//apply id to src => create complete address for sending request
var src = "http://twitter.com/statuses/user_timeline/"+id+".json?callback=updateTweets";
// create new script element and apply to <
<body>
var script = '<
<script src='+src+'><
</script>';
$(script).appendTo('body');
// append user id to paragraph
var name = "<
<h2>"+id+"<
</h2>";
$(name).appendTo("#name");
$("#tweet").toggle();
$("#input").toggle();
});
}
getInput();
});// end ready
function updateTweets(tweets) {
var tweetsSelection = $("#tweet");
for (var i = 0; i <
< tweets.length; i++) {
var tweet = tweets[i];
var data = tweet.text.replace("\"", "'");
var date = tweet.created_at ;
var row = "<tr><td>"+date+"</td><td>"+data+"</td></tr>";
tweetsSelection.append(row);
}
}
Monday, 3 September 2012
HTML5 - GEOLOCAITON
Desc
The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.code from Head First HTML5 Programming: Building Web Apps with JavaScript
chapter 5 Making your HTML location aware: Geolocation
Source Code - Javascript
window.onload = getMyLocation;
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
displayLocation,
displayError);
}
else {
alert("Oops, no geolocation support");
}
}
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = $("#location");
div.html("You are at Latitude:" + latitude + ", Longitude: " + longitude);
}
function displayError(error) {
var errorTypes = {
0: "Unknown error",
1: "Permission denied",
2: "Position is not available",
3: "Request timeout"
};
var errorMessage = errorTypes[error.code];
if (error.code == 0 || error.code == 2) {
errorMessage = errorMessage + " " + error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMessage;
}
Source Code - html
<!doctype html> <html> <head> <title>Where am I?</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="myLocj.js"></script> <link rel="stylesheet" href="myLoc.css"> </head> <body> <div id="location"> Your location will go here. </div> </body> </html>
Jquery Test Beds
All the code from JavaScript & jQuery: The Missing Manual
if it face any copyright problem,please contact me, I will delete it.
Test item:
Sunday, 2 September 2012
Zoom in Zoom out (Pure CSS)
Feature
- Pure CSS
- When your mouse cursor hover Image A, it will be bigger.
- Jquery hover function
- When your mouse click "+/-" button, click it zoom in. when zoom in, click it again -> zoom out
Code Focus
//for image A pure CSS
#t1:hover,.zoom_in
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}
//for Image B Jquery function
$(function() {
$(":button").click(function() {
$("#t2").toggleClass("zoom_in");
}); //end click
}); //end ready
Demo
Source Code
Friday, 31 August 2012
Window onblur & focus
Desc
When this window is focused or blurred, a message will appear below telling you when you left and when you came back:Demo
Source Code
LINKING PAGES USING BUTTNONS
Alert
Some time from SEO angle linking using a button is not a good idea as we loose the anchored text advantage of hyper linking.Demo
Source Code
Sunday, 26 August 2012
JAVASCRIPT - OBJECT
Intro
Today, I would like to show you how to create an object with javascript. all the resource come from: Head First jQuery
ch6 jQuery and JavaScript Luke jQuery, I am your father!
Tutorial
use full screen will be better.
Demo
Entire Code
Friday, 24 August 2012
WINDOW OPEN & CLOSE
Focus
- window.open()
- window.print()
compatibility: firefox would not support this close current window
Reason: firefox can't close windows it didn't create. it can close any window that it open.
Reason: firefox can't close windows it didn't create. it can close any window that it open.
main code:
//window.print()
onclick="javascript: window.print();"
//window.open()
onclick="javascript:
var win = window.open('', '_self');
win.close();return false;"
Entire Source code
Head up! only HTML,CSS and result are available
