Shortening JavaScripts with Math

I just went through an exercise for a DOM scripting course with the YUI and had the task to write a function that takes any element and centers it at the current cursor position. I also wanted to make sure that the displayed object never causes scrollbars or gets cut off when the cursor is too high up the document.

Getting the size of the object and the browser constraints was easy with the YUI. I sent the object as o and e is the event:

var size = YAHOO.util.Dom.getRegion(o);
var oHeight = size.bottom - size.top;
var oWidth = size.right - size.left;
var screen = [YAHOO.util.Dom.getViewportWidth(), YAHOO.util.Dom.getViewportHeight()];
var curpos = [YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)]

Now I had the problem of keeping the values in the constrains. Centering the element was easy, you just substract half of the height from the vertical position and half of the width from the vertical cursor position.

var x = curpos[0]- oWidth/2;
var y = curpos[1]- oHeight/2;

I then had to compare both with their constraints and set them to the appropriate values, which was a lot of if statements:

if(x < 0){
  x =0;
}
if(x + oWidth > screen[0]){
  x = screen[0] - oWidth;
}
if(y < 0){
  y =0;
}
if(y + oHeight > screen[1]){
  y = screen[1] - oHeight;
}

clunky, and I shortened it using the ternary notation:

var x = curpos[0] - oWidth/2;
x = x < 0 ? 0 : x;
x = x + oWidth > screen[0] ? screen[0]-oWidth : x;

var y = curpos[1] - oHeight/2;
y = y < 0 ? 0 : y;
y = y + oHeight > screen[1] ? screen[1]-oHeight : y;

lt felt terrible. I then remembered the Math object in JavaScript and that it has two methods that are terribly useful in this case: min() and max(). Both return a value that is either the smaller or the larger value, which means you can use it to constrain a value to a certain range. Using Math, the whole logic can be done in two lines of code:

var x = Math.min(Math.max(curpos[0] - oWidth/2, 0), screen[0] - oWidth);
var y = Math.min(Math.max(curpos[1] - oHeight/2 ,0), screen[1] - oHeight);

That is not the end of it, though. If you know that you should get back a number, you can use max() to normalize browser differences, like the Dom utility of the YUI does:

var scrollTop=Math.max(doc.documentElement.scrollTop,doc.body.scrollTop);

This works around the MSIE issue of reporting different values for scrollTop depending on which rendering mode you are in.

This entry was posted on Thursday, June 28th, 2007 at 6:48 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.