RSSAll Entries Tagged With: "jquery"

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 !

Thumbnail creation using uploadify.php

Hello friends i came across a good jquery flash file up-loader here . Do use it its simple and powerful .

The next main thing was generation of thumbnail using the same flash uploader after some homework found a solution for it . Do some simple updations in your existing code .

1. Create a folder named “thumbnails” under the upload folder .

2. Replace the code in uploadify.php [you can find it under scripts folder] with the following code .

[php]

if (!empty($_FILES))
{
$tempFile = $_FILES[‘Filedata’][‘tmp_name’];
$targetPath = $_SERVER[‘DOCUMENT_ROOT’] . $_REQUEST[‘folder’] . ‘/’;
$targetFile =  str_replace(‘//’,’/’,$targetPath) . $_FILES[‘Filedata’][‘name’];
move_uploaded_file($tempFile,$targetFile);
echo "1";
}
$imgsize = getimagesize($targetFile);
switch(strtolower(substr($targetFile, -3)))
{
case "jpg":
$image = imagecreatefromjpeg($targetFile);
break;
case "png":
$image = imagecreatefrompng($targetFile);
break;
case "gif":
$image = imagecreatefromgif($targetFile);
break;
default:
exit;
break;
}

$width = 80; //New width of image
$height = $imgsize[1]/$imgsize[0]*$width; //This maintains proportions

$src_w = $imgsize[0];
$src_h = $imgsize[1];

$picture = imagecreatetruecolor($width, $height);
imagealphablending($picture, false);
imagesavealpha($picture, true);
$bool = imagecopyresampled($picture, $image, 0, 0, 0, 0, $width, $height, $src_w, $src_h);

if($bool)
{
switch(strtolower(substr($targetFile, -3)))
{
case "jpg":
header("Content-Type: image/jpeg");
$bool2 = imagejpeg($picture,$targetPath."thumbnails/".$_FILES[‘Filedata’][‘name’],80);
break;
case "png":
header("Content-Type: image/png");
imagepng($picture,$targetPath."thumbnails/".$_FILES[‘Filedata’][‘name’]);
break;
case "gif":
header("Content-Type: image/gif");
imagegif($picture,$targetPath."thumbnails/".$_FILES[‘Filedata’][‘name’]);
break;
}
}

imagedestroy($picture);
imagedestroy($image);

echo ‘1’;

[/php]

You are done ! Hope it helped you .

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 .