Grab the RSS feed

Highlight a Selected Row in a table using Jquery and CSS class

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. –W3Org

In design purpose we can easily design the templates using the tables instead of divs. But if you design the template please use the divs instead of table (Suggested by our designer).Ok now we go for our topic to highlight the table rows.

Why we need to highlight the table row?

Most of the times we need to display the data like a grid. At that time choose the table to display the data. For example if you want to display the data from the database like books in category A. We need to get all the data row by row and include the rows in a table and we place the data in the appropriate columns.

If user wants to delete the third row we need to make the checkbox or radio button to choose the row and if user click the delete button we will delete the row. At this situation we need to highlight which row user chosen for delete, by this way we can avoid accidentally delete the wrong one.

VIEW DEMO

Coding Part:

<!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>Technotiger87-Highlight Selected row in a table using Jquery and CSS</title>

<script type="text/javascript" src="js/Jquery.1.4.4.js"></script>

<style>

.tableborder

{

padding: 2px 4px 2px 4px;

border: 1px solid #FFFFFF;


}

.tabletitle

{


background:none repeat scroll 0 0 #9EC630;

border-color:#FFFFFF;

border-style:solid;

border-width:1px 1px 1px 0;

color:#FFFFFF;

font-size:14px;

font-weight:bold;

height:20px;

padding-left:5px;

text-align:center;

vertical-align:bottom;

width:150px;

}

.tableodd

{


font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#FFFFFF;

background-color:#E3EEC4;

vertical-align:top;

}

.tableeven

{


font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#FFFFFF;

background-color:#d3E3A4;

vertical-align:top;

}

.highlight

{

font-size: 12px;

padding-left: 5px;

padding-top: 5px;

padding-bottom: 5px;

border-style:none solid solid none;

border-width:1px 1px 1px 0px;

border-color:#9EC630;

background-color:#FFFFFF;

vertical-align:top;

}

</style>

</head>


<body>

<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tableborder">

  <tr class="tabletitle">

    <td class="tabletitle">CheckBox</td>

    <td class="tabletitle">Title</td>

    <td class="tabletitle">Link</td>

  </tr>

  <tr class="tableodd">

    <td class="tableodd"><input type="checkbox" /></td>

    <td class="tableodd">&nbsp;</td>

    <td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableeven"><input type="checkbox" /></td>

    <td class="tableeven">&nbsp;</td>

    <td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableodd"><input type="checkbox" /></td>

    <td class="tableodd">&nbsp;</td>

    <td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

  <tr>

    <td class="tableeven" ><input type="checkbox" /></td>

    <td class="tableeven">&nbsp;</td>

    <td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink</a></td>

  </tr>

</table>


</body>

</html>

Jquery Part:

$(document).ready(function()
 {
   $('td input[type="checkbox"]').live('click',function(){
 if($(this).attr('noclass')!='1')
 {
     if ($(this).is(':checked')){
      anyrowschecked=1;
      
        $(this).parent().addClass('highlight');
        $(this).parent().siblings().addClass('highlight');
     } else if($(this).parent().is('.highlight')) {
       $(this).parent().removeClass('highlight');
       $(this).parent().siblings().removeClass('highlight');
     }
 }
    });
   $('td .deletecontent').live('click',function(){
     var selected=$(this).parent().attr('class');
     if(selected.indexOf("highlight")!=-1)
     {
         alert('You are doing deletion.This will delete the entire data');
       var yes= confirm("Do you really want to delete??");
      if(yes)
      {
        alert("Do Whatever You want");
      }
     }
     else
     {
       
         alert('Please ensure you are deleting the selected row');
     }
       });
 });

Create multilingual site and allow user to make content in their native language.

Hi Friends,

The multilingual site is now popular more than before a year. Because the user coming to internet is not only the English experts. Even the rural peoples those who are not having the English as first language want to access the internet content. I will give the simple example and efficiency of multilingual site.

“Information is World”

Why Multilingual?

