Ajax Updates

Posted by education training on Saturday, December 26, 2009

Ajax Updates

Image Watermark on Uploaded Images

Posted: 26 Dec 2009 01:20 PM PST

This tutorial shows you how you can add a watermark image over images that are uploaded though a form.

The following is a html code as simple as it can be with an image type input and a Submit button:

 <form name="submit_image" method="post" enctype="multipart/form-data"  action="">  <input type="file" name="image"/> <input name="Submit" type="submit" value="Upload Picture"/>  </form>

This is the function that applies the watermark over the uploaded picture and uploads the picture on the server. It considers that the location where the images are to be uploaded is a folder named “images”:

 function copy_marked($img_name,$newname,$type) { // check image type. The image type is sent as parameter 3 ($type). Note that for every image type a different function is used to create an image in memory from the uploaded file.     if(!strcmp("image/jpg",$type) || !strcmp("image/jpeg",$type) || !strcmp("image/pjpeg",$type))         $src_img=imagecreatefromjpeg($img_name);      if(!strcmp("image/png",$type))         $src_img=imagecreatefrompng($img_name);      if(!strcmp("image/gif",$type))         $src_img=imagecreatefromgif($img_name);  // get image size, we'll need it later     $old_x=imageSX($src_img);     $old_y=imageSY($src_img);  // create destination image     $dst_img=ImageCreateTrueColor($old_x,$old_y);      imagecopyresampled($dst_img,$src_img,0,0,0,0,$old_x,$old_y,$old_x,$old_y);      // on this demo, the watermark image will be named watermark.gif and will be located in images folder. If you intend to use other file, you will have to change this     $watermark_file='images/watermark.gif';  // you can setup the transparency used for watermark image.    $transparency=50;  // just in case you don't know what extension the watermark file has. This function is listed lower    $wext=getFileExtension('images/watermark.gif');  // create an image from watermark file     if(!strcmp("jpg",$wext) || !strcmp("jpeg",$wext)) $watermark=imagecreatefromjpeg($watermark_file);      if(!strcmp("png",$wext)) $watermark=imagecreatefrompng($watermark_file);      if(!strcmp("gif",$wext)) $watermark=imagecreatefromgif($watermark_file);  // get watermark width     $watermark_width = imagesx($watermark);     $watermark_height = imagesy($watermark);  // place watermark image on the right left of the main image     $dest_x = $old_x - $watermark_width - 5;     $dest_y = $old_y - $watermark_height - 5;   // uncomment these lines and comment the ones above if you want to place the watermark in the very center of the image //    $dest_x = (($thumb_w - $watermark_width)/2); //    $dest_y = (($thumb_h - $watermark_height)/2);  // merge the two images   imagecopymerge($dst_img, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $transparency);   // copy the new created image to the destination file, in the images folder    if(!strcmp("image/png",$type))  imagepng($dst_img,$newname);      else if(!strcmp("image/gif",$type))  imagegif($dst_img,$newname);      else imagejpeg($dst_img,$newname);  // delete the images from memory    imagedestroy($dst_img);     imagedestroy($src_img);  }

Function getFileExtension(), needed to get the file extension:

 function getFileExtension($str) {         $i = strrpos($str,".");         if (!$i) { return ""; }         $l = strlen($str) - $i;         $ext = substr($str,$i+1,$l);         return $ext; }

Having all these functions, here is how you verify if the form was submitted and call the copy_marked() function to upload the file and place the watermark:

  if($_SERVER['REQUEST_METHOD']=='POST') {     if ($_FILES['image']['name'])     {         $image=$_FILES['image']['name'];          $newname="images/".$image;         copy_marked($_FILES['image']['tmp_name'],$newname,$_FILES['image']['type']);     } }



Demo: http://dllurl.com/48
Source: http://dllurl.com/49

Related Listings:

  1. PHP & jQuery image upload and crop We needed a PHP and jQuery image upload and crop...
  2. Images Carousel.us Moving Script Ajax Images Carousel.us is a Javascript and AJAX 3D carousel...
  3. DHTML API, Drag & Drop for Images and Layers – Ajax – Javascript A Cross-browser JavaScript DHTML Library which adds Drag Drop functionality...

Javascript Wait While Loading Page Display Image

Posted: 26 Dec 2009 01:00 PM PST

If you have a page that takes long time to display it is a good idea to display a “wait until the page loads” image. This tutorial show you how to implement this in your webpage.

To implement this you will need to:

1. Every time your page loads a “init()” function will load.

  <body onLoad="init()">

2. Define a div named “loading” right after < body > section.

 <div id="loading" style="position:absolute; width:100%; text-align:center; top:300px;"> <img src="loading.gif" border=0/></div>

The loading.gif image should be an animated gif that suggests that the page is still loading.

3. Place this javascript code right after you define the div.

 <script>  var ld=(document.all);   var ns4=document.layers;  var ns6=document.getElementById&amp;&amp;!document.all;  var ie4=document.all;   if (ns4)  	ld=document.loading;  else if (ns6)  	ld=document.getElementById("loading").style;  else if (ie4)  	ld=document.all.loading.style;   function init()  {  if(ns4){ld.visibility="hidden";}  else if (ns6||ie4) ld.display="none";  }  </script>



Demo: http://dllurl.com/46
Source: http://dllurl.com/47

Related Listings:

  1. JavaScript image combobox v1.5 Are you tired with your old fashion dropdown? Try this...
  2. Loading Panel Widget Probably needless to say, but here it is. A web...
  3. Onload Image Fades Script A function to show an 'image loading…' message and subsequent...

Mod Rewrite for Subdomains

Posted: 26 Dec 2009 12:57 PM PST

You might have noticed some sites having their URLs written as if they were different subdomains of the same domain. For example, for a news site that has the dynamic links of the following form:

http://yournewsdomain.com?topic=it 	-  link that goes to IT news page  http://yournewsdomain.com?topic=business 	- link that goes to business news page

To be rewritten in this form:

http://it.yournewsdomain.com  http://business.yournewsdomain.com

You can achieve this without actually creating the subdomains on your server. This can be done with Apache mod_rewrite.

For this method to work you need a server that runs Apache and has mod_rewrite module installed. Also, if you don’t have access to server configuration files, then you might need some help from your hosting support for the second step and possibly with the fists step of this tutorial.

Step 1. Create a wildcard DNS A record in your DNS Zone.

A wildcard DNS record is a record reprezented by the character “*” , that will match all non existing subdomain names. For example *.yournewsdomain.com will match for  key1.yournewsdomain.com , key2.yournewsdomain.com and so on.

You will need to edit the DNS zone records for your domain and add an A record for *.yournewsdomain.com. , pointing to the IP for your domain.

If your domain  is on a shared hosting account, then you will need to search in your control panel for a section for DNS management. Enter a new A type DNS record, set as name “*” and enter the IP for your domain. If you cannot find a DNS management section on your hosting account, then you will have to ask your hosting support to add it for you.

Step 2. Setup wildcard ServerAlias

You must now configure Apache server to serve the pages that come for any subdomain of your domain. Do this by adding a wildcard ServerAlias.

Add the following line to httpd.conf VirtualHosts section for your domain:

ServerAlias www.yournewsdomain.com yournewsdomain.com *.yournewsdomain.com

Again, if you are on a shared hosting and don’t have access to httpd.conf file, and no means in your control panel to edit your VirtualHosts section, then you must  ask help from your hosting support.

Step 3. Add rewrite rules to your .htaccess file

First you must prepare your .htaccess file . If the file does not exist, create it.

You might already have these lines in your .htaccess files, if you do don’t add them again.

Options +FollowSymLinks

You need this option enabled for your rewrite rules to work. But in most cases is already enabled in the configuration files for the http server.

RewriteEngine On

Use this line if RewriteEngine is not already enabled on your server.

RewriteBase /

If your code is in the root of your domain, then use / as the rewrite base, like in the line above. If it is in a folder, then use the path to that folder, for example:

RewriteBase /subdomain/

Add the actual rewrite rules:

RewriteCond %{HTTP_HOST} !www.yournewsdomain.com$ [NC] RewriteCond %{HTTP_HOST} ^(www.)?([a-z0-9-]+).yournewsdomain.com [NC] RewriteRule (.*) index.php?topic=%2 [NC,QSA]

First 2 lines add the condition for the actual rewrite rule (line 3) to come in place.

First line will add an exception for the subdomain www. Add here a similar line for each subdomain that you don’t want to follow the same rule.

Second line adds the condition that the URL is in a form that looks like a subdomain , with or without the www string in front (http://anything.yournewsdomain.com).

The actual rule is the third line, and will translate any URL that matches the above conditions to a form: http://yournewsdomain.com?topic=%2.

Some things explained in the rewrite rules:

1. %2 is a back-reference that is created in the second condition. Back-references are created by groups of parentheses in the condition pattern. So in this case, the first parenthesis (www.) will create first back-reference that can be used with %1, and the second one ([a-z0-9-]) , that matches the subdomain like form, will create the second back-reference, which we use with %2.

2. The flag NC at the end of the conditions and rule means that the comparisons should be made case insensitive (No Case).

3. The flag QSA at the end of the rule means that if there are additional queries at the end of URL string, they should be added to the URL when rewritten (Query String Append).

You might need  to make adjustments to the rewrite rule form, for example instead of index.php you have other landing page, or instead of the parameter “topic” you have other.

Source: http://dllurl.com/44

Related Listings:

  1. Kroppr Script Kroppr script is intended to help webmasters allow their users...
  2. Template Elements – CSS Framework Elements is a down to earth CSS framework. It was...

Ajax Count Words in Forms Script

Posted: 26 Dec 2009 12:46 PM PST

Sometimes you need to limit the number of input words on public forms, and it is hard for the visitor to approximate the number of words that he/she wrote already to see how much can still write. And it is annoying when after submitting the form they see the input is not valid because they wrote too many words. For this case javascript can be the best solution.

How to do this: add a small readonly input that will show the number of left words. Every time an event that means that characters are added to the textarea, a javascript function will be called. The javascript function will count the number of words that are already in the box and display the number of words left in the small input field. The function will be presented later.

The events that need to be watched are: key up, key down and paste, so we will use the functions: onKeyDown, onKeyUp and onPaste.

Here follows the html part with the form and here the function CountWordsLeft is called in the conditions discussed earlier.

  <form name="count_form" method="post" action="">  <textarea name="desc" cols="40" rows="7" id="desc"     onKeyDown="CountWordsLeft(count_form, document.count_form.desc, document.count_form.count,100);"     onKeyUp="CountWordsLeft(count_form, document.count_form.desc, document.count_form.count,100);"     onPaste="CountWordsLeft(count_form, document.count_form.desc, document.count_form.count,100);"> </textarea>  <input readonly name="count" type="text" size="5" value="100"/>  </form>

The javascript function takes as parameters:
– myForm – the name of the form
– field – the name of the field we count words for, in out case the textarea named desc
– count – the name of the small readonly field that shows the left words
– no_words – maximum number of words allowed

The function works like this: first it removes all characters in front that are not alphanumeric (it will remove spaces for example) . Then in with the resulted string all non alphanumeric characters are replaced with space (” “). Only after that the text is split using space as a separator and the resulted words are counted. The count input box is updated with the number of words left. 

 function CountWordsLeft(myForm, field, count, no_words) {     var text=field.value + " ";     if(no_words>0)     {         var iwhitespace = /^[^A-Za-z0-9]+/gi; // remove initial whitespace         var left_trimmedStr = text.replace(iwhitespace, "");         var na = rExp = /[^A-Za-z0-9]+/gi; // non alphanumeric characters         var cleanedStr = left_trimmedStr.replace(na, " ");         var splitString = cleanedStr.split(" ");         var word_count = splitString.length -1;         count.value=no_words-word_count;     } }



Demo: http://dllurl.com/41
Source: http://dllurl.com/42

Related Listings:

  1. Jquery Alphanumerical Validation I ran into a javascript alphanumeric validation problem, though it...
  2. Validation Hints for Forms As someone is typing an in an input field, it...
  3. Building a better web forms : Context highlighting using jQuery In my previous article “Labels in form layouts” I wrote...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.