Twitter History Search

Easy way for searching your twitter history

Big Words

Inspired by iphone Big Words,Not ask why I build it, and what function!!!!

Multiple Search

This website help you to compare different search results.

Fill in the Blank Generator

This application is useful tool to reduce teacher workload.

Advertise

Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Saturday, 8 September 2012

Get Your tweets

Saturday, September 08, 2012 0 comments



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.
  1. User need to type user ID (default : Obama)
  2. click "get Your tweet" button"
  3. retrieve recent tweet

What I ignore ?

  1. Page function
  2. 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);     
    }
}

Read More

Monday, 3 September 2012

HTML5 - GEOLOCAITON

Monday, September 03, 2012 , , 0 comments

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 JavaScriptchapter 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>

Read More

Jquery Test Beds

Monday, September 03, 2012 0 comments




All the code from JavaScript & jQuery: The Missing Manual
if it face any copyright problem,please contact me, I will delete it.

 Test item:
  1. regex_tester
  2. array_methods
  3. selectors
  4. content_functions
  5. effects
  6. events



Read More

Sunday, 2 September 2012

Zoom in Zoom out (Pure CSS)

Sunday, September 02, 2012 , 0 comments

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

Read More

Friday, 31 August 2012

Window onblur & focus

Friday, August 31, 2012 , 0 comments


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

Read More

HIGHLIGHT RELATIVE IMAGE

Friday, August 31, 2012 0 comments

desc

when mouse hover paragraph A, image A will be added border

demo

Source Code

Read More

Sunday, 26 August 2012

JAVASCRIPT - OBJECT

Sunday, August 26, 2012 , 0 comments


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

Read More