Archive

Posts Tagged ‘address’

[osCommerce][2.2.x] Ajax Checkout Address

September 16th, 2013 No comments

About Ajax Checkout Address

This a light-weight add-on for changing shipping/billing address directly in Checkout Confirm page.

If you use checkout payment modules like PayPal Express checkout, which obtain address from PayPal website, or using one page checkout, they would skip Checkout Shipping page and bring customers into Checkout Confirm page direct. Customers who want to change default address have to jump backward to Checkout Shipping page and forward causing bad user experience. In this case Ajax can greatly help and allow customers staying in same page with less clicks. A alert would appear if customers didn’t confirm the address before confirming the order.

Note: It would only change the address of the orders, not one in customers’ address books.

Addon link: http://addons.oscommerce.com/info/8911
Support forum: http://forums.oscommerce.com/topic/394493-addon-ajaxcheckoutaddress/

Screenshots

Ajax Checkout Address Edit

Ajax Checkout Address Edit

Ajax Checkout Address Error

Ajax Checkout Address Alert

Ajax Checkout Address Alert

Ajax Checkout Address Confirm

Ajax Checkout Address Confirm

Resize text automatically to fit into a fixed size container using JQuery

September 12th, 2012 No comments

Sometime we want to fix the height and the width of a container and fill text in it as much as it can. For example, we have a customer invoice address box, and we want the address to be shown as large as possible while fitting all in the address box.

In normal case, when the text getting longer and being excessive, it expands the container in HTML. We can put CSS overflow property so it wouldn’t expand the container, but in return, we lose the excess text. So can we resize and scale the text automatically to fit into the container without losing and text? One approach checking the text length in PHP and resize their font-size to maximum possible, but the text size can be different across browsers and this does not work on dynamic text (where the user can input and change the text). Therefore, the easier and more accurate way is using JQuery.

There is a light JQuery plugin TextFill can do the job easily. (demo)

HTML

<div id="myTextFillContainer" style="width: 200px; height: 200px;">
  <span>blah blah blah text to be auto-sized</span>
</div>

JQuery

$(document).ready(function() {
    $('#myTextFillContainer').textfill({ maxFontPixels: 36 });
});

Simply select myTextFillContainer div and use the textfill() function, input a max font size to be 36px, that’s it!

Screenshots

Long Text

Long Text

Short Text

Short Text

Variety

We can have multiple containers with different text tag other than span:

$('#myTextFillContainer1').textfill({ minFontPixels: 10, maxFontPixels: 20, innerTag: 'div' });
$('#myTextFillContainer2').textfill({ minFontPixels: 5, maxFontPixels: 10, innerTag: 'span' });
<div class="myTextFillContainer1" style="height: 180px;">
  <div>blah blah blah text to be auto-sized</div>
</div>
<div class="myTextFillContainer2" style="height: 120px;">
  <span>blah blah blah another text to be auto-sized</span>
</div>

There are few common options:
minFontPixels: the minimum font size
maxFontPixel: the maximum font size
innerTag: the text wrapper tag
complete: callback when all is done