1. Design of Motion Jesse Hodges - AspDotNetStorefront

3. Alerts and Messages

5. Direct

6. Easy to get wrong

8. In Process

9. Stuck on IE6

11. A really nice way to code it "right"

12. Very powerful when writing controls

13. Hand Crafted

14. Less obtrusive

16. InsertAjax loads an external page and replaces the the innerHtml of an element with the result

18. The above xml package demonstrates how to use the allow engine attribute (which defaults to false). After setting the attribute to true your package will be available to the xml package engine methods, e-packagename.aspx and x-packagename.aspx. To include the skin use e-packagename.aspx. To run the package without the skin use x-packagename.aspx.

20. The above function, updateMiniCart, will insert the AJAX response into the target div, vMiniCart. This method should be called when the item is added to the cart. The random number appended to the request URL keeps IE6 from caching the AJAX response.

22. The more direct you can be with your users, the better.

23. Let us show the item moving to the cart.Movement Demo

24. MoveElementToElement This function should be called when initiating the AJAX call. It clones the element being passed in (the product image), positions the clone absolutely, animates the clone moving to the cart, and then removes the clone.

26. Find a balance

27. Let the user chooseLightbox Demo

28. For this example we will use a jQuery plugin called ColorBox. The above html will be created for each product on the category page. It is a link to the product page using x-dash so that it does not include the skin. We also pass “isquickview” on the query string so that we can toggle elements on the product page if the product is being viewed from quickview. We then tell ColorBox to open all links with the class “productquickview” in a lightbox. In order to use the product xml package in this way we must set it’s “allowengine” attribute to true. This will allow us to call x-product.ajaxproduct.aspx?productid=42&isquickview=true.

30. Browser Implementations

31. CSS Attributes

32. -webkit

33. -moz

34. The technology is ready, most development stratagies are not.HTML5 Demo

35. The 8 lines of css above use CSS 3 to animate the cart dropping down when the user hovers over the minicart. –webkit-transition takes 3 parameters: attribute to animate (height), duration (1s), and transition type (ease-in-out). Note that mozilla based browsers have a similar attribute named –moz-transition. The example above has a hard coded height per row. Unfortunately transitions do not yet support percent correctly.

37. Descriptive Markup

38. Drawing

39. Drag and Drop