A good question why we need to make the same content in different languages. This is because you can get the users globally. Not only from English as first language countries. From my real life experience:
My friends’ brother come to my home and asked me to collect the ten noble prize winners and the reason for getting the noble prize. Then I googled it and collect the information of 10 peoples and the reason for getting noble prize. Then he told me he is not from the English is the medium in his school. So he wants to collect the information in his language. But most of the website provides the information in English only. After that we go for wikipedia and got the information in his language.
This is a small example. Like that we can give more reasons for creating the multilingual website.

How Convert the content into several languages in single click?

If you are providing the information and not allow the user to make the content you can convert the entire site content into 52 languages in a single click using the http://translateth.is/. I used it and tested it. Its really fast and easy to integrate into your site by simple copy and paste of their JavaScript. You can get the translate button and in a single click you can convert the entire content into the language what they want to use. This will reduce the time and no headache for the webdevelopers.








Allowing user to make content in their language.

Some times we need to allow the user to make the content like giving comments, etc.,.At that time we can use the google Ajax API to make the virtual keyboard to the user and allowing them to make the content in their language. For this first you need to get the key by registering on their site and then use it for your site. Below I will give the example how to use google Ajax translation API.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Google AJAX Language API Sample</title>

    <script src="https://www.google.com/jsapi?key=Your KEY"></script>

    <script type="text/javascript">


    google.load("elements", "1", {

          packages: "keyboard"

      });

function onLoad() {

        var kbd = new google.elements.keyboard.Keyboard(

          [google.elements.keyboard.LayoutCode.YOUR LANGUAGE],

          ['t1']);

      }


      google.setOnLoadCallback(onLoad);

    </script>

  </head>

  <body style="font-family: Arial;border: 0 none;">

    <textarea id="t1" style="width: 600px; height: 200px;"></textarea>

  </body>

</html>

Put the language what you want in the given format. But for saving the content in different language you need to consider the database charset. It needs to support your language.
Thanks.

How to create the PDF on the fly using PHP?

Portable Document Format (PDF) is an open standard for document exchange. The file format created by Adobe Systems in 1993 is used for representing two-dimensional documents in a manner independent of the application software, hardware, and operating system. ---From wikipedia.

In my project we mostly making the Reports using PDF. So I got some experience in creating PDF on the fly using PHP and I want to share it with the readers of TT.

Libraries:

At first I used the FPDF then I moved to TCPDF contain some more features on TCPDF.
You can find the advantages of TCPDF over FPDF here and here .

Creating simple PDF:

As the name indicates its simple one. But here we are going to use the query and separate functionality for the content display.

In coding section you can get the entire Code.

Problems:
Here I am trying to put the column name when I am creating the PDF i.e.Instead of $row[0] I want to put $row[‘columnname’]. It throws an error.

Hint:
Don’t start the output In this page like echo,print,or HTML. Because it throws an error like the output already started.
$pdf->SetPrintHeader(false);
$pdf->SetPrintFooter(false);

Use the above lines to turn off header and footer.
Code is here:
<?php
require_once('tcpdf/config/lang/eng.php');
require_once('tcpdf/tcpdf.php');

// extend TCPF with custom functions
class MYPDF extends TCPDF {

    public function ColoredTable($header,$data) {
   $this->SetFillColor(255, 0, 0);
        $this->SetTextColor(255);
        $this->SetDrawColor(128, 0, 0);
        $this->SetLineWidth(0.3);
        $this->SetFont('', 'B');
        // Header
  $this->headerdisplay();
  $this->anotherdetaildisplay();
  $header = array('Country', 'Capital', 'Area (sq km)', 'Pop. (thousands)');
  $data=array('0'=>array('Country', 'Capital', 'Area (sq km)', 'Pop. (thousands)'));
        $w = array(40, 35, 40, 45);
        $num_headers = count($header);
        for($i = 0; $i < $num_headers; ++$i) {
            $this->Cell($w[$i], 7, $header[$i], 1, 0, 'C', 1);
        }
  
        $this->Ln();
  
        // Color and font restoration
        $this->SetFillColor(224, 235, 255);
        $this->SetTextColor(0);
        $this->SetFont('');
   
        // Data
        $fill = 0;
  $connection=mysql_connect("yourhost","username","password") or die("could not connect db");
  $db=mysql_select_db("db",$connection)  or mysql_errno();
  $sql="SELECT * FROM table";
  $result=mysql_query($sql,$connection);
       /* foreach($data as $row) {*/
    while($row=mysql_fetch_array($result))
    {
            $this->Cell($w[0], 6, $row[0], 'LR', 0, 'L', $fill);
            $this->Cell($w[1], 6, $row[1], 'LR', 0, 'L', $fill);
            $this->Cell($w[2], 6, number_format($row[2]), 'LR', 0, 'R', $fill);
            $this->Cell($w[3], 6, number_format($row[3]), 'LR', 0, 'R', $fill);
            $this->Ln();
            $fill=!$fill;
        }
        $this->Cell(array_sum($w), 0, '', 'T');
  
    }
 
