Javascript to show how many characters are remaining to enter in textbox or textarea

<label for="mytextbox">Your Name : </label>
<input type="input" id="mytextbox" maxlength="20" onkeyup="javascript:countCharacters('mycounter',20,'mytextbox')">

<span id="mycounter">20</span>

And "onKeyUp" event of the textbox we are calling a javascript function "countCharacters()".

we will be writing a standard function which accepts only some parameters and rest of the processing will be done in the function.

To this function we have to pass 3 parameters
1) id of the span - where counter will be shown when user types something
2) max_chars - length of the textarea which we specified in maxlength="20"
3) myelement - the id of the textbox where user types text

The function is as below


//http://programming-in-php.blogspot.com/
function countCharacters(id,max_chars,myelement)
{
counter = document.getElementById(id);
field = document.getElementById(myelement).value;
field_length = field.length;
 if (field_length <= max_chars)  {   
// Here we Calculate remaining characters   
remaining_characters = max_chars-field_length; 
  // Now Update the counter on the page
   counter.innerHTML = remaining_characters;
  }
 } 

onclick select the text of a textarea

<textarea rows="8" cols="40" onclick="this.focus();this.select()">
   some text here
   some text here
</textarea>

Simple pleasures with jQuery

omethings it’s the simple things in life that make you really happy.  For me yesterday, that was thanks to jQuery.  Have you ever wanted to have a check box that, when the user checks it it also checks a lot of other checkboxes?  Yeah, of course you have!  I wanted to do that yesterday.  Now, it’s not the first time I’ve had to do that kind of functionality, but it always came with a bunch of javascript that seemed over the top for what was wanted.  With jQuery it just took a line or two of code!

$(document).ready(function() {
        $('#selectall').click(function() {
         $(":checkbox", $('#checkboxlist')).attr('checked', $(this).is(':checked'));
        });
    });

And with that, on and off go the other checkboxes.

Marvelous!

Show Hide Div tag in Javascript and JQuery

I have been playing with JQuery for the past few days. After getting tired of writing lines and lines of code in javascript, Jquery does the same functionality with a couple of lines.
Let’s see a small comparison between a javascript code and JQuery.
Task: To show and hide a div tag with contents in it.
Most web developers come across this situation to show and hide the div contents – Let’s simply say it as toggle div tags

Now, comes the javascript code to toggle div tag
HTML

<a onclick="toggleDivTag(‘testfooter’);" href="#">Click here </a>
<div id="testfooter">This is foo</div>

Javascript

<script type="text/javascript">// <![CDATA[
     function toggleDivTag(id) {        var divID = document.getElementById(id);        if(divID.style.display == 'block')           divID.style.display = 'none';        else           divID.style.display = 'block';     }
// ]]></script>

Explanation:

When you click on the link, the javascript function toggleDivTag was called along with a parameter, here ‘testfooter’. This parameter is the id of the div tag,. This div element should be closed and opened, when clicked.
In the javascript code, we are assigning the id of the particular div tag to a variable divID. Now, we are checking whether the div tag is visible or closed. If the div is shown, then we are applying the style as “none” to hide the div tag and vice versa.

Now, comes our hero JQuery.
JQuery can be downloaded from http://docs.jquery.com/Downloading_jQuery#Download_jQuery
HTML

<a id="clickhere" href="#">Click here</a>
<div id="hide_this">Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents Test contents</div>

JQuery code

<script src="jquery-latest.js"></script> <script type="text/javascript">// <![CDATA[
$(document).ready(function()
{
//$('#hide_this').hide();
  $("#clickhere").click(function()
  {
$('#hide_this').toggle('slow');
});
});
// ]]></script>

Explanation:

On the first line, you are including the jQuery library.

<script src="jquery-latest.js"></script>

Then, comes our code. The ready function will start working once the entire page gets loaded.

