You must have run into the problem of height property of a DIV not being active when it contains floating DIVs. This is because when you set the CSS property of a DIV to either float left or right, it starts floating to the respective direction and hence the height is not retained for the parent element.

The following screenshot clearly demonstrates that the “Main” DIV does not extend with the other two DIVs, “Left” and “Right”.

Fortunately, there is a simple trick to overcome this problem. If you set the CSS property “overflow” of the main DIV to “hidden” it will cause it to stretch the full height of the other two DIVs. This is shown in the screenshot below:

The CSS for the above example is:

.main {
	background-color: #666;
	width: 100%;
	text-align: center;
	overflow: hidden;
}
.main .left {
	background-color: #00c;
	float: left;
	height: 200px;
	width: 150px;
	padding: 5px;
}
.main .right {
	float: right;
	height: 200px;
	width: 150px;
	background-color: #093;
	padding: 5px;
}
body,td,th {
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
	font-weight: bold;
}

And the corresponding HTML code:

<div class="main">
  <div class="left">Left Floating DIV</div>
    <div class="right">Right Floating DIV</div>
    Main DIV Content  </div>

Note the “overflow: hidden;” for the CSS rule “main”.

IMPORTANT UPDATE!

Payoneer has resolved the issue. They are issuing new Choice Debit Cards to their card holders. I received an email from them, confirming they have issued a new Choice Card at my address. This card will have no restriction, like cash withdrawl. Thanks Payoneer.

At May4, 2010, I received this unfortunate email from Payoneer:

“Dear Customer,

Due to a change in requirements from our regulators, as of June 1, 2010 Payoneer cards will be blocked for transactions in the countries listed by the US government as having strategic Anti Money Laundering (AML) deficiencies. This change will affect card usage in the following countries: Angola, Ecuador, Ethiopia, Pakistan, Turkmenistan and Sao Tome and Principe.

If your card is in use in one of the countries listed, we encourage you to use all funds by May 31, while transactions are still possible in these countries.

Please note that beyond May 31 your card will continue to be fully functional in all countries not banned by the US government, and we will be happy to load payments to the card without any change.

We apologize for the inconvenience and hope that the Payoneer card will continue to provide you with valuable service.

Please feel free to use our Contact Us page for any additional questions.

Sincerely,

Payoneer Customer Support”

Indeed it was a great set back for all the coders who use Payoneer Master Debit Card to receive money from freelancing web sites like RentACoder.com, Elance.com, FreeLancer.com

But then a hope aroused when I received the following email from Payoneer at May 12, 2010:

Dear Waseem Khan,

RentACoder is glad to provide you with the new Choice Prepaid MasterCard®, with higher daily withdrawal and spending limits, to replace your current Prepaid MasterCard.

Similar to your existing card, the new Choice Prepaid MasterCard is a debit card and can be used at ATMs, at stores and online.

Choice MasterCard limits:
The daily ATM withdrawal limits is $2,500.
The daily purchase limit (at stores/online) is: $2,500
Total daily spending limit – $5,000

This card will replace your existing Prepaid MasterCard.

To order the new Choice card, please login to your Payoneer My Account at www.payoneer.com, and request a new Choice Prepaid MasterCard.
The new card will be shipped to you within a few days, without any shipping charges or Activation fee.

Order your card within the next 30 days. You can use your current card until you get the new card. Your existing card will be closed within 2 months.

Once you received the new card and activated it, Funds and services associated with your existing card will be transferred automatically to the new card.

Help and support
If you have any questions, please contact us at Payoneer Contact Form
We also have live online help at www.Payoneer.com
Thank you,
Customer Support
Payoneer, Inc.

I immediately applied for the new Choice Card with the hope that it will resolve the issue but it was still unclear that the new choice card was above all restrictions or the restrictions in the banned countries like Pakistan remain intact. So I contacted Payoneer about this issue. Hence at May 25, 2010, I received the following reply from Payoneer customer support:

Subject: [WEB Form] Category: Card Usage, Subject: Other, Program: Rent A Coder