 public function headerdisplay()
 {
    $this->SetFillColor(224, 235, 255);
        $this->SetTextColor(0);
        $this->SetFont('');
  $tbl = <<<EOD
<table cellspacing="0" cellpadding="1" border="0">
    <tr>
        <td>Test<br/>Test<br/>Test</td>
    </tr>
</table>
EOD;
$this->writeHTML($tbl, true, false, false, false, '');
 }
 public function anotherdetaildisplay()
 {
  $this->SetFillColor(224, 235, 255);
        $this->SetTextColor(0);
        $this->SetFont('');
  $tbl = <<<EOD
<table cellspacing="0" cellpadding="1" border="0">
    <tr>
        <td></td>
        <td></td>
        <td>Test at Right<br/>P O BOX 11097<br/>CHICAGO, IL 60611</td>
    </tr>
</table>
EOD;
 
   $this->writeHTML($tbl, true, false, false, false, '');
  $tbl = <<<EOD
<table cellspacing="0" cellpadding="1" border="0">
    <tr>
        <td>LastName FirstName<br/>Address<br/>CITY STATE ZIP</td>
    </tr>
</table>
EOD;
 
   $this->writeHTML($tbl, true, false, false, false, '');
 }
 
}

$pdf = new MYPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('TechnoTiger');
$pdf->SetTitle('Tutorial');
$pdf->SetSubject('TCPDF Tutorial');
$pdf->SetKeywords('TCPDF, PDF, example, test, guide');
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
$pdf->setLanguageArray($l);
$pdf->SetFont('helvetica', '', 12);
$pdf->AddPage();
$pdf->ColoredTable($header, $data);
$pdf->Output('example_011.pdf', 'I');
?>

Why there is no post on last four months?

Hi Friends,

If you see the last post was published in Jul 11, 2010.After that I cant post a single line.Because of the following reasons.

  1.  I switch over to another company.
  2. Moved to new busiest city regarding the job.
  3. Huge number of challenging tasks make me busy

From the challenging tasks I learned a lot.So for TT readers you can expect more number of post in the following days.
Have a nice day.

Authorize.net Payment gateway Integeration

Hi Friends,

I have recently completed my payment gateway Integeration using authorize.net.In the full of development I refer one website John Conde that helps me a lot.Whenever I post the doubts wherever John conde will answer as soon as possible.
Here I want to really thank him for his helps and his answers.I suggest you whenever you had the doubts go to his website or developer forum of authorize.net.

I just want to share this information.

Calculate four weeks date from current date and time


Hi Friends,

I found one default function in PHP that is reduce our time to calculate the date an time for the weeeks and months and days.

Below I give the simple example to calculate 4 weeks date from current date.



$weekstocalculate[0]='4 Months'

$text=trim($weekstocalculate[0]);
$text1="now +".$text;

echo date("F jS, Y",($text1));
It gives the output like this
Month date,Year 
Ex:October,2010 

Please try it and give your feedback 

Marquee using Jquery

Hi Friends,

we can make the marquee using the Jquery very simple and easy.

For that we need to implement the simple plugin jscroller

You can find the plugin here.They provide the example also.

So I think I dont need to explain the all the things how  we implement.Advantage is we can make the direction as per our wish.

I like a lot.

Simple tooltip using Jquery

Hi Friends,

The tooltip provide the hints to user when they are in the particular point or particular link.

When the user get the hint they may get the idea with in the seconds.Mostly the hints are used in the form fill up process.