$(document).ready(function()

Then, when you click on the link, contents in the “hide_this” div will be shown. Again clicking on the same link, it toggles it action. Also, it comes with animated effect, that you could enjoy.

$("#clickhere").click(function()
{
$(‘#hide_this’).toggle(’slow’);
});

Note: if you need to hide the contents, while the page is getting loaded, you can uncomment the below line in jquery.

//$(‘#hide_this’).hide();

In Javascript, you can modify the HTML code as

<div id="testfooter" style="display: none;">This is foo</div>

Changing Timezone in php configuration file

How can I change the time zone? A simple solution is to modify the value in the php.ini file.
Open the php.ini file. If you don’t know, where the php.ini file is placed, try using phpinfo file.

<?php
phpinfo();
?>

create a file with the above lines and execute this file in the browser.
Wow..
You get all the info regarding the server , components installed and other info. Always remember, it is vulnerable to display the server info to the end user. You can better delete the file, once you are done.
I gave the below screenshot, to guide you to find the php configuration file (php.ini)

Once you found the file, open in an editor and search for the string “timezone”. There you find the default time zone.

[Date]
; Defines the default timezone used by the date functions
date.timezone =

You can change the time zone, as you wish. You can get the list of timezones in this link
http://in2.php.net/timezones
For example, if you need to change it to costa rica time zone, simply modify the above line as

Date.timezone = ‘America/Costa_Rica’

Uploading problem wmv or mp4 ...??????

Make these changes in your php.ini file


Whether to allow HTTP file uploads.
file_uploads = On

; Temporary directory for HTTP uploaded files (will use system default if not
; specified).
;upload_tmp_dir =

; Maximum allowed size for uploaded files.
upload_max_filesize = 500000M

;change maximum post value ,post_max
post_max =1000M


Some servers may not accept the above settings. In that case, htaccess comes to our rescue.
Create a file named “.htaccess” without quotes and add the below lines

php_value upload_max_filesize 10M
php_value post_max_size 20M

These lines does the same functionality as the above.

Creating image thumbnails with PHP!

If we intend to make an image gallery, and we would like to show the thumbails of the images, it wouldn't be a wise idea to show the original images with their height & width modified in the <img> tag, that would result in low image quality & higher download time. The solution to this problem would be creating thumbnails at the server end and display them instead.
This solution can be approached in two ways, you can create the thumbnails once and for all or create thumbnails everytime at runtime.
For this purpose, I wrote a class which will create the thumbnail.
The Class..
 /*
 *    File        :    thumb.class.php
 *    Description    :    Class for creating thumbnails
 */
class Thumb
 {
     var $filename;
     var $img;
     var $height;
     var $width;
     var $ratio = 10;
     var $oldim;
     var $oldh;
     var $oldw;


     function filename($file) /* used for setting filename */
     {
         $this->filename = $file;
     }

     function setRatio($ratio) /* used for setting ratio */
     {
         $this->ratio = $ratio;
     }

     function init() /* creates the GD stream */
     {
         $this->img = imagecreatetruecolor($this->width,$this->height);
     }

     function calculateSize() /* to calculate the output size */
     {
         //$this->info = getimagesize($this->filename); 
         /* returns height,width,type,attribute */
         $this->oldim = imagecreatefromjpeg($this->filename);
         $this->oldw = imagesx($this->oldim);
         $this->oldh = imagesy($this->oldim);

         /* code to re-calculate size maintaining the aspect ratio */
         $this->width = ($this->oldw/100)*$this->ratio;
         $this->height = ($this->oldh/100)*$this->ratio;

         $this->init();
         return true;
     }

     function finish()
     {
          $this->calculateSize();
  imagecopyresampled($this->img,$this->oldim,0,0,0,0,$this->width 
  ,$this->height, $this->oldw,$this->oldh);
         header("Content-Type: image/jpeg");
         imagejpeg($this->img);
     }
 }  
--------------------------------------- -----------------------------------------------------------------
An Example:

<?
 require_once("thumb.class.php");

 $im = new Thumb;
 $im->filename("abhishek.jpg");
 $im->setRatio(10);
 $im->finish();

 ?>