Free PayPal shopping cart with advanced features

I just have to give this person a mention!

To add a PayPal shopping cart to your website, most would wish to have some of the features of Website Payments Pro. Unfortunately, it costs $20/month plus, typically, a much bigger cost in time and money for a shopping cart that has integrated Payments Pro. However, Mr./Ms. paypalhelper has, for the past three years, been creating cut-n-paste solutions to give you many of the the features of Website Payments Pro for free in JavaScript. No $20/month, no outside shopping cart costs and technical hassles configuring on your server. Here are links to just a sampling of some of their great work:

• View Cart Dropdowns (selects).
• Radio and Checkbox.
• Shipping.
• Coupons.
• Quantity discounts.
  
• Buttons.
• Image Replacement (rollovers and slide-shows).
• Dynamically modify selects. Subscriptions.
• Separate PayPal email. Send Auxiliary information with order, and program a window that controls other windows.
• One-click submission of multiple items. Simple example of Method 2 cart upload with your own pseudo-cart.
• One-click submission of multiple items WITH UPS shipping included. Simple example of Method 2 cart upload with your own pseudo-cart,
• Complex PayPal Single Item Purchase example. Insert JS and just use it.
• Multi-window accumulation of data. Pass user-selected data to second window.
• Multi-window II. Send FORM to 2nd HTML page.
• Document Object (DO) dump example. Stuff JS accesses.
• Client-side Cookie example. Storing data on the client's computer.
• Weight-based shipping in your site. This example uses USPS Priority and Machinable Parcel Post. User inputs his ZIP, and you can calculate
  
• Simple Client-side Cart. This is a complete client-side shopping cart. All calculations are done in this local cart, and no changes are allowed within
• Complex Client-side Cart. This is just about everything that may be done within a client-side cart.
• Hide email and PayPal links from spambots.
• Encrypt HTML data.
• Partially encrypted data. Much better than PayPal's solution,
• Make PayPal buttons validate under XHTML1.1
• Automatically clear FORMs after submission.

Read more!

CSS Font Size Solutions: How to get there from here.

Update: Start with Tripoli.

Credit where credit is due: http://www.websemantics.co.uk/tutorials/useful_css_snippets/ is a fantastic article, best of class in this area.

How should you size fonts using CSS? Many, many choices, each with many, many problems. Here's an excellent and simple solution, formatted ready to be cut-n-pasted into your CSS. Following that are some links and further explanation:

* {margin:0; padding:0}
/* Margin and padding removed from all elements. Adding border:0 is bad: issues with Opera and input radios/checkboxes. */
html {height:100%; font-size:100.01%} /* Sets the window height. */
body {
min-height:101%;
/* Prevent content jumping on fixed width pages: Min page height greater than window height forces vertical scrollbar display in Netscape/Firefox -- IE ignores this setting. */
font:100.01%/130% Verdana, Helvetica, sans-serif;
/* Set font-size to a percentage preventing a Windows IE "extreme font re-sizing" bug.
Set font-size slightly larger than 100% to repair Opera rounding errors.
Set less than 101% to prevent Safari errors.
130% line-height setting is an easy-to-read spacing.
*/
color:#000; background:#fff;
/* Set general color & background. */
width:760px;
/* If you want a fixed width, this is set for 800 pixel wide browser displays. Usability studies show many 800x600 browsers not maximized, this is a common "real-world" user browser width*/
}

/* Browsers vary top margin on paragraphs/headings:
use bottom margin to separate them from elements below. */
p, h1, h2, h3, h4, h5, h6 { margin: 0 0 1.2em }

If centering in IE, add two extra properties to the body, an extra body setting, and create a "container":
body {
text-align:center;
/* Force IE to centre all content, text re-aligned left below */
margin:0 auto
/* Works for IE6, Firefox, Opera, Safari and Netscape; IE5 and IE5.5 need text-align hacks above and below */
}

body * {text-align:left} /* Resets all text aligns to the left */
#container {width:760px} /* centered content goes inside a div with an id="container"


Tips and Further Discussion

Once the body font-size is stated as a percent, ems and percents are equivalent. But scale elements with percents, NOT ems, because there are still some old AOL users with browsers that do not support ems.

Of course if you use
@import "styles.css";

.. your style sheets are hidden from Internet Explorer v4 and Netscape v4 on Mac and PC.

And if you use:
@import"styles.css"; /* Note no white-space and double quotes */

.. your style sheets are hidden from Internet Explorer versions prior to v5.5 and Netscape v4 series on both Mac and PC.

Also use percentages, NOT ems if you want a dimension to scale with the width of its parent (which can be the browser window).

A collection of great links on related topics:

http://www.websemantics.co.uk/tutorials/

From that list, for displaying code on web pages, see:

http://www.websemantics.co.uk/tutorials/displaying_code_on_web_pages/



What are all these icons?

Read more!