Because we need to make the user fill up the form as soon as possible.The tooltip wont occupy the lot of spaces.

Today I found a tooltip that realy make the tooltip in a single file no need to make lot of JS and CSS.

This is the link

You can get the information. I am really lucky today.Because when I  found this I implemented in my project and got the output.

Sorry for No Post

Now a days it makes very difficult for me with managing time.I am working on some busy projects.It wont give me the chance to make a POST.

Rotate or Flip the image using Jquery

Smashing JavaScript: 100 Professional Techniques (Smashing Magazine Book Series)One of the excellent tutorial I found in this week is Jquery flip.
By using this we can make the site like a virtual applocation and enhance the user experience with the site.I am going to aplly this in my project for loading the next 9 users.
In my application we are showing the 9 user first if user clicks the nextt arrow button it will load the next 9 user.Instead of using the loading Icon I am going to use this Jquery and make the fun for the user.



View demo and get the source code from the follwing link.Download

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

Create a expandable Text area like face boook

Hi friends if you see the text area in face book for replying message it going to be nice and good one.


It is going to be expand for particular distance after that only it going to make the scroll bar.You can also make this by using Jquery.

Here is the code for 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=utf-8" / > 
< script type="text/javascript" src="jquery/jquery-1.3.2.min.js" > < /script > 
< !--< script type="text/javascript" src="jquery.autogrow-1.2.2/jquery.autogrow.js" > < /script > -- > 
< script type="text/javascript" src="jquery/autoextendtextarea.js" > < /script > 
< title > Untitled Document< /title > 
< script > 
$(document).ready(function(){
$('textarea#comment').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
});
< /script > 
< /head > 

< body > 
< textarea style="line-height:10px min-height:30px" id='comment' > < /textarea > 
< /body > 
< /html > 


The Jquery Plugin for this is
// JavaScript Document
/*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com
* @version 1.04
*/
//Source:http://james.padolsey.com/javascript/jquery-plugin-autoresize/
(function($){

$.fn.autoResize = function(options) {

// Just some abstracted details,
// to make plugin users happy:
var settings = $.extend({
onResize : function(){},
animate : true,
animateDuration : 150,
animateCallback : function(){},
extraSpace : 20,
limit: 1000
}, options);

// Only textarea's auto-resize:
this.filter('textarea').each(function(){

// Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),

// Cache original height, for use later:
origHeight = textarea.height(),

// Need clone of textarea, hidden off screen:
clone = (function(){

// Properties which may effect space taken up by chracters:
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
propOb = {};

// Create object of styles to apply:
$.each(props, function(i, prop){
propOb[prop] = textarea.css(prop);
});

// Clone the actual textarea removing unique properties
// and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute',
top: 0,
left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);

})(),
lastScrollTop = null,
updateSize = function() {

// Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000);

// Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone);

// Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) { return; }
lastScrollTop = scrollTop;

// Check for limit:
if ( scrollTop >= settings.limit ) {
$(this).css('overflow-y','');
return;
}
// Fire off callback:
settings.onResize.call(this);

// Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ?
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
: toChange.height(scrollTop);
};

// Bind namespaced handlers to appropriate events:
textarea
.unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize);

});

// Chain:
return this;

};



})(jQuery);


Here all the credits go to Source:james.padolsey

Leave the comment to improve us

CountdownTimer Using Jquery

Hi friends,

In this tutorial I am going tell about how to create and use th countdown Timer using Jquery.

In one of application the client want to display the count down timer.For that I choose Jquery and put it in my application.

The original count down timer is get from David walsh

I slightly modify it and give it to you.

First you need to put the Jquery plugin...


/*
Class:     countDown
Author:    David Walsh
Modified by:Vinoth Kumar.S
Version:   1.0.0
Date:      FEB 05 2010
Built For:  jQuery 1.2.6
*/

