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 …

HTML

<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”

Highlighting author comments on WordPress

How to highlight comments made by the article author in your blog. This method doesn’t use hard coded emails making it flexible and easier to implement. It also uses IDs so the comments can’t be faked.

When I was looking for a way to highlight the author comments in this wordpress template I was creating, I had a search on google. Most of the results were Continue reading “Highlighting author comments on WordPress”

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”

Selecting fonts for the Web

While it would be nice if there was a cross-browser cross-platform font downloading system for the web, the current system of Cascading Style Sheets isn’t too bad. It does allow you to select a number of fonts that the browser can cascade through.

This gives you the option to select fonts that fit the look you’re after, but may not be widely available. You can cascade down to fonts that are more widely available fonts.

Or you may wish to use a font that is available on only one platform. In such a case you could check to see if there are similar fonts available in other systems which can be used as a fallback. You can check the commonly available fonts on various systems in this font list. This will also flag the fonts not available on your computer.

If you want to check the similarity between a number of fonts to narrow your choices or to determine the order of the cascade, this font comparer will help your decision.