First Canvas Experiment: BitmapData

Lots of people have been talking about html 5 and canvas for a while now. As an actionscript purist I had decided not to venture into the world of incompatibility quite yet, but having seen some of the cool chrome experiments again recently, I decided to give writing some canvas toys a little go.

My first experiment is a simple one, just some randomly updating pixels on a screen.

Your browser doesn't support html5
Here is the .js code:

function setPixel(bitmapData, x, y, r, g, b, a) {
index = (x + y * bitmapData.width) * 4;
bitmapData.data[index+0] = r;
bitmapData.data[index+1] = g;
bitmapData.data[index+2] = b;
bitmapData.data[index+3] = a;
}

element = document.getElementById("bitmap");
canvas = element.getContext("2d");
width = parseInt(element.getAttribute("width"));
height = parseInt(element.getAttribute("height"));

setInterval('update()',30);

function update()
{
bitmap = canvas.createImageData(width,height);
for (i = 0; i < 10000; i++) {
     x = parseInt(Math.random() * width);
     y = parseInt(Math.random() * height);
     r = parseInt(Math.random() * 256);
     g = parseInt(Math.random() * 256);
     b = parseInt(Math.random() * 256);
     setPixel(bitmap, x, y, r, g, b, 0xff);
 }
 canvas.putImageData(bitmap, 0, 0);
}

jQuery UI - Tab Systems

If you look around websites at the moment almost all of them have some kind of tab system. Facebook uses one on your page, even while I write this, the window I'm writing in is surrounded by tabs and I know I've used tabs on some of my own projects (see The Game Portal).

Tabs are primarily a form of navigation, but what makes them different from a standard navigation header bar, with standard buttons is that the flow through the site is much improved. You don't need to leave a page to view content inside a different tab. This means less wait times, and a nice way to store anything you want to show on your site.

You could opt to write your own tab system, but often it can be hard to achieve complete, or maximum browser compatibility, especially if you're in a rush, or don't want to spend to much time writing something in javascript/ajax.

In a post a few weeks ago I introduced jQuery, and briefly mentioned the jQuery UI package. The jQuery UI package builds on the jQuery framework by adding a set of transitions, actions and web components which work in practically any browser. If you have a quick look on the jQuery UI website you'll notice the build custom download button on the right of the page. You can graphically design most features of the components you want and export the styles and classes associated with them straight from the website.

So lets get started, we wanted to make a tab system.

1) Click Themes on the menu at the top of the jQuery homepage. We want to be a bit interesting so lets make a custom theme.

2) You'll notice on the right you are presented with the UI components, in the default style and on the left you'll find a menu with the headings "Roll your own" and "Gallery". For a set of premade styles click gallery. Often you'll find something here that is in keeping with the design of your website, or you'll find these styles a good jumpstart so that you don't have to design everything from scratch. So I'm making a pretty Techy website, and want something quite cool. Click on the gallery tab and select edit under the Dot Luv style. I really don't like the diagonal lines at the top though, so I'll play around with the top bar. Obviously if you like them, keep them, and have a play around with some of the other settings on the left.

3) Once you're completely happy with your design press the Download Theme button at the top of the settings, you'll be confronted with a new page. Panic not! We're making a tab menu so we don't need any of the other features (with the exception of UI Core which contains some basic functions and initializers) so deselect everything except UI Core and Tabs (in the widgets section).

4) When you're happy with this download the file using the button on the right. At this stage its a good idea to open the file called index.html within the package you downloaded. This contains all of the UI content you downloaded as well as some useful buttons (a tip - if you're looking for lightweight you can remove the styles and images for all of these buttons quite easily by hand). So there is your tab system!

5) To include it on your website you'll have to upload your stylesheet, javascript files and associated images onto your server. Once they are up just link to your files. You'll have to load in the jQuery style sheet first, then the standard jQuery library, and then the jQuery custom library.

For example:

<link type="text/css" href="css/dot-luv/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

would achieve the required effect.

Then to initiate the tab system you'll need to use a simple line of jQuery

<script type="text/javascript">
$(function()
{
// Tabs
$('#tabs').tabs();
}
</script>

And finally the actually object needs to be placed in your page:

<div id="tabs">

<ul>
  <li> <a href="#tabs-1">Tab 1</a> </li>
  <li><a href="#tabs-2">Tab 2</a></li>
  <li><a href="#tabs-3">Tab 3</a></li>
</ul>

<div id="tabs-1">I am tab 1's content</div>
<div id="tabs-2">I am tab 2's content</div>
<div id="tabs-3">I am tab 3's content</div>

</div>

As you can see all of the content is loaded into seperate divs, one for each tab!

This is really useful as I mentioned earlier for getting smooth flows around your site, and for improving the user experience!

Unfortunately blogger blogs don't allow you load in style sheets on the fly from within posts so I don't think I can get you a live example, but here is a link to a page I'm working on which does use the tab system. Bear in mind its work in progress!

Also check out The Game Portal if you haven't done so already as that also uses jQuery UI!

Enjoy!

jQuery and jQuery UI

Over the last few weeks I've been developing some websites and web applications both for the company I work for Brain Media and for some of my own projects (including The Game Portal for facebook).

I thought over my next few posts I'd introduce the jQuery javascript library, which is a massively powerful tool for interacting with html pages on the fly. It really is a cool tool and I've found using it has made designing many web page features so much easier and quicker.

jQuery allows you to edit html and css as much as you want after a web page is useful. This is ideal for web applications where interactivity and customizability is a major part of the design.

jQuery accesses content using classes, names, ids and pretty much any other way you can label an element in html.

For example say I need to change the html content of a div tag with id=div....

To do this in jQuery I simply use:

$('#div').html("<img src="example.jpg"/>)

thereby removing any previous html content from the div and inserting an image.

The other main tool I'll be introducing is jQuery UI which is a set of components for use in jQuery. A few examples include tab systems, draggable elements, loading bars, resizable elements, changing opacity properties and overlays.

So lets get started...

Download the jQuery library from jquery.com and upload the minimized javascript file (in this version comments have been reduced leaving it at a lean 56kb!) to your server.

<script src="myserver/js/jquery-1.3.2.min.js"></script>

start by importing the javascript file into your html page. Use script tags and set the src to the location where the javascript file is hosted.

Then lets make a link disappear when we click on it, this could be used in a form or in a forum when you delete a post or anything like that.

Click Here to Hide this link....

Click Here to show it again! (Wow)

We could even show and hide the whole page using one function! Just click here for an example....

First things first, to show and hide the links, create a link with

<a id="showhide" style="color:#00F;cursor:pointer;" onclick="javascript:hideLINK()">Hide this link...</a>;

Then create a function wrapped in javascript tags which is called on the onclick function in your link.

<script language="JavaScript"> function hideLINK(){$("#showhide").hide(1000);}</script>;

This pretty much calls a jQuery function (initialised with the dollar symbol) to hide any elements with an ID of #showhide. The 1000 refers to how long you want the process to take.
To show the object again I just use the jQuery function show(1000);
Of course if you want a whole animation as in the page disappearing act, a callback can be called at the end of the hide function: This is the code I used:

<script language="JavaScript">

function showHidePage()

{

 $("#outer-wrapper").hide(1000, function(){

  $("#outer-wrapper").show(1000);

 });

}

</script>

So thats a bit of basic jQuery, I'll follow this up with a few more detailed tutorials. Enjoy!