RSSAll Entries Tagged With: "twitter"

Live Character Counter as in Twitter using Jquery

In this tutorial i would explain how to implement live character counter using Jquery .

The package contains only a single file with 3parts a css part , javacript part and an html part

[css]

#bar
{
background-color:#5fbbde;
width:0px;
height:16px;
}
#barbox
{
float:right;
height:16px;
background-color:#FFFFFF;
width:100px;
border:solid 2px #000;
margin-right:3px;
-webkit-border-radius:5px;-moz-border-radius:5px;
}
#count
{
float:right; margin-right:8px;
font-family:’Georgia’, Times New Roman, Times, serif;
font-size:16px;
font-weight:bold;
color:#666666
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

[/css]

Include jquery.js before you use the script .

[javascript]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

[/javascript]

[javascript]

$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 – box.length;

if(box.length <= 145)
{
$(‘#count’).html(count);
$(‘#bar’).animate(
{
"width": value+’%’,
}, 1);
}
else
{
alert(‘ Full ‘);
}
return false;
});

});

[/javascript]

[html]

<div style="width:470px;margin-top:100px;">
<div id="count" align="right">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<strong><lable>Enter Text : </label><strong><textarea id="contentbox"></textarea>

[/html]

You are done !

Update Timeline using Jquery as in Twitter | Live Twitter Search using PHP

Hello friends back to blogging after sometime .  Recently i got a mail from one of my friend asking about how can we update a timeline using an animation effect as in twitter timeline .

Here i am giving you a code in jquery that would help you to implement the same .

The package contains 3 main files . 1.index.php 2.search.php and a 3.twitterapi.php

code within index.php

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Twitter Search Flow</title>
<style type="text/css">
.woork{
color:#444;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width:600px;
margin: 0 auto;
}
.twitter_container{
color:#444;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width:450px;
margin: 0 auto;
background:#DEDEDE;
padding:8px;
}
.twitter_container a{
color:#0066CC;
}
.twitter_status{
height:60px;
padding:6PX;
border-bottom:solid 1px #DEDEDE;
background:#FFF;
}
.twitter_image{
float:left;
margin-right:14px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;
}
.twitter_small{
font-size:11px;
padding-top:4px;
color:#999;
display:block;
}
#twitter-results{padding-top:8px;}
</style>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var twitterq = ”;

function displayTweet(){
var i= 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element =  $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){
window.setTimeout(function () {
clearInterval(myInterval);
});
}

},2000);
}

$("form#twittersearch").submit(function() {
twitterq = $(‘#twitterq’).attr(‘value’);

$.ajax({
type: "POST",
url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}
});
return false;
});

});

</script>
</head>

<body>
<div>
<strong>Try to search something on twitter:</strong><br />
<br/>
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button></form>
<div id="twitter-results"></div>
</div>
</body>
</html>

[/html]

code within search.php

[php]

include(‘twitterapi.php’);

if($_POST[‘twitterq’]){
$twitter_query= $_POST[‘twitterq’];
$search = new TwitterSearch($twitter_query);
$results = $search->results();

foreach($results as $result){
echo ‘<div style="display:none;">’;
echo ‘<img src="’.$result->profile_image_url.’">’;
$text_n=toLink($result->text);
echo $text_n;
echo ‘<span>’;
echo ‘<strong>From:</strong> <a
href="http://www.twitter.com/’.$result->from_user.’">’.$result->from_user.'</a>:
‘;
echo ‘<strong>at:</strong> ‘.$result->created_at;
echo ‘<input type="hidden" value="’.$result->id.’"></input>’;
echo ‘</span>’;
echo ‘</div>’;
}
}

[/php]

Download the source package for jquery.js and twitterapi.php .