How to find out if an element overflows (with jQuery)?

Question

The layout looks like this:

Basically all I want is to find out if the

Answer 1

Calculate the element's width, then get its left, finally subtract it to the page's width and you'll get the overflow.

var pageWidth = $(".page").width();
var elementWidth = $(".element").width();
var elementLeft = $(".element").position().left;

if (pageWidth - (elementWidth + elementLeft) < 0) {
  alert("overflow!");
} else {
  alert("doesn't overflow");
}

.page {
  overflow: hidden;
  width: 200px;
  height: 200px;
  position: relative;
  background: black;
}

.element {
  width: 100px;
  height: 100px;
  position: absolute;
  background: blue;
  top: 10px;
  left: 150px;
}

Example here: http://jsfiddle.net/jackJoe/Q5FdG/