<script type="text/javascript">

var rectA = {x: 2, y: 5, width: 6, height: 6};
var rectB = {x: 4, y: 10, width: 6, height: 6};
var area = {min: 0, max: 100};

var overlap = rectOverlap(rectA,rectB);
alert("Does rectA and rectB overlap? " + overlap);

if(overlap)
{
if(rectA.y >= rectB.y)
{
if(increaseY(rectA.width, rectB.y + rectB.height, area.max))
{
rectA.y = rectB.y + rectB.height + 1;
}
else if (rectA.y - rectB.height > area.min)
{
rectB.y = rectA.y - rectB.height;
}
}
else
{
if(increaseY(rectB.width, rectA.y + rectA.height, area.max))
{
rectB.y = rectA.y + rectA.height + 1;
}
else if (rectB.y - rectA.height > area.min)
{
rectA.y = rectB.y - rectA.height;
}
}
}

alert("Does rectA and rectB overlap? " + rectOverlap(rectA,rectB));

function increaseY(width, bottomEdge, Max)
{
return (bottomEdge + width < Max);
}

function valueInRange(value, min, max)
{

return (value <= max) && (value >= min);

}

function rectOverlap(A, B)
{
var xOverlap = valueInRange(A.x, B.x, B.x + B.width) ||
valueInRange(B.x, A.x, A.x + A.width);

var yOverlap = valueInRange(A.y, B.y, B.y + B.height) ||
valueInRange(B.y, A.y, A.y + A.height);

return xOverlap && yOverlap;
}

</script>

1) I had to run my JQuery code in no conflict mode. Which is a very simple change.

var J = jQuery.noConflict();

Then replace all your #’s with J.

2) I had an issue in IE7 where my drop down menu’s would go behind the SmoothGallery module. It turned out to be a very simple z-index issue and making sure the menu was not absolutely positioned.

Other then those quick things I had a very nice fully functional picture gallery up and running in minutes.  It was also very refreshing to see a library with very simple setup instructions.

If you refresh the browser or go to another page and the memory doesn’t go down you probably have a closure. I just ran into a tricky situation where my closure was being caused during the successful call back of a JQuery Ajax call.

The function that was leaking looked like this:

function <span>GetData</span>(object) {

var requestObject = object.buildRequest()

$.ajax({
type: "POST",
url: object.url,
dataType: "json",
data: requestObject,
success: function(jsonResult) {
object.data = jsonResult;
object.DoStuffWithData();
}
});
}

The fix was to remove the object from being a local variable.

function GetData(object) {

var requestObject = object.buildRequest()

$.ajax({
type: "POST",
url: object.url,
dataType: "json",
data: requestObject,
success: function(data) {
//On Success Call Data Updater
data.id = object.Id;
DataUpdater(data);
}
});

requestObject = null;
}

function DataUpdater(data) {

//loop through Requesters Array

//must add object to global array before making DataUpdater
for (i = 0; i < Requesters.length; i++) {

var temp = Requesters[i];

var requestId = temp.Id;
var dataId = data.Id;

//Find object with matching id
if (requestId == dataId ) {

temp .data = data;
temp .DoStuffWithData();
}
}

}

Drip
While tracking down this memory leak I decided to try out a memory leak tool called Drip. Unfortunately, It didn’t work in my situation. Drip actually started causing memory leaks so it made it hard to tell if I actually fixed the problem or not. I think the reason it doesn’t work is the script is recursive using setInterval.