Archive for 'August, 2009'

simpleCart(js) is a lightweight, fast, and simple to use fully customizable JavaScript Shopping Cart. You do not need to have any programming knowledge to use it. All you need to know is basic HTML to setup this small (under 20kb) shopping cart.

Features include:

  • Very easy to use (you do not need any JavaScript knowledge; you can add items for sale with simple HTML class names.
  • Multiple currencies (sell items in GBP, Canadian Dollars, Euros etc.)
  • Tax Rates
  • Works with PayPal and Google Checkout
  • You can increment, decrement, and remove buttons to your cart.
  • Flexible Cart Options (Items can be rearranged, the HTML tags as well etc.)


simpleCart(js) 2 was completely rewritten from scratch to bring you a more flexible and simple API to get a custom shopping cart up and running quicker than ever.

jCaption is a JQuery Plugin designed to make adding captions to a page very simple. It uses an attribute of the image element to build the markup for a caption. The plugin allows for both arbitrary styling and mark-up.


Features include:

  • Animated captions (the duration of the animation can be specified)
  • Follows JQuery conventions
  • Arbitrary markup (other markup, besides the tag that is required, is arbitrary)
  • Allows placement from text-editors

Web-Editors like tinyMCE or FCKditor allow users to align images to the left or right of text. Depending on the version, this is accomplished using the “align” attribute or “style” attribute. This plugin accomodates both and makes sure that the caption is correctly placed as well.

ImageCaption is a very customizable and painless to style MooTools 1.2+ plugin for easily adding figure captions to image elements on a web page. It follows standard MooTools coding style and documentation.


Auto-Growing Textarea with jQuery and MooTools

Posted on August 11, 2009, Filled under JavaScript,  Bookmark it

AutoGrowing Textarea JQuery Plugin was inspired by Facebook’s auto-expanding text areas and makes it easy to have auto-growing textareas. The textarea grows and shrinks to fit it’s content, but does not exceed the minimum height you specify via CSS.


Required TextArea CSS Attributes:

  • line-height
  • min-height

You are required to have some basic styles for your textarea for it to work properly, but it’s really not that hard. The solution is simply to create a hidden div that mimics the textarea’s style and then when the height of the div surpasses the height of the textarea, we adjust the size of the textarea.

Flext: MooTools Auto-Growing Textrea Plugin, by Graham McNicoll

flext-mootools auto-growing-textrea-plugin

Features include:

  • Very easy to implement
  • Grows text areas when needed
  • Maximum Height to Grow To
  • Can grows parents if they have a fixed height
  • Ghost text/text overlay for input context and help
  • Text input emulation (enter can submit form, instead of new line)

UIZE, free open source JavaScript ToolBox allows you to create more effective user interfaces in your Web-Based applications and services. This framework implements systems for JavaScript Inheritance, JavaScript Events, JavaScript Templates, JavaScript Widgets, JavaScript Code Compression and many more powerful capabilities.


Features include:

  • It is server agnostic (can be used with any choice of server language and platform)
  • Does not extend native objects, and supports interoperability with other libraries that adhere to this principle
  • Supports widgets, AJAX, DOM, templates, and more

You can call it an “Ajax Framework”, an “Ajax Toolkit”, a “JavaScript Framework”, a “JavaScript API”, a “JavaScript Toolkit”, a “JavaScript Toolbox”… whatever you like! We call it the UIZE JavaScript Framework (or just “UIZE” for short).

ColorSuckr, a project by Paul Burgess, is useful to create color schemes based on photos for use in your artwork & designs. The application extracts the most common 12 colors from the submitted image and also gives you the option to see the color scheme for each one. You can drag and drop the color results around the page, click on the color strip, hold and drag, let go to drop. The color text can also be shown and hidden by clicking the small grey dot next to the strip. ColorSuckr has also a nice feature: if you enter the URL to a web page, all the images that are found in that page are retrieved so you can choose which one would be parsed. Things can get even easier with the ColorSuckr Add-on for the FireFox browser. After you install the add-on, you can simply right click any image on a webpage and choose ‘Extract Image Colors’.


iPhone-style Checkboxes is a progressive enhancement for standard HTML checkboxes which transforms them into the beautiful iPhone toggle switches. The change is purely visual as the underlying checkbox is not touched. The usage of the iphone-style-checkboxes library is very simple. Unzip the downloaded package, place the JavaScript, images and stylesheet where you please. Make sure to update the stylesheet to point to the new location of your images, if they have changed relative to the stylesheet.

Read more from this entry…

jCryption is a JavaScript HTML-Form Encryption JQuery Plugin, which encrypts the POST/GET-Data that is sent when a form is submitted. For the calculation it uses the Multiple-precision and Barrett modular reduction libraries and JQuery. The data is encrypted on the client side (JavaScript) and decrypted on the server (PHP).


Features include:

  • It is easy to install, use and extend
  • RSA form data encryption up to 2048 bit
  • AjaxSubmit supported
  • no SSL required
  • Does not block the browser on calculations

jCryption first serializes the form, converts the string into hexadecimal values which is required to encrypt it. When the keypair was generated on the server, the script receives it, encrypts the string with the public key and sends it to the sever where the string will be decrypted. When this is done you have your original serialized string back which is equal to a normal form submit (GET or POST).

A while ago I have written a short tutorial of how you can write a short PHP function to extract content from specific delimiters. I has come to my attention that many people are looking for a way to replace and even modify content between 2 delimiters. Therefore I have decided to write a script that can help them with this endeavor. Uses regular expressions to find and parse the matched content.

Replace all the content found between the delimiters

function replace_content_inside_delimiters($start, $end, $new, $source) {
return preg_replace('#('.preg_quote($start).')(.*)('.preg_quote($end).')#si', '$1'.$new.'$3', $source);

As you can see the function uses 4 arguments. The first 2 two are the delimiters (the beginning and the ending one), the 3d is the replacement string and the last one is the main source that is parsed.

$data = '<body><div class="wrap"><div class="inside">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div></body>';

$start = '<div class="inside">';
$end =  '</div>';

$replace_with = 'PHP: Hypertext Preprocessor';

$str = replace_content_inside_delimiters($start, $end, 'PHP: Hypertext Preprocessor', $data);

echo $str;

// Result: <body><div class="wrap"><div class="inside">PHP: Hypertext Preprocessor</div></div></body>'

Filter the content found between the delimiters

In case you need to modify the text between the delimiters here’s how you can do it:

$source = '<div class="subtitle">PHP is a widely-used general-purpose scripting language for web development.</div>';

$start = '<div class="subtitle">';
$end = '</div>';

$data = preg_replace('#('.preg_quote($start).')(.*)('.preg_quote($end).')#si', '$1'.parse_content($new).'$3', $source);

function parse_content($content) {
$words = array('PHP', 'scripting', 'development'); // Let's bold some words!

foreach($words as $word) {
$content = str_replace($word, '<strong>'.$word.'</strong>', $content);

return $content;

How it works?

The regex uses the \s and the \i modifiers. The former (aka: DOTALL) makes dot a special character that matches newlines too. The later matches the characters in insensitive mode.

Simple and Easy to Customize XML based CMS: GetSimple

Posted on August 5, 2009, Filled under PHP,  Bookmark it

If you are looking for a way to manage a small business site, GetSimple, a XML based lite Content Management System, is the simplest way to do that. It doesn’t use MySQL to store the information. Instead it depends on the speed and accuracy of XML. This way you can stay away from an extra layer of slowness and complexity associated with connecting to a MySQL database. The application is very simple to install and easy to customize.

Features include:

  • XML based data storage
  • Best-in-Class User Interface
  • ‘Undo’ protection & backups
  • Easy to theme
  • Great documentation


Designed For the Small-Site Market
This is one of the reasons GetSimple uses XML rather than a robust database such as mySQL. For most small businesses, their only real need is to be able to easily update their site without the need of a ton of extraneous rarely used features. GetSimple’s goal is to manage small websites efficiently and effectively.