Grab the RSS feed

Hi Friends,
Some times we need to give the indication to the user on their interaction.

For example if you take the signup process there are lot of inputs needed to get the information from user.

At that time if we use the text with in the textbox and when user clcks on the text box and if the text is disappeared it is more useful to user and he didn't get upsite.

For that purpose we can use Jquery watermark text.

Here you can find the example for Jquery water mark text



<  !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=utf-8" / >  
<  title >  Water Mark With Jquery<  /title >  
<  script type="text/javascript" src="jquery/jquery-1.3.2.min.js" >  <  /script >  
<  script type="text/javascript" src="jquery.watermark.js" >  <  /script >  
<  script >  
$(document).ready(function(){
$('#textareaforwatermark').watermark('Here, if you click the text will be disappear');
});
<  /script >  
<  /head >  
<  body >  
<  textarea id="textareaforwatermark" style="color:#999999" >  <  /textarea >  
<  /body >  
<  /html >  



you can find Jquery water mark on here


Give your valuable feedback

On mouseover zoom the image using Jquery

Hi friends,
In this tutuorial I am going to told how to zooming the image when you mouseover on that image .
Now a days the Jquery beaten the flash.This is one best example for that.

In this tutorial I am using the Jquery plugin bubbleup.

Here all the credits goes to AEX

<!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=UTF-8" / >
<title >Learning jQuery: Your First jQuery Plugin is BubbleUP</title >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" ></script >
<script type="text/javascript" src="js/bubbleup.jquery.js" ></script >
<script type="text/javascript" >

$(function(){

$("ul#menu li img").bubbleup({tooltips: true});

});

</script >
<style type="text/css" >
<!--
body {
background-color: #EDEDED;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
margin: 0px;
padding: 0px;
}

div#content {
width: 1024px;
margin: 50px auto 0px auto;
text-align: center;
}

h3 {
margin-bottom: 50px;
}

ul#menu {
margin: 5px 0px;
}

ul#menu li {
padding: 0px;
display: inline-block;
*display: inline; /* IE 7 and below */
position: relative;
margin-left: 5px;
margin-right: 5px;
width: 48px;
height: 48px;
}

ul#menu li img {
width: 48px;
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0 8px 0 0;
border: none;
}

-- >
</style >
</head >
<body >

<div id="content" >
<ul id="menu" >
< li > <a href="http://feeds2.feedburner.com/prlamnguyen" ><img src="images/feed.png" alt="Full RSS Feed" ></a > </li >
< li > <a href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" > <img src="images/email.png" alt="E-Mail Delivery" ></a > </li >
< li > <a href="http://twitter.com/" > <img src="images/twitter.png" alt="Follow me on Twitter" ></a > </li >
< li > <a href="http://facebook.com/" > <img src="images/facebook.png" alt="I'm on FaceBook" ></a > </li >
< li > <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/, 'delicious','toolbar=no,width=550,height=550'); return false;" > <img src="images/delicious.png" alt="Save it!" ></a > </li >
< li > <a href="http://technorati.com/" > <img src="images/technorati.png" alt="Favorite this blog" ></a > </li >
</ul >
</div >                        
</body >
</html >


Here is jquery

