June 2011

Ask For Confirmation When Leaving a Page

Ask for confirmation when leaving a page in javascript is useful when you have a multistep form or lengthy form that the user may expect to be saved. This code will execute whenever the page is about to be unloaded, to include clicking any links to a new page, using the forward/back buttons of the browser, and when using the address bar to go to a new site or page.

var warning = true;
window.onbeforeunload = function()
     if (warning) 
    return 'You have made changes on this page that you have not yet confirmed.

Fix USPS Shipping Methods Not Showing at Checkout

Setting up USPS isn't the easiest thing to do in Magento. After signing up for Web Tools and entering the gateway URL and my User ID in the USPS shipping method, the only method that showed at checkout was Library Mail. Fix this by doing the following:

Copy app/code/core/Usa/Model/Shipping/Carrier/Usps.php to:


Find this line of php around line number 279:

Prevent the Enter Key From Submitting a Form: javascript char codes (key codes)

This snippet will prevent the enter key being pressed from submitting a form or clicking the button that is in focus. Replace #foo with the id, class, or element.

HTML5 <meter> tag -

Storage space usage: 6 blocks used (out of 8 total)
Voter turnout: 75%
Tickets sold:

HTML5 <svg> tag - Scalable Vector Graphics

<svg id="svgelem" height="20" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="10" cy="10" r="10" fill="green" />

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.

Cross Browser Drop Shadows

-moz-box-shadow: 0px 6px 8px #111111;
-webkit-box-shadow: 0px 6px 8px #111111;
box-shadow: 0px 6px 8px #111111;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#222222')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#222222');

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

Browser support is growing of late with Mozilla (Firefox