Category Archives: HTML & CSS

Mouse Clicks for HTML5 Cavas Entities via Paths

Posted on by
Reply

The canvas element in HTML5 is exciting because it really opens the doors to games, drawing, and animation. This is especially exciting as browsers hardware accelerate canvas and improve its performance. What isn’t so exciting though is that you do have to do a lot more for yourself.

So if you draw something into the canvas, you don’t get to attach event listeners on the objects you create within the canvas, just on the canvas itself. This means that you have to build your own event system. This isn’t that difficult if you organize your entities you’re drawing and rely on isPointInPath to do the searching for you.

Overview

When you use path methods, like arc, bezierCurveTo, or lineTo, the 2D context keeps track of things really nicely for you. After you add your path, you can ask the context whether or not a point is within the area of said path via the isPointInPath method.

The way to find the object is to render each entity in reverse order, draw the path, and then check to see isPointInPath. The reason to go in reverse order is because the most visible, unobstructed object is at the last index in the rendering order.

Paths are great because they are fast, but they are pretty plain. What you if you want to draw images? Well there’s no rule that you can only use one canvas. This means that you can use one canvas to draw your main stage with images, and then use the light-weight paths to draw the hit detection area.

The demo will draw the earth and the moon and will print a the name of the selected planet.

Continue reading →

Safari 3.0 and the Submit Button

Posted on by
3

Safari has come out with their public beta and every is excited because the browser is now available for Windows XP/Vista; but there is also a beta available for Mac users.

So I downloaded it and I started to use it. I love the ability to resize text areas and there is a Web Inspector (only for OS X) that allows you to see what properties are available to HTML nodes and their styles.

So I was using it and I noticed something: Safari now styles submit buttons. Do you remember that aqua button that you could never do anything to? Well now it responds to border stylings and the like. Interesting.

Mimicking the :hover Pseudo-class in IE

Posted on by
16

Internet Explorer frustrates the living hell out of me. Event though IE 7 is finally out, it doesn’t mean that IE 6 can be ignored. I really look forward to the day when my CSS(cascading style sheet) files aren’t full of unnecessary classes and hacks because the major browser vendors got it right and because everyone has casted away the garbage. Until then, I am still in search of tricks to simplifying my life.

One of these tricks is to make IE pretend like it knows how to use the :hover pseudo-class on all tags.

If you have ever tried to do a suckerfish dropdown then you have gone through the same thing: excitement as you have learned how to use structural markup to create a dropdown and then frustration as your work has been nullified by IE. The fix involves creating duplicate selectors of those using :hover, but instead of using :hover, replace it with a class name .hover. Making what are essentially duplicates and managing more content doesn’t sit well with me. The other trick to getting suckerfish to work in IE is to use JavaScript. The script will add a class definition to the tag when a user’s mouse if over the element and then removes the class when the users mouse is no longer over it. Since this method uses JavaScript to solve one problem, why not make it solve both?

Continue reading →

Why Microsoft Expression Web redefines irony

Posted on by
10

Expression is Microsoft’s suite of web development tools slated to replace the wonderful application known as Front Page. A quick visit to the site for this tool yields a fairly typical Microsoft webpage.

The “web” edition of this tool makes some hefty claims concerning creating valid xhtml/css based layouts. A normal person would reasonably expect a webpage promoting a tool used for webpage creation would most likely be built with the said tool. This would demonstrate the level of quality, the level of EXCELLENCE made possible by purchasing and using it.

Let’s have a look…

First we use a little browser called Firefox and a plugin called web developer to examine the layout of this page. By turning off CSS rendering we can examine the structure and determine how the creators approached the design process.

We clearly see that the developers of the expression site have chosen to use a table based, transitional approach (tables for the main layout, css to move things around within the columns). Well ok, I would have expected them to show off the “css layout” capabilities of the tool a bit more, but this in and of itself is still an acceptable practice.

With Expression web you can: “Validate your site with Compatibility reporting and use the Accessibility report to verify your site against Section 508 and W3C Content Accessibility Guidelines (WCAG).”

Well ok – let’s do some of that to the Expression Web “features” page and see what we get! (using Firefox’s handy developer tools of course).

WHOA! Did they not even listen to their own marketing garbage? 144 Errors! No DocType? Are you kidding me?

The validation report is littered with opening tags that are never closed, closing tags that were never opened, several tags that are not part of ANY of the w3 HTML specifications, dozens of properties on tags that are also not part of any specification, Don’t believe me – see for yourself

Bravo to our good friends at Microsoft for setting such a great example and leading the masses to a more standards compliant internet! (and for giving web standards geeks something to hate on)