Code
Build a Simple Content Slider from Scratch
JavaScript libraries like jQuery, Prototype, YUI, and MooTools abstract many common JavaScript functions and eliminate most cross browser concerns. But for some projects these resources might be more than is required. Moreover, frequently using a ...
Web Safe Fonts and Beyond: Embedding Custom Fonts in Your Development Projects
The World Wide Web Consortium's (W3C) @font-face rule allows web developers and designers to embed custom fonts in cascading style sheets. This allows Internet developers to include unique, brand-appropriate typography that is not likely to be on...
CSS for an Apple-like Brushed Metal Menu
In April, Ecommerce Developer contributor Drew Coffin published a great Adobe Photoshop tutorial about creating the graphics for a "Brushed Metal" top navigation bar. Drew's tutorial was a hat tip of sorts to Apple's award-winning website and the...
Hover-to-Play Ecommerce Videos with HTML5, CSS, and JavaScript
Popular women's apparel and accessory brand Roxy has introduced a great hover-to-play product video feature to its well designed website. The feature transforms what appear to be product images into product videos when a shopper hovers, providing...
Create a "Quick View" for Product Images
In ecommerce, sales conversion is, perhaps, the single most important measure of a successful site, so ecommerce web developers and designers are wise to focus their code and aesthetics on what will transform a digital window shopper into a paying...
Creating A Dock Menu Effect: Part 2
Apple's Mac OSX dock is one of the most attractive computer user interfaces of the past several years. In "Part 1" of this two-part series, I started recreating this excellent visual effect on any website or application. In Part 2, I'll fini...
Creating A Dock Menu Effect: Part 1
I've seen a lot of Mac OSX style docks out there. Some of them are very well made, and some not. Perhaps the popularity of the dock is a testament to its versatility and user-friendly interface that Apple's operating system exhibits. In this firs...
Embedding SWF with jQuery Flash
The Flash plug-in for jQuery is a very lightweight option for embedding Flash movies. I typically use swfObject, but I decided to give this a try on a recent project and was pleasantly surprised. In this tutorial, we'll go through the ins and outs...
Full 360-Degree Product Image Rotation in JavaScript
Product imagery and video are extremely important aspects of on-site merchandising that can have a significant impact on an online retailer's success. And, to a great degree, web developers have a responsibility to their clients to help include sa...
Embedding Assets in Flash
A common way to make assets, such as graphic, audio and video files, available at run time is to import the assets into your Flash library and check "Export to ActionScript" in the Properties dialog. But there are some drawbacks to including ass...
Embedding Fonts in Flash
Embedding fonts in Flash can be tricky and can really bloat the size of your SWF file if you're not careful. Large SWF files can lead to slower load times and a reduction in overall site performance. In this tutorial, we'll package an OpenTyp...
The Benefit of Putting AJAX and CodeIgniter PHP Together
Asynchronous JavaScript and XML (AJAX) is a very helpful scripting technique that allows a website or web application to exchange data with a server and update portions of a page without reloading or re-rendering the entire page. As a result, AJA...
Checkout Form Customization Techniques Using jQuery
Every ecommerce development project—almost by definition—includes a checkout form. Users will provide contact or billing information, a shipping address, and other personal information. As a developer or designer, the aim should be to make that fo...
Google Maps API for Flash
Google Maps is one of the best things to hit the web since video tutorials. If you're developing for a multi-channel merchant that has both an online store and brick-and-mortar-shops, you'll almost certainly want to integrate location information ...
Try CSS 2D Transforms Today
The World Wide Web Consortium's cascading style sheet (CSS) 2D Transforms Working Draft describes new ways for web designers and developers to rotate, skew, scale, and reposition HTML elements. The CSS 2D Transforms Working Draft allows for two ...
Augmented Reality Using FLARManager and Papervision, Part 2
In part two of our augmented reality (AR) video tutorial, I'll create a custom AR scene. Using the custom pattern I created in the previous screencast, I'll use Papervision to develop a three-dimensional sphere. I'll then import a bitmap image of...
A Book to Help Make the Transition from Designer to Developer
Web designer. Web developer. The terms are not interchangeable. A web designer often has skills in HTML and CSS as well as training or experience in graphic design. A web developer typically writes code, JavaScript, Java, PHP, Ruby, ActionScript...
New Flash Content Switcher Spices Up Site Design
CU3ER is a Flash-based, three dimensional content switcher that provides smooth, spin, flip, slice, and shade-image transitions. Stefan Kovac, a Novi Sad, Serbia-based interactive designer, created CU3ER, and provides it to designers with a fairl...
Augmented Reality Using FLARManager and Papervision
Augmented reality mixes real-world and computer-generated imagery. In ecommerce solutions, it is often used to simulate the experience of trying clothes on in a brick-and-mortar store. And in general, augmented reality is one of the newest trend...
Develop an Enumerator Class to Step Through Objects in an Array
Developing methods to enumerate, or step through, data sets is vital in any object-oriented programming (OOP) language, and ActionScript is no exception. I developed an enumerator helper class a couple of years ago, and I've used it in just abou...