hoverCheckbox

Posted by Michael in General on Aug 20th, 2010 | Comments Off
hoverCheckbox

As part of the current project I’m working on, it was decided that as an instant feedback to users we would make a checkbox seem “ticked” when they hover over it. The other alternative is – as eBay use – to use an image that will change when you hover over it. However, the idea of using an image for someone that isn’t a designer is an instant “What? Hell no!”, so I set about finding a better alternative.

The solution was to use some jQuery that would check the status of the checkbox when they hover over it, store that in a variable, and then add a check. Then if they unhover if the box wasn’t checked then you remove the check, otherwise do nothing.

The demo can be seen over at the hoverCheckbox Demo site. With the source code visible on the same site.

To activate the hoverCheckbox on a checkbox, simply add the class “hovercheck“.

A simple script, but is rather handy when you come to providing instant feedback to users and checkboxes – this can be adapted for label tags if needed.

jQuery Slideshow

Posted by Michael in Portfolio, Tips, jQuery on Jul 29th, 2010 | Comments Off

So I’ve got myself some work on a new website for my boss this week, and part of his site currently has some sort of slideshow thing – using jQuery. I have used them before, but never actually got round to coding one. So I decided to stop being lazy, and actually look at coding something up. So here it is:

<script type='text/javascript'>
/*
SlideShow jQuery Plugin v1.2
Michael Wright
http://michaelwright.me
*/
var slideShows = [];
$.fn.slideShow = function(){
$(this).children('img:gt(0)').hide();
slideShows[$(this).attr('id')] = {'imgs': $(this).children('img'), 'i': 0};
setInterval("changeImages('" + $(this).attr('id') + "')", 7000);
}
function changeImages(x){
$(slideShows[x]['imgs'][slideShows[x]['i']]).fadeOut(1000,
function(){
slideShows[x]['i'] = (slideShows[x]['i'] < slideShows[x]['imgs'].length-1? slideShows[x]['i'] + 1 : 0);
$(slideShows[x]['imgs'][slideShows[x]['i']]).fadeIn(1000);
}
);
}
</script>
<div id='test'>
</div>
<script type='text/javascript'>
$('#test').slideShow();
</script>

It is obviously lacking proper HTML structure, however, as it is, it works. Ultimately you created an element containing a series of images, and then simply invoke the slideshow function on the element. Make sure that the element container has an id as it is used to refer to the slideshow items later.

jQuery is required for this, so ensure that you are including the JavaScript file when using this code.

XML Creator

Posted by Michael in Tips on Jun 23rd, 2010 | Comments Off

So as part of my current work, I have to export customer information, orders and order details for importing into Sage. Also, product information has to be exported for Google shopping. Both of these are being exported in XML. Instead of writing out all of the coding and causing problems etc. I bodged together a simple function – it is by no means perfect:

function createXML($x, $y){

$y = (is_array($y)? $y : str_replace("&", "&amp;", $y));
$output = "\n\t<$x>";
if(is_array($y))
foreach($y as $key => $item)
$output .= createXML($item[0], $item[1]);
else
$output .= $y;
$output .= "\n\t";
return $output;

}

I’m on Twitter

Posted by Michael in General on Jun 12th, 2010 | Comments Off

I don’t like to use this blog for non-work related things. However, I’m exploiting it and am taking this point in time to advertise my Twitter. I don’t promise to post anything which will lead to a scientific breakthrough, but anyone interested in the thoughts and workings of a 20 year old web developer should follow. Click the bird, and then tweet me saying hi!

Multi-Format Number

Posted by Michael in Tips on Jun 10th, 2010 | Comments Off

So for this project that I’m working on, I have to be able to format a number to be comma separated and decimalised (only if the decimal numbers aren’t 00) to two decimal places (with rounding – when there is 3 or more decimal places). So, unfortunately there isn’t any actual predefined function out there for any of this. So through the Math.round(), Math.pow() and String.replace() functions, I managed to cobble something together that works flawlessly:


function formatPrice(x){

x = x.split('.');
while(/(\d+)(\d{3})/.test(x[0]))
x[0] = x[0].replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
x[1] = (typeof x[1] != 'undefined'? (!x[1].match(/^00?$/)? "." : "") + x[1].replace(/^(\d{3,})$/, function($1){return Math.round((($1)/Math.pow(10, $1.length))*100);}).replace(/^00$/, '').replace(/^(\d)$/, "$1" + "0") : "");
return x[0] + x[1];

}

Just to show what it does, here is some testing that I did with the code. Original number on the left, new number on the right:

1000 -> 1,000
1000.1 -> 1,000.10
1000.00 -> 1,000
0.00 -> 0
0.1 -> 0.10
0.10 -> 0.10
1000.1236123 -> 1,000.12
1000.1276123 -> 1,000.13

Page 1 of 212