jQuery.fn.countDown = function(settings,to,id) {
settings = jQuery.extend({
startFontSize: '36px',
endFontSize: '12px',
duration: 1000,
startNumber: 60,
endNumber: 0,
myid:id,
callBack: function() { }
}, settings);
return this.each(function() {
//alert(settings.toString);
//where do we start?
if(!to && to != settings.endNumber) { to = settings.startNumber; }
//alert(settings.id);


//set the countdown to the starting number
//$(this).text(to).css('fontSize',settings.startFontSize);

hours = Math.floor(to / 60);
minutes = Math.round(to % 60);
if (minutes < 10) {
minutes = "0"+minutes;
}
$(this).text(hours + ':' + minutes).css('fontSize',settings.startFontSize);
//loopage
var myhour=hours + ':' + minutes;
$.cookie('test',myhour,{expires:7,path:'/'});

$(this).animate({
'fontSize': settings.endFontSize
},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
}
else
{
$.cookie('test',null,{path:'/'});
settings.callBack(this);
}
});

});
};





Then create the Html Page

< !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 > countdowntimer< /title > 
< style type="text/css" > 
@import "jquery.countdown.package-1.5.5/css/jquery.countdown.css";

#defaultCountdown { width: 240px; height: 45px; }
< /style > 
< script type="text/javascript" src="jquery/jquery-1.3.2.min.js" > < /script > 
< script type="text/javascript" src="jquery/countdownplugin.js" > < /script > 
< script type="text/javascript" src="jquery/cookie.js" > < /script > 
< script type="text/javascript" > 
$(document).ready(function() {

$('#countdown').countDown({
startNumber: 25,
callBack: function(me) {
$(me).text('All done! This is where you give the reward!').css('color','#090');
$.cookie('test',null,{path:'/'});
//$(this).text(hours + ':' + minutes).css('fontSize',settings.startFontSize);
},
id:5
});
});
< /script > 
< /head > 

< body > 

< p style="border:1px;margin:auto 0px;text-align:center;margin-top:250px;" > 
< span id="countdown" > < /span > 
< /p > 

< /body > 
< /html > 




Please use this and leave the comment to us

change google look and apperance

Hi friends,

Today i am going to teach how to edit/delete google home page contents.Its really a working example and I used it and make fun.
How long we are watching the same google home page.If you get really bored you can do this.And prove you are a hacker.

Eventhough you doesnt want to prove a hacker make a fun with google.
You can apply this trick for any websites you want to do.

For that you need to do only two things.

1.Enter the web address you want to do edit

2.In browser please put the following javascript and hit enter.

javascript: document.body.contentEditable= "true"; document.designMode= "on"; void 0

Now enjoy yourself

Leave the comments to improve us

Best designed web sites

Hi friends,
In this post I am going to tell about the sites that contains the beautiful design for websites.
Most of the webdesigners facing the problem in choosing the color combination.But the following websites gives the real beautiful designing ideas.
I really suggest you,dont copy the things.But you can gather their ideas and implement it in your own way.It gives the lot of beautiful things tothe world.
Some of the sites also recommended for programmers also.
Why the programmers need te effort in designing?

Once the design is completed the programmers going to be develope the whole site for few days to few months...

If it is intresting thing then only they are watching watching the site upto the months....

so if you are going to be work with that site please give the small efforts on designs.It really helpful.


Best designed websites


1. onextrapixel

2. instantshift

3. ourtuts

4. webdesignbeach

5. ourtuts

6. httpwatch

7. bestcssdesign

for flash

8. webdesignstuff

Leave the comments to improve us.

Test Pay Per Post

The communist reflects!

Set Interval and Set timeout difference in Jquery

Set timeout in Jquery call the function only once.But the Set interval call the function again and again for the time limit we are given.
But if you want to make the websites such as update the user status and other things you are advice to use set time interval.

If you want to call a function after particular seconds(Such as delay) use the set time out function.

< !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 > 
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 
< title > setTimeout/setInterval< /title > 
< script > 
$(document).ready(function(){
$("#settimeoutfunc").click(function()
{
alert('clciked,Please wait 20 seconds');
setTimeout('alert(\'Settimeout is cliked\')',20000);
});
$("#setIntervalfunc").click(function()
{
alert('clciked,Please wait 20 seconds');
setInterval('alert(\'SetInterval is cliked\')',20000);
});
//alert('test');
});
< /script > 
< /head > 
< body > 
< input type="button" value="settimeout" onclick="" id="settimeoutfunc"/ > 
< input type="button" value="setInterval" onclick="" id="setIntervalfunc"/ > 
< /body > 
< /html > 

