Remove spacing in textarea

It’s simple problem for web developers. Sometimes, such problem make us to stop our progress by finding how to solve these problems. This problem is, when we cursor in our textarea box, this cursor isn’t arrived to left align, it stays at center or somewhere else when we create our textarea box as so:

<textarea name=”mytextarea”>
Here is Value….
</textarea>

But, how to solve this problem is kinda simple. Just do so.

<textarea>Here is value</textarea>

How? It’s simple, isn’t it?

Dynamically create textarea with Javascript

One of my projects need our clients to create textarea input dynamically with javascript. Seems it’s kinda simple but actually, create dynamically is simple but how to fetch data from these is kinda complicated. So, I reserach through and thinking of about that. Finally, I gotcha..!! Here you gooo…

Example.html

<form name=”mycomposeForm”>

<p id=”parah”></p>

<input type=”hidden” name=”mytextcount”>

<a href=”javascript:addInput()”>Add more input field(s)</a><br>
<a href=”javascript:deleteInput()”>Remove field(s)</a>

<form>

<script>

var arrInput = new Array(0);

var arrInputValue = new Array(0);

function addInput() {

arrInput.push(arrInput.length);

arrInputValue.push(”");

display();

}

function display() {

document.getElementById(’parah’).innerHTML=”";

for (intI=0;intI<arrInput.length;intI++) {

document.getElementById(’parah’).innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);

}

}

function saveValue(intId,strValue) {

arrInputValue[intId]=strValue;

}

function createInput(id,value) {

return “<textarea cols=’40′ rows=’5′ id=’test “+ id +”‘ name=’test “+ id +”‘ onChange=’javascript:saveValue(”+ id +”,this.value)’ value=’”+ value +”‘></textarea><br>”;

}

function deleteInput() {

if (arrInput.length > 0) {

arrInput.pop();

arrInputValue.pop();

}

display();

}

var arrInput = new Array(0);

var arrInputValue = new Array(0);

function addInput() {

arrInput.push(arrInput.length);

arrInputValue.push(”");

display();

}

function display() {

document.getElementById(’parah’).innerHTML=”";

for (intI=0;intI<arrInput.length;intI++) {

document.getElementById(’parah’).innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);

}

}

function saveValue(intId,strValue) {

arrInputValue[intId]=strValue;

}

function createInput(id,value) {

return “<textarea cols=’40′ rows=’5′ id=’test “+ id +”‘ name=’test “+ id +”‘ onChange=’javascript:saveValue(”+ id +”,this.value)’ value=’”+ value +”‘></textarea><br>”;

}

function deleteInput() {

if (arrInput.length > 0) {

arrInput.pop();

arrInputValue.pop();

}

display();

}

</script>

Multiple File Upload with iFrame

Our GM assign me to do multiple file upload program. At that time, I was supposed to implement with Ajax. But, one of my friends told me that Ajax cannot handle completely if clients upload serveral files. That’s why I have an idea to implement this program with iFrame.

Index.php

<iframe src=”upload.php” style=”width:260px;height:100px;” frameborder=”0″></iframe><br />
<iframe src=”upload.php” style=”width:260px;height:25px;” frameborder=”0″></iframe><br />
<iframe src=”upload.php” style=”width:260px;height:25px;” frameborder=”0″></iframe><br />

Upload.php

<script type=”text/javascript”>
function startUpload(){
if (document.getElementById(’message’) != undefined) {
document.getElementById(’message’).style.display = ‘none’;
}
document.getElementById(’process’).style.display = ‘block’;
document.getElementById(’uploadfile’).style.visibility = ‘hidden’;
return true;
}
</script>

<form method=”post” name=”uploadform” enctype=”multipart/form-data”>
<div style=”text-align:center;”>
<?php
if ($_FILES){
if ($_FILES['file']['error'] > 0) {
echo “<p id=’message’ style=’display:block;’>Fout code: “.$_FILES['file']['error'].”
(<a href=’http://php.net/manual/nl/features.file-upload.errors.php’ target=’_blank’>php-error</a>)</p>”;
}
move_uploaded_file($_FILES['file']['tmp_name'],
“upload/” . $_FILES['file']['name']);
echo “<p id=’message’ style=’display:block;’>Upload!</p>”;
}
}
?>
<p id=”process” style=”display:none;”>
Uploaden…<br/>
<img src=”loader.gif” alt=”loading” />
</p>
<input type=”file” name=”file” id=”uploadfile” onchange=”startUpload();document.uploadform.submit();” />
</div>
</form>

It’s simple, isn’t it?

