Jafar Khan' Blog: September 2012

Tuesday 25 September 2012

Add and remove textbox dynamically with jQuery.

Recently when working on my site i got a requirment wherein i user can add multiple input text on page in different textboxes, and these textboxes needs to be created dynamically as per user need. So i decided to do it in jQuery. it’s quite easy to add or remove a textbox dynamically. The idea is quite simple, just combine the use of ‘counter‘ variable, jQuery createElement(), html() and remove() method. See below example :

<html>
<head>
<title>Add dynamic text box</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>add dynamic text box</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () { //add dynamic text box
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+counter+':</label>'+'<input type="text" name="textbox'+ counter+'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});

$("#removeButton").click(function () { //remove dynamic text box
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});

$("#getButtonValue").click(function () {

var data = '';
for(i=1; i<counter; i++){
data += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(data);
//save dynamic data in database;
/* for(i=1; i<counter; i++) {
$.post(
'process.php',// Data will be passed to this php file.
{
value: $('#textbox'+i).val() // get data values
}
);
}*/
});
});
</script>
</head>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>
</html>

Tuesday 18 September 2012

Cropping an Image with PHP and the GD Library

Learn how to use the PHP GD library in your PHP program to generate dynamic images. Learn how to create and manipulate the GIF, PNG and JPG images.

<?php
# Note: Install GD laibreries
$filename = '194_card.jpg';//orignal file
$filename1 = '1.png';//save file name whoes you save

list($current_width, $current_height) = getimagesize($filename);
$left = 0; //crop left margin
$top = 0;//crop right margin
$crop_width = 1056;
$crop_height = 400;
$canvas = imagecreatetruecolor($crop_width, $crop_height);
$current_image = imagecreatefromjpeg($filename);
imagecopy($canvas, $current_image, 0, 0, $left, $top, $current_width, $current_height);
imagejpeg($canvas, $filename1, 100);
?>

Sunday 16 September 2012

Saving An Image Retrieved Via cURL

How can save images without use of browser with the help of Curl.

Some time we need save url image help of code without open browser

This function save image without open link.

$url="http://google.com/imagename.jpg";

$ch = curl_init($url);

$fp = fopen(‘folderpath/card1.jpg', 'wb');// folder path where you save image

curl_setopt($ch, CURLOPT_FILE, $fp);

curl_setopt($ch, CURLOPT_HEADER, 0);

curl_exec($ch);

curl_close($ch);

fclose($fp);

Note : One of the main reasons to use cURL to save or display a remote image is that some servers/hosts have allow_url_fopen turned off. This means functions like fopen can’t open files held on external servers.

I hope you have enjoyed this tutorial