Friday, August 28, 2009

Replacing Checkbox and Radio buttons

I found this pretty cool website (Hieuuk) that had an example of how to replace the checkbox and radio buttons with images. I was thinking about using it until I read the comments about how it doesn't work with the keyboard.

Well, I was inspired to mess around with the script, so I started working on it!

Here is a demo of the result of my work...



But sadly, I guess it was just a nice exercise for me because I have no idea how to make it into a jQuery plugin and well as I just found out... it's already been done, twice LOL. *Note to self* search the net before spending hours on a project o.O

The other versions:
  • I'm not sure, but this version looks like it was made to work with the jQuery UI

  • I really like this plugin version since it animates the radio button look... toggling a switch on and off. It just looks cool :P
Oh well, I don't want to say it was time wasted, but I still sort of like my version ;)

Saturday, August 15, 2009

Auto-resizing background image

JQuery: I found a very nice jQuery plugin called Supersized that makes it very easy to add an auto-resizing background image to your website. And it includes a slideshow function!

Canvas: I recently started to teach myself how to use Canvas and I thought, hey.. I bet I could do that with canvas too! For those of you that don't know, you can easily draw (graphs), resize and rotate images with canvas. Here is a very nice demo of image manipulation.

So, I'm pretty sure this is an un-approved method of using canvas as it's meant for smaller sized images. But it works! :P Well, it works for all current browsers, except IE - you'll need this plugin called ExploreCanvas to make it work.
<canvas id="myCanvas" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: -1;"></canvas>
<script type="text/javascript">
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
img = new Image();
img.src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bg1.jpg';
img.onload = function () {
context.drawImage(this,0,0,300,150);
};
</script>
*Note* The drawImage function of canvas needs to be 300 x 150 for this script as that is the default canvas size, which then gets stretched to 100% width and height using the CSS.

And the problem I discovered with both the jQuery plugin and the canvas script above is that you are limited to the content on the screen. Should you need to scroll the page down, the image scrolls up (I had to modify the jQuery plugin to discover that).