Dear Customer,

Thank you for contacting us.

We are currently in a process to be able to provide our service to Pakistan, please try again within 2 weeks.

Please feel free to contact us if you have any additional questions.

Sincerely,

Ray

Payoneer Customer Support

At the time of writing this article, 6 business days have been passed. I  amd waiting and hope that they will come out with a solution. If you have any other update from Payoneer, please do not hesitate to post it in comments. Thanks.

A comprehensive tutorial explaining step by step of how to effectively slice a PSD to be used in PSD to xHTML conversion.

This tutorial is a detailed step by step guide to slice a PSD into images that can be used to build the xHTML web page.

The PSD file that I have chosen is downloaded from a free web templates web site and is shown below.

Click here to download the PSD file.

Before you continue you must have Adobe PhotoShop installed on your system. I have used Adobe PhotoShop CS4, so if you have the CS4 version, it is more than good. Lets start by opening the PSD file in PhotoShop. Once opened, it will look like:

PhotoShop have a “Slice” tool, specially designed to slice images. You can select the “Slice” tool by right clicking the tools box on the left, starting from top to the tool number 5. This is shown below:

With the “Slice” tool selected, we can now move to slice the PSD.  But first, uncheck the “Snap” option in the “View” menu at the top as shown:

If the “Snap” option is checked, any selection you make using Slice tool, the PhotoShop will try to bind the selection to the boundary of the object layer and we do not want this.

Now starting from the logo on the top right. Drag mouse around the logo and make a selection as shown:

Next, to get the background image for the menu under the logo, we need to slice the background red gradient image. As you can see, the menu text is on the top of the background gradient. We need to hide this text otherwise once we save the images, it will get merged with the gradient. This is to ensure that the menu is a text based not using images for the text. So click on the text “Home Page” on the first menu item. It will select the layer containing this text. Open the layers tab on the right by clicking on it and scroll through the layers’ list until you get a layer highlighted in blue color. This is the layer of the selected text. You can see an “Eye” icon left to the layer “Home Page”, click on this icon to hide the layer and you get the result like:

For high precision, you can zoom the view. Click the “Zoom” icon at the bottom of the tools to zoom it to 200% as shown:

Now you can either use the scroll bars or you can use the “Hand” (the hand icon in the left tool bars) tool to bring the desired portion of the image to the screen.  The menu portion, zoomed to 200%, and brought to the main screen:

We now slice the menu background in a similar way as for the logo. This is shown below:

You can see two images under each of the headings “Welcome to our company!” and “Our services”. We slice them too:

Next to the above images, on the right, the three dots arranged in a triangle, is an image and need to be sliced similarly as shown:

The last images that needs to be sliced is the footer gradient image. We just need a vertical bar image, extended to full height of the footer background image and having a width of round about 5 to 10px. The reason that we are only taking a strip out of the whole image is that in xHTML, we can use this image as a background and can make it to repeat horizontally. This will give the same result with reduced image size. The sliced strip is shown:

Once, we have set up all the slices, it is now time to save these slices as individual images so they can be used to make the equivalent xHTML web page. In Adobe PhotoShop CS4, there is an option “Save for Web & Devices…” under the “File” menu. This is shown as:

Click on the “Save for Web & Devices…” and it will bring a window as depicted below:

Here too, you can use the “Hand” tool to grab the image area you want to focus on main screen as shown:

Using the “Hand” tool, the logo section is made visible which otherwise is hidden to the right.

Now select the “Slice Select” tool under the hand tool as shown below:

With the “Slice Select” tool selected, click on the logo image “BUSINESS COMPANY”. A border appears around the image as soon as you click. This means the the current slice is now selected and you can change the options given at the right of the window.

While, other options are used seldom, the image type option needs customization. As you can see in the image below, there are image type options in the drop down list as GIF, JPEG, PNG-8, PNG-24 and WBMP. the common formats are JPEG and PNG-8. The choice of using any of the formats given depends on the color depth and the image size of the sliced image. Try to select different image formats given and at the same time check the image quality and its size (image size is given at the bottom left of the window). After hit and trial between the options JPEG, PNG-8 and PNG-24, I selected JPEG, since it produced the most reduced slice image size and good image quality as well.

