Drag-n-Drop with HTML Canvas

This example shows how to implement drag-&-drop in a HTML Canvas using javascript. It’s done using plain old Javascript, i.e. without using any libraries like JQuery or moo-tools etc.

The main pitfall to look out for is any scaling done as a result of CSS sizing. The actual width and height of any visual element as calculated by the browser is a combination of all styles that match the element, and as such it may differ from the size specified in the html attribute, as well as to that of any single CSS definition. You should get this in JavaScript using the offsetWidth, and offsetHeight properties of the object.

Anyway, here is the code for the example …


<canvas id="canvas" width="400" height="300"></canvas>
<div id="status"></div>

Continue reading “Drag-n-Drop with HTML Canvas”

Minimum and Maximum widths in IE6 CSS

Setting minimum and maximum widths for a web page in IE6 using proprietary CSS expressions, and adding the stylesheet using Internet Explorer conditional comment tag.

In a previous article I showed you how easy it is to create a constrained fluid layout i.e. one with a minimum and maximum widths. While this works on all standards compliant browsers, it doesn’t work in Internet Explorer 6. Continue reading “Minimum and Maximum widths in IE6 CSS”

Constrained Fluid Layout

How to have a fluid web layout, and still have control over the layout width.

Users of the web all have different screen sizes, and not everyone uses the browser in the maximised state, especially those with large screen sizes. There are also a wide variety of portable devices with web browsing capabilities e.g. the Nokia n800, n810 and of course the iphone. Even many of the Portable Continue reading “Constrained Fluid Layout”