(function($){
$.fn.bubbleup = function(options) {

//Extend the default options of plugin
var opts = $.extend({}, $.fn.bubbleup.defaults, options);
var tip = null;


return this.each(function() {   

//Set the option value passed here
var $tooltip = opts.tooltips; 



$(this).mouseover(

function () {

if($tooltip) {

tip = $('
' + $(this).attr('alt') + '
'); tip.css({ fontFamily: 'Helvetica, Arial, sans-serif', color: '#333333', fontSize: 12, fontWeight: 'bold', position: 'absolute', zIndex: 100000 }); tip.remove().css({ top: 0, left: 0, visibility: 'hidden', display: 'block' }).appendTo(document.body); //Get the width and height of current image item var position = $.extend({}, $(this).offset(), { width: this.offsetWidth, height: this.offsetHeight }); //Get the width and height of the tip element var tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight; //Set position for the tip to display correctly //Postion: top and center of image tip.stop().css({ top: position.top - tipHeight, left: position.left + position.width / 2 - tipWidth / 2, visibility: 'visible' }); tip.animate({ top: "-=24", }, 'fast'); } $(this).stop(); $(this).css({'z-index' : 100, 'top' : 0, 'left' : 0, 'width' : 48}).animate({ left: "-=24", top: "-=24", width: 96 }, 'fast'); } ).mouseout( function () { if($tooltip) { tip.remove(); } $(this).stop(); $(this).animate({ left: 0, top: 0, width: 48 }, 'fast', function() { $(this).css({'z-index' : 0}); } ); } ); }); }; $.fn.bubbleup.defaults = { tooltips: false } })(jQuery);


you can download original files with image from here

Leave the comment to improve us....

Conver video format to flv and play a video like youtube

Hi friends,
This is the program we can upload the video file in any format and it will convert it into the flv format and also it will take the snapshot of video for displaying the video in the player before it's going to be done.

For that here we need to configure the ffmpeg into the local server.This ffmpeg will conver the video file into the flv format and also it will take the snapshot of video and it will store the image.

Here I put the $image_name ie. before we need to store the image we put the name for image.Here I take the name from video and simply append the jpg.
Similarly for the video name and make the video name with the .flv I simply append the video name with .flv.

For storing the image and video I create one folder named 'uploads'.Here I use the Image path and media path for the destination.in this destination its going to be saved after convert the video to flv and took the snapshot.

The source folder is where we upload the video.Once I get the video and snapshot I delete the original video from the source.





< !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=utf-8" / > 
< title > Video Upload< /title > 
< /head > 

< body > 



< form action="" method="post" enctype="multipart/form-data" > 
< table width="400" cellpadding="3"  > 
< tr > 
< td colspan="3" >  < /td > 
< /tr > 
< tr > 
< td width="10" rowspan="2" >  < /td > 
< td width="120" > < strong > Choose a file to upload:< /strong > < /td > 
< td width="242" > < input type="file" name="uploaded_file" / > < /td > 
< /tr > 
< tr > 
< td >  < /td > 
< td >  < /td > 
< /tr > 
< tr > 
< td >  < /td > 
< td >  < /td > 
< td > < input type="submit" name="sendForm" value="Upload File" / > 
< br / > < /td > 
< /tr > 
< tr > 
< td colspan="3" >  < /td > 
< /tr > 
< /table > 
< /form > 
< ?php
error_reporting(E_ALL ^ E_NOTICE); // Show all major errors.

// Check to see if the button has been pressed
if (!empty($_REQUEST['sendForm']))
{
// Assign the name to a variable
$name = $_FILES['uploaded_file']['name'];    /*This is the file name for ex:clock.avi ******************/
// Assign the tmp_name to a variable
$tmp_name = $_FILES['uploaded_file']['tmp_name'];

// Assign the error to a variable
$error = $_FILES['uploaded_file']['error'];
// Assign the size to a variable
$size = $_FILES['uploaded_file']['size'];
// No trailing slash
$uploadFilesTo = 'uploads';
// Create safe filename
$name = ereg_replace('[^A-Za-z0-9.]', '-', $name);
// Disallowed file extensions
//what files you don't want upoad... leave this alone and you should be fine but you could add more
$naughtyFileExtension = array("php", "php3", "asp", "inc", "txt", "wma","js", "exe", "jsp", "map", "obj", " ", "", "html", "mp3", "mpu", "wav", "cur", "ani");  // Returns an array that includes the extension
$fileInfo = pathinfo($name);

// Check extension
if (!in_array($fileInfo['extension'], $naughtyFileExtension))
{
// Get filename
$name = getNonExistingFilename($uploadFilesTo, $name);
// Upload the file
if (move_uploaded_file($tmp_name, $uploadFilesTo.'/'.$name))
{
// Show success message

$fileNameLength = strlen($name);
$counter = 0;
$fileNameTemp = "";



$image_name=substr($name, 0, strrpos( $name, ".")) . ".jpg";
$video_name=substr($name, 0, strrpos( $name, ".")) . ".flv";


$media_path=$uploadFilesTo.'/'.$video_name;

$image_path=$uploadFilesTo.'/'.$image_name;
$sourcefile=$uploadFilesTo.'/'.$name;

$command1 = escapeshellcmd("ffmpeg -i $sourcefile -an -ss 00:00:03 -an -r 1 -vframes 1 -s 100*90 -y $image_path"); 
$output = shell_exec($command1);
$command = escapeshellcmd("ffmpeg -y -i $sourcefile -ar 22050 -f flv $media_path");
$output = shell_exec($command);
unlink($sourcefile);
echo '< center > < p > Your Video File has uploaded successfully< br / > '.$uploadFilesTo.'/'.$name.'< /p > < /center > ';
}
else
{
// Show failure message
echo '< center > < p > File failed to upload to /'.$name.'< /p > < /center > ';
}
}
else
{
// Bad File type
echo '< center > < p > The file uses an extension we don\'t allow.< /p > < /center > ';
}

}

// Functions do not need to be inline with the rest of the code
function getNonExistingFilename($uploadFilesTo, $name)
{
if (!file_exists($uploadFilesTo . '/' . $name))
return $name;

return getNonExistingFilename($uploadFilesTo, rand(100, 200) . '_' . $name);
}


? > 
< /body > 
< /html > 




Leave the comment to improve us...

Pagination like facebook message inbox

Hi friends,

Today I faced a situation like making the pagination depending upon particular id.

For example in my situation the user in message inbox with detail view.There is button for Previous and Next in detail view.But I listed out the Friend Request only in the inbox.But there is also an criteria for ordinary message.So if the user in the Friend request view I need to filter out the Next message for the 'Friend Request'.

The Friend Request query is

SELECT * FROM tbl_message Where SUBJECT='Friend Request' and Contactid='myid';
It returns
messageid     Message           Subject              contactidfrom
---------------------------------------------------------------

1                                Hi                          Friend Request        Friendid

10                             Hi              Friend Request        Friendid

15                             Hi                             Friend Request         Friendid

In that situation if the user click the messageid 10 and if he is watching the message there is display for next and previous button.

If he clicks the previous button then I need to 'messageid' 1 and if clicks the Next button I need to redirect user to 'messageid' 15.For that we can make it simple.

Write the query like below.

This is for the 'Next' button
SELECT * FROM tbl_message Where SUBJECT='Friend Request'AND messageid > 'currentid'
 AND Contactid='myid';
For 'Previous' button
SELECT * FROM tbl_message Where SUBJECT='Friend Request' AND messageid < 'currentid'
 AND Contactid='myid';

Current id here goes to 10

Please leave the comment to improve us....

Online Book rental

Hi Friends,

This is topic slightly change from the theme of the blog.But mostly related to the blog.Why?

Because every programmer want to learn new things.So I fell this topic is related to our blog concepts.

Every one heard the word 'Book is the perfect friend in the world'.

A good book change the world.If you want to learn alot you are definitively the book reader .Book reading is the good habit to everyone.If you want to present any one give the book as a gift is the perfect one.

But now on the modern days most of the people doesn't have much more time to read the books.The best choice give the opportunity to those people is through online.
For that the following site give the best opportunity to the people to make the gift and make your friends to the perfect reader.
BookSwim.com Gift Card

Please give the comment to improve us....

Jquery Browser Finder

Hi friends,
Using Jquery we can find the browser.This is going to be very useful when the codings on depending upon the browser oriented.At that time we ca change our coding by finding the browser.So it will take less minutes to solve the issues depending on browser.
All credits goes to akchauhan

< !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 > 
< script type="text/javascript" src="jquery/jquery-1.3.2.min.js" > < /script > 
< script type="text/javascript" > 
$(document).ready(function(){

var browser;
if($.browser.mozilla)
browser = "Firefox";
else if($.msie)
browser = "Internet Explorer";
else if($.browser.opera)
browser = "Opera";
else if($.browser.safari)
browser = "Safari";
else
browser = "Unknown";

$('#browserName').append(browser);
});
< /script > 

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 
< title > Browser Finder< /title > 


< body > 
< div id="browserName" > Your Browser: < /div > 
< /body > 
< /html > 


Leave the comments to improve us..

Hide/Show button and change textarea as readonly

Hi friends,
Most of the webdevelopers faceing the situation like this.Some times we need to make the text area as editable one when they are going to click the button.We can easily make it by using the javascript.Here I am explaining with the check box.When the user going to click the check box its going to be readonl.Because first it is the editable one.You can make it also in reverse.
For that you put readonly as true in HTML and change the readonly as false in javascript.


< !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=utf-8" / > 
< title > Untitled Document< /title > 
< /head > 

< body > 
< script type="text/javascript" > 

function blah(bool) {
if(bool) {
document.getElementById("ta").readOnly = true;
document.getElementById('tst').style.visibility = 'visible'
}
else {
document.getElementById("ta").readOnly = false;
}
}

< /script > 

< textarea id="ta"  > < /textarea > 
< input type="checkbox" onclick="blah(this.checked)" / > 
< div id="tst" style="visibility:hidden" > < input type="button" value="save"/ > < /div > 
< /body > 
< /html > 



Leave the comments to improve us....

 
Real Time Web Analytics