As you can see the, the image size is 1.042K when JPEG is selected and is higher for all other options. You can see the image size at the bottom left corner of the window:

Now do the same for the the menu background image, the two images under the headings “Welcome to our company!” and “Our services” and the three dots triangle image.

The last image is that of the footer gradient image as shown below:

Use PNG-24 option as it gives the best result.

Now click the “Save” button at the bottom right left to the “Cancel” button. This is show below:

A “Save File” dialogue will appear. Make sure you select the “XHTML” option for the “Settings” and “All User Slices” for the “Slices” options. Provide “File name” of whatever you like or the name of your web site. I have put “mywebsite” so images will be stored as “mywebsite_1” and “mywebsite_2” etc.

Click the “Save” button after providing the directory where you want to store the images. The resulting images are shown below:

One last image remains, the image with the big red gradient and the pictures of two women and two men. There are several ways to slice these images, one way is to save the two men and two women image as a transparent background image and the red gradient image as another separate image. I have followed the other way. First remove all the other images, i.e. the logo image and the menu images/text from screen. You can removed these images either by selecting each image and hiding it through the layers panel as discussed earlier or you can simple select an image and press “Delete” on your keyboard. Please make sure that the arrow shaped icon is selected before you click on an image. This icon is the first in the tool bar at left. In case, you accidently delete the background gradient image press “CTRL + ALT + Z” on your keyboard to undo the action. The final product is shown below:

To get the image, we use the “Crop” tool. You can select the “Crop” tool from the same location as you did for the “Slice” tool. Right click the place from where you selected the “Slice” tool and select the “Crop” tool as shown:

With the “Crop” tool selected, mark a rectangle around the image starting from the top and extending downwards, till the gradient image ends as shown:

The other areas of the image will fadeout. Click the “Check” sign on the top right to crop the image:

The result is shown:

Now save this image using the same procedure, click “Save for Web & Devices…” in the “File” menu and choose the appropriate file format as done for the slices and click save.

The above image can be used as a background image while the logo and the menu can be put in an absolutely positioned DIV.

I next tutorial, I will create the xHTML web page out of those images. So keep visiting for the next tutorial. If you have any comments/suggestions/questions, please write them in the comment box.

Free simple AJAX library is an extremely light weight AJAX library with which you can make an AJAX call with only one line of code.

Size:
The size of the library is only 3 KB.

Download:
Download Simple AJAX Library

Usage:
You need to initiate an object of the Ajax class. The Ajax requires four parameters.

var AjaxObject = new Ajax([string] URL, [string] Method,  [string] Parameters, [string] Callback function, [string] Type of data returned);

• URL, is the URL string to which you want to make either GET or POST Ajax request. A sample string is “actions/login.php”.
• Method is the type of method by which you want to send data. This can be either “GET” or “POST”. If you want to send a large amount of data, I recommend using “POST” method.
• Parameters is the string containing the parameters to be sent to the server. Whether you choose, GET or POST method, the syntax of sending the parameters is same. For example, “username=waseem&password=khan”
• Callback function is the name of the function which will be called when the data is returned from the server via the AJAX call. Please note that you must only write the name of the function like “sampleFunction” with out the parenthesis like “sampleFunction()” else it will not work. Then you have to define this function somewhere, preferably after the AJAX call. This function will accept one parameter which is the data returned from the server. An example of such a function is:
  function sampleResponseFunction(retunedData)
  {
  // do something here with the retunedData
  }
• Type of data returned is the last parameter, this specifies the type of data you want to be returned via the AJAX. You can set it to either, “Text” or “XML”. The data type of the callback function parameter will be the either plain text or XML format.

Sample code to make an AJAX call using the Simple AJAX library is as below:

<script type="text/javascript" language="javascript" src="../ajax.lib.js"></script>
<script type="text/javascript" language="javascript">

