Posted by Jacob Wright in HTML5, Javascript, Simpli5May 27th, 2010 | No Comments
Javascript has mouseover and mouseout events. Flash has these, but they also have rollover and rollout events. There is a difference, and it can be painful developing Javascript components without the rollover and rollout events. So I put together a little script that provides them for us.
Problem
You want to perform some action when the cursor rolls onto and off of an HTML element. When you use the mouseover/mouseout events, you get a mouseout and immediately another mouseover when the cursor is over a child element. Technically the mouse is still over the parent element, why does the mouseout...
Posted by Jacob Wright in HTML5, Javascript, Simpli5May 25th, 2010 | 5 Comments
Simpli5 has been coming along nicely as I've been able to put time into it. I'm very excited to announce data-binding.
Data Binding
Data binding is a technique we have and use in Flash quite a bit that allows one property to stay in sync with another. If obj.x is bound to obj.y then whenever obj.x is changed, obj.y will automatically update to the same value. I've built my own data binding frameworks in ActionScript 3 and I wanted it for my Javascript work as well.
Since Simpli5 has a base-line of HTML5, I was easily able to create data binding in Javascript using implicit getters and setters....
Posted by Jacob Wright in HTML5, JavascriptMay 7th, 2010 | 8 Comments
I've started putting together a new HTML5 Javascript framework that is only compatible with HTML5 browsers. I'm able to have a much smaller library that way, and I'm able to do stuff I couldn't otherwise. Like...
Optimization
Because I'm using built-in Javascript methods (written in C) for many things I do, I am taking advantage of the speed of modern HTML5 browsers, without the bloat of code that makes up for missing features. Array.prototype.slice is used to convert NodeLists and Argument objects into arrays with $.toArray(); querySelector and querySelectorAll are used to quickly find the first...
Posted by Jacob Wright in CSS3, HTML5May 4th, 2010 | 2 Comments
Using a handful of CSS3 styles implemented by Webkit (Safari and Chrome) and Firefox browsers, I've recreated buttons which I previously did with images, all in some simple CSS. I used the following styles:
Background-image gradients
Border radius
Text shadow
Box shadow
Custom fonts
The page is shown here in an iframe:
If you have a keen eye you'll see I'm using some borders on the top and bottom to simulate bevels, I'm using a custom font, Sansation, courtesy of dafont.com, and the text shadows are cast upward when hoving over the button.
Best part is, I'm using no javascript, and whenever...
Posted by Jacob Wright in HTML5May 3rd, 2010 | 1 Comment
I've picked up a side job using HTML5's canvas element, and the project at work turned HTML5 for various non-Apple reasons. I've been hesitant to post about it because I firmly feel that Flash will continue to flourish in the future, and HTML5 is simply a new and better HTML4/XHTML.
I will continue to be involved in the Reflex project and in the Flash community, but since I am doing a lot of HTML5 work in the next few months, I will be talking about the cool stuff I am learning and doing. I've done a lot of HTML/CSS/JS, but now that I am tasked to only worry about HTML5, and not worry about being...
