I used css to ensure the div I am moving is layered correctly for this to work.
The main content area is z-index 0, A top menu is z-index 2 and the div I am moving is z-index 1. That layers it on top of the content but below the top menu.
The below code block allows me to identify an objects top position.
Code:
function GetPositionTop(obj) {
var topValue = 0;
while (obj) {
topValue += obj.offsetTop;
obj = obj.offsetParent;
}
return topValue;
}
This function uses two variables to control the speed of the div movement.
It could have been built as two functions - one for Up and one for Down. (I did not!)
Code:
var slideSpeed = 10; //Larger is faster
var slideTimer = 10; //Larger is faster
function SlideObjectUpDown(targetId, down, upperPos, lowerPos) {
var obj = document.getElementById(targetId);
var currentTop = GetPositionTop(obj);
var reRun = 1;
if (down == 1) {
if (currentTop < lowerPos) {
currentTop += slideSpeed;
if (currentTop > lowerPos) {
currentTop = lowerPos;
reRun = 0;
}
obj.style.top = currentTop + 'px';
if (reRun == 1) {
setTimeout('SlideObjectUpDown("' + targetId + '",' + down + ',' + upperPos + ',' + lowerPos + ')', slideTimer);
}
}
} else {
if (currentTop > upperPos) {
currentTop -= slideSpeed;
if (currentTop < upperPos) {
currentTop = upperPos;
reRun = 0;
}
obj.style.top = currentTop + 'px';
if (reRun == 1) {
setTimeout('SlideObjectUpDown("' + targetId + '",' + down + ',' + upperPos + ',' + lowerPos + ')', slideTimer);
} else {
obj.style.display = 'none';
}
}
}
}
Then one last function that is called when an icon is clicked on the top menu.
This function determines if the Mini Menu is displayed or not and calls the slide function.
Code:
function ToggleMiniMenu() {
var t = document.getElementById('divMiniMenuContainer');
if (t) {
if (t.style.display == 'none') {
t.style.display = 'inline';
SlideObjectUpDown('divMiniMenuContainer', 1, -20, 27);
} else {
SlideObjectUpDown('divMiniMenuContainer', 0, -20, 27);
}
}
}
This works really well and could be adapted to slide right and left also.
