Getting all element attribute values with jQuery

Here is a little snippet which I have found extremely useful especially when working with XML in Javascript. You can use the following to loop through all of an element’s attributes and store them in an object:

1
2
3
4
5
6
var element = $("#myElement"),
    attributes = {};

$.each(element.get(0).attributes, function(i, attrib){
    attributes[attrib.name] = attrib.value;
});

So for example if we have the following XML node:

1
<item id="item1" name="the first item" image="thumbnail1.png" />

After running the snippet above on the node we can now access the values on the attributes object we created like so:

1
2
3
console.log( attributes.id ) // item1
console.log( attributes.name ) // the first item
console.log( attributes.image ) // thumbnail1.png

I have found this very useful when I don’t want to hard code XML parsing and I don’t need to know all the values right away.

I hope this is useful for someone else!

AS3 / JS Constrain a value in one line

Here is a little snippet to constrain a value in a single line. It works by using two nested inline conditionals. The ‘else’ part of the first conditional is another conditional. It may not be the best approach but it works and is much easier and faster to write than two if-else statements.

In English it looks like this:
value = is value greater than max ? set to max, otherwise is value less than min ? set to min, otherwise leave it as is;

1
2
3
4
5
// for js - remove the type declarations (:Number)
var minValue:Number = 0;
var maxValue:Number = 100;

value = value > maxValue ? maxValue : (value < minValue ? minValue : value);

JS Transform Handles

The other day I was playing around with Mozilla’s Popcorn Maker and I had the idea of using HTML/JS/CSS to create transformable divs using transform handles and a bounding box. I did a quick search for any existing examples of HTML transform handles but i couldn’t find anything so I decided to give it a go myself. Below is a demo of what I came up with. It might not be the best solution but it works pretty well. I even implemented rotation but I had some issues with the scaling when the element was rotated. The demo has the rotation disabled but you can get the source by view the source of the frame. All JS, and CSS is in the one HTML file. Enabling the rotation is as simple as removing display none from the rotation handles CSS style.

The main reason I wanted to create transformable DIVs is for the next version of my Module Builder. I had experimented with transforming HTML via the AIR app but I think doing it directly in the HTML page.

Adding console.log() to AIR’s HTMLLoader

Here is a little code snipped I thought I’d post for future reference and may help someone else out.

I was using the HTMLLoader class in Adobe AIR to load content and I came across an error where my Javascript was calling console.log(). In the AIR HTMLLoader environment this function does not exist so I had to come up with a way for it to stop throwing errors.

The solution I came up with was to create the console object and add the log function. That way I could trace out any log info or do anything else with it if I need to. So here is the snipped to add console.log to the HTMLLoader.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* creating the loader object */
var ldr:HTMLLoader = new HTMLLoader();
ldr.load(new URLRequest('path/to/html/file.html'));
ldr.addEventListener(Event.COMPLETE, onLoaded);
addChild(ldr);

/* when load is complete, do the magic */
function onLoaded(e:Event):void
{
    /* Create console object on the window */
    ldr.window.console = {};
    /* add the log function to the console object, this function could do anything with the log data but here I am just tracing it */
    ldr.window.console.log = function(msg){trace(msg)};
   
}

Easy.

A simple way to get native alerts with Adobe AIR

In an AIR project I am currently working on I wanted to have native alert boxes in my app rather than building custom pop up boxes. There is no built in way to get native alerts in AIR and I remembered reading this interview over at leebrimelow.com a while back where a developer at Illume used StageWebView to trigger an alert from a HTML page. So I decided to make a class called NativeAlert that uses AIR’s HTMLLoader to trigger alerts.

READ MORE

New Showreel!

I have just uploaded my new showreel to Vimeo. A couple weeks ago I was listening to TripleJ in the car and I heard this amazingly bizarre, vintage, sci-fi, horror metal song come on. Unfortunately I missed what it was called or who the artist was so I spent ages trying to figure it out. READ MORE

Leveraging iOS hardware via the browser with Javascript

Just another quick post tonight. I have bigger one lined up for tomorrow I promise. I just wanted to show a little experiment I did a while back with JavaScript – accessing the Accelerometer and Compass data in Safari on the iPad. Below is a short video demonstrating it if you don’t have access to an iPad. If you do have one – visit the link following the video. I might also mention that the arrow/circle image was all created using CSS3 too!

And here’s the link to the demo.

To get the source – just go to the above link and right click > view source.

Creating a HTML version of this blog’s header

Update: this post was made when I was using a different blog design. Please view the original swf file here.

Below is a little experiment I did which involved creating a version of this blog’s image flipping Flickr feed header (which I made in Flash) – in HTML/CSS/Javascript.

Luckily jQuery includes a JSON parsing feature and Flickr provides a JSON feed and so it was very easy to get the Flickr feed. The image flipping was done with CSS3’s 3D transforms and so unfortunately it will only work in Chrome and Safari. Now I just need to work out how to get more than 20 images from the Flickr feed (I need 36 to fill the header), and turn the images black and white. I found a jQuery plugin that apparently can apply image effects but I haven’t gotten it to work yet.

READ MORE

painty – A simple HTML5 web app for the iPad

As you may know I have been mucking around with HTML5’s canvas element lately. Here is an evolution of the paint mixing example I showed a couple posts back. I decided to turn it into a simple iPad web app. Check out the video below and visit the following URL on an iPad to try it out. I also plan to make it multitouch in the not too distant future!

http://www.purplesquirrels.com.au/blogstuff/canvasdraw/index-touch.html

Video demo:

Javascript and Canvas wet paint mixing

Here is an experiment I did to learn how the HTML5 Canvas tag works. I wanted to know how to manipulate pixels so I attempted to port my AS3 paint mixing to Javascript. I was surprised by the performance although it doesn’t seem to be as fast as the Flash version, and it is definitely a lot more work getting and setting pixels with Javascript and Canvas. Check out the demo below. The brush will lag at higher drawing speeds when the size is large. But it if you don’t draw too fast it works pretty well. So far it seems to work best in Safari.

Supported browsers:

  • Chrome (Only tested in Chrome 12)
  • Safari (Only tested in Safari 5)
  • IE9

Note: Doesn’t work in Firefox and haven’t tried Opera

READ MORE