Question

could someone please help a complete javascript noob? My google-fu seems to be completely lacking…

I’m trying to convert this…

var $win = jQuery(window),
w = 0,h = 0,
sgcolour = [],
getWidth = function() {
 w = $win.width();
 h = $win.height();
};
$win.resize(getWidth).mousemove(function(e) {
 sgcolour = [
  Math.round(e.pageX/w * 255),
  Math.round(e.pageY/h * 255),
  150,
  1
 ];
 jQuery(document.body).css('background','rgba('+sgcolour.join(',')+')');
}).resize();

Here on jsfiddle

from rgba to hsla, with x-axis as hue, y as saturation, & other values fixed.

I think I’ve got the obvious (change ‘rgba’, set values from thos appropriate to rgba to those appropriate to hsla), but can’t for the life of me work out how to get it to output “%” after the required values…

I hoped I’d be able to work it out for myself, but I’m not sure if I even know enough about it to google the right questions :/

Answer 1

If it’s just a string, you can just concatenate '%', so I’m not really sure what the problem is:

...
sgcolour = [
   Math.round(e.pageX/w * 360),
   Math.round(e.pageY/h * 100) + '%',
   '50%',
   1
];
jQuery("body").css('background','hsla('+sgcolour.join(',')+')');

Note that this is not a direct conversion at all. If you want it to do that then I would suggest using your current rgb method and then converting it to hsl afterwards.