var ajax = new Ajax("ajax.server.php", "POST", "name=khan", seeTheResponse, "Text");
function seeTheResponse(response)
{
	alert(response);
}

</script>

If you have any difficulty using the library or have found any bug, please comment in the comment box. Thank you!

How to make a DIV movable using JavaScript. An absolute positioned DIV can made movable by adding a bit of JavaScript logic.

I have written a JavaScript to make a DIV movable, the size of the script is only 4KB.

You can download the script with example:

The HTML for the DIV is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Moveable Div - www.Web-Tricks.info</title>
  <style type="text/css">
  <!--
  #testdiv {
  width: 286px;
  position: absolute;
  z-index: 1;
  background-color: #006;
  left: 283px;
  top: 211px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  color: #FFF;
  padding: 20px;
  cursor: move;
  }

  #testdiv a {
  color: #FFD;
  }
  -->
  </style>

  <script type="text/javascript" language="javascript" src="drag.js"></script>

  </head>

<body>

  <div id="testdiv" style="left: 283px; top: 211px;" onMouseDown="dragStart(event, this.id)";>

  <p>Moveable Div brought to you by</p>

  <p><a href="http://www.web-tricks.info">http://www.Web-Tricks.info</a></p>

  </div>

  </body>

  </html>

The JavaScript for moving the div is:

// Coded by Waseem Khan
// Developer at PakCoders
// Downloaded from http://www.Web-Tricks.info

function getID(id)
{
	return document.getElementById(id);
}

// Determine browser and version.

function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    return;
  }

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    return;
  }
}
var browser = new Browser();

var dragObj = new Object();
function dragStart(event, id) {
  var x, y;
  dragObj.elNode = getID(id);
  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}

function dragStop(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}

It really moves me when I see a lot web developers and software engineers, not having the real business in Pakistan due to unavailability of PayPal.

However, there are some alternate ways to suffice for the merchant solutions and the coders in Pakistan, can still sell their products/scripts/software by using other merchant solutions. Here are a few of them:

2Checkout.com

2Checkout (2CO) provides the software vendors to sell their products online, accept credit cards and even accept payments in PayPal, without having a PayPal account.

This is one of the most reliable merchant solution available  but it does have a $49, one-time, sign-up fee.

One limitation which 2CO posses is that you can only link your 2CO account to only one web site. This means that you can only sell products/services from only one web site.

You can signup for a 2Checkout account at: https://www.2checkout.com/

Plimus.com

Plimus is a bit less common than 2Checkout merchant solution. It has all the features available in 2Checkout.com (like processing credit card, paypal payments) and most importantly, it is absolutely FREE to signup.

They have a template system for the checkout pages and therefore the checkout page can be customized to blend with your web site theme.

Plimus.com also do not put the limitation of only one web site. You can use it on multiple web sites.

You can signup for a free Plimus account at:

https://secure.plimus.com/register/

Besides credit card and PayPal payment options, both 2CO and Plimus have numerous other payment methods but I have only mentioned the ones which are more important for the Pakistanis.

There are multiple instances when you need to store the data as a file instead of outputting it in the browser. One common example is to store the data in a CSV (Comma Separated Values) file. You can output a file saving dialogue sending appropriate headers to the browser. Below is the example written in PHP. The code is commented so I hope there will be no difficulty in understanding.

 <?php // save the CSV data in a variable
  $csvData = "name,email\n";
  $csvData.= "waseem,waseem@waseem.com\n";
  $csvData.= "ikram,ikram@ikram.com";
  // filename to save data
  $filename = "sample.csv";
  // open file in write mode
  $fh = fopen($filename, "w");
  // write data to the file
  fwrite($fh, $csvData);
  // close the file
  fclose($fh);
  // send headers to output the CSV data as a file
  header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
  header("Content-Length: " . strlen($csvData));
  header("Content-type: text/x-csv");
  header("Content-Disposition: attachment; filename=$filename");
  echo $csvData;
?>