Upload files with jQuery, Ajax and PHP.

In these days jQuery and Ajax are so popular in web development. One of my clients told me that, they want to upload multiple files without clicking button. That’s why I have had an idea to integrate jQuery, Ajax and PHP.

Download jQuery Here

Download ajax jQuery plugin

Create Upload Button like

<div id="upload_button">Upload</div>

Write following simple coding in your upload form

// You must create it only after the DOM is ready for manipulations
// Use $(document).ready for jquery
// document.observe("dom:loaded" for prototype
new AjaxUpload('upload_button_id', {action: 'upload.php'});

Configure at Ajax Upload

new AjaxUpload('#upload_button_id', {
  // Location of the server-side upload script
  action: 'upload.php',
  // File upload name
  name: 'userfile',
  // Additional data to send
  data: {
    example_key1 : 'example_value',
    example_key2 : 'example_value2'
  },
  // Submit file after selection
  autoSubmit: true,
  // The type of data that you're expecting back from the server.
  // Html (text) and xml are detected automatically.
  // Only useful when you are using json data as a response.
  // Set to "json" in that case.
  responseType: false,
  // Fired after the file is selected
  // Useful when autoSubmit is disabled
  // You can return false to cancel upload
  // @param file basename of uploaded file
  // @param extension of that file
  onChange: function(file, extension){},
  // Fired before the file is uploaded
  // You can return false to cancel upload
  // @param file basename of uploaded file
  // @param extension of that file
  onSubmit: function(file, extension) {},
  // Fired when file upload is completed
  // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
  // @param file basename of uploaded file
  // @param response server response
  onComplete: function(file, response) {}
});

Add following coding in your upload form

//You can use these methods, to configure AJAX Upload later.
var upload = new AjaxUpload(’#div_id’,{action: ‘upload.php’});
//For example when user selects something, set some data
upload.setData({’example_key’: ‘value’});

//Or you can use these methods directly inside event function
new AjaxUpload(’div_id’, {
action: ‘upload.php’,
onSubmit: function() {
// allow only 1 upload
this.disable();
}
});
});

Here is server-side script, upload.php

move_uploaded_file($_FILES["file"]["tmp_name"],
“upload/” . $_FILES["file"]["name"]);

Best Credit To : http://valums.com/ajax-upload

Copy two tables in MsSql

Do you know how to copy two tables in mssql 2000? It’s quite simple.

SELECT *
INTO master.dbo.micro_blog
FROM master.dbo.micro_blog

Limit tag in MsSQL 2005

Hope everybody knows about limit tag MsSql 2005. I feel that’s cool and can reduce the load of SQL query just like mySQL. It’s kinda simple to use this tag.

SELECT * FROM myTable limit 1,10

If we write so, the sql will return starting from the first record, and plus 10 record in the recordset of myTable.

SELECT * FROM myTable limit 20,40

If we write so, the sql will return starting from the 20th and plus 10 record of myTable. How.? It’s easy, isn’t it?

How to export data as Excel format in Cold Fusion

I’m trying to export all of data in my table in excel format by using Cold Fusion. I thought it would be complicated and hard to implement. After reading through Cold Fusion documents, it’s as easy as ABC. Here is sample coding :

<cfheader name=”Content-Disposition” value=”inline; filename=GiftLists.xls”>
<cfcontent type=”application/vnd.msexcel”>

<cfquery name=”PMQry” datasource=”#application.ds#” username=”#application.un#” password=”#application.pw#”>
SELECT P_Name, Org_Name FROM Persons
LEFT JOIN Organizations ON Org_ID = P_Organization
</cfquery>

<table border=”2″>
<tr>
<th>No.</th>
<th>Name</th>
<th>Organi</th>
</tr>
<cfoutput query=”PMQry”>
<tr>
<td>#currentrow#.</td>
<td>#P_Name#</td>
<td>#Org_Name#</td>
</tr>
</cfoutput>
</table>

How? It’s kinda easy, isn’t it?

jQuery

I start learning jQuery which is kinda popular among Web Developer, cos of which is easy to implement, less of coding and more secure than ordinary javascript. But, the style of programming, it’s always updated by programmers and you gotta catch which has been changed in it.

If you wanna learn more, http://docs.jquery.com.

Planet Thingyan

I’ve recently created Thingyan 2009 at Planet Website. It’s just featured page as Planet Style.

jQuery

I’m now learning jQuery, which is powerful toolkit for Developer. It’s easy to use, and don’t need to write long javascript statement in our coding. You can also learn about jQuery there.

jQuery