How to get the textarea ID using javascript

Most of the programmers using the comment
element = document.getElementById(id); to get the value or something from the HTML pages.Some times the ID may be changed because of some reasons.At that time we need to get the ID of the HTML element using Javascript and make our coding successfull.
Here I list the coding to get textarea id .


var divEls = document.getElementsByTagName("textarea");
var i = 0;
for(i=0;i<divEls.length;i++)
alert(divEls[i].id);

You can also using this type to get the Id of div.For that simply put the div instead of textarea.

Leave the comments to improve us...

Text area with bold,Italic,etc..


We are all know about Emails.In that we have seen the text area with the options to make our content bold,italic,etc.We can also make the text area like that in our site.
For that what we have to do?
There are lots of plugins available on the internet.I am using the plugin TinyMCEIn that we have almost all of the options to make the text area as richable and user friendly.

How to integrate Tiny MCE to your site?
You can simply
download from the above site and then you can integerate the javascript from tiny mce.

Depending upon your needs there are lots of themes(simple,advanced) are available.

What are the problems I am facing during usage?

During the integeration there are n problems.I simply integerate the script.But when I am going to use I face a small problem.That is my site is fully developed using the ajax concepts.When I am using the editor the first time mail was sent successfully.During the mail send I validate through javascript.When I send the mail at second time it wont be sent.Why?
I got the result of the textarea Id is changed.So when I am validate at second time the error displayed there is no such an ID.Why it was changed?Because the tiny MCE change the text area Id depending upon that use.

How I solved the problem?
I analyzed the Id going to be mce_0,mce_1,etc.So I simply get the id using Javascript (You can read this post for get the ID using javscript )and pass that id during validation.Now the problem is solved simply.

Please give the comments to improve us.....

How to replace the long text with dots

In php we can easily replace the long text with the dots.

Here we use the substr function in PHP.

The below example shows the program for that….

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
&lthtml xmlns="http://www.w3.org/1999/xhtml" >
&lthead >
&ltmeta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
&lttitle &gtUntitled Document</title >
</head >

&ltbody >
<?
$message="ABCDEFGHIJKLMNOPQRSTUVWXYZ";

if(strlen($message) &gt15)
{
$listedword=substr($message,0,15);
echo $listedword."...";
}
else
{
echo $message;
} 
? >
</body >
</html >

The output is
ABCDEFGHIJKLMNO...
The first fifteen letters are printed and the remaining with dots…

For more information visit

For more information

Leave the comments to improve us..

Click Download this as a word document

Import Contacts From LinkedIn,Yahoo,Gmail,Hotmail,etc..


Hi Friends,
Every webdesigner and the programmer dream is,the site who is developed my theirself to get popular.So everyone try work hard to make SEO friendly and get to make the site going to be popular.For that the Invite friends in the social networking site help them a lot.
Because in the single click the site going to reach almost hundred and hundreds of users.So every social networking sites contain the feature of Invite friends.But as i programmer we cand get all the social networking sites API.Then What can we do?

In my experience the best one is Open Inviter.Through this we can connect almost all of the websites those who are providing Email services or Social Networks.

How can we Integerate OpenInviter?

Step 1:Register the OpenInviter site with your domain name.
Step:2They provide the API key associate with your domain name.Now download the OpenInviter.
Step:3Unzip the file and Upload the OpenInviter to your root directory.
Step:4Run the postinstall.php(Like this:http://yourdomainname.com/OpenInviter/postinstall.php
Step:5It tells you how can your website supporting OpenInviter technologey.
Step:6Delete postinstall.php from the OpenInviter Directory.
Step:7Run http://yourdomainname.com/OpenInviter/example.php.

Change the messages and other things depend upon your need.It works fine.

You can Download this post as word document.

Leave the comment to improve us...

HAPPY NEW YEAR

Hi friends,
Happy new year to every one.I wish you all the best to every one.This year will give the lights to your life.

 
Real Time Web Analytics