Floating Layer 2

Contact
Search
Site Map

General
Links
Registry
CSS & Scripts
Image Scripts
Javascripts
Web Plus
Drag the layer anywhere within the window.
As the window is scrolled the layer floats back to its current position.
A typical use for this could be a menu or any other display you wish to keep in view.

<script type="text/javascript">
// Jeff
// www.huntingground.freeserve.co.uk

var moz=document.getElementById&&!document.all
var moving = false
var tempX = 0
var tempY = 0

function dragNow() {
elmId = document.getElementById("layer_cont")
moving=true
posX = tempX - elmId.offsetLeft
posY = tempY - elmId.offsetTop
elmId.style.zIndex = 1
}

function moveTo(e) {
tempX = (!moz ? event.clientX : e.pageX)
tempY = (!moz ? event.clientY : e.pageY)
if(moving != false) {
elmId.style.left = (tempX - posX) + "px"
elmId.style.top = (tempY - posY) + "px"
}
}
document.onmousemove = moveTo
document.onmouseup=new Function("moving=false")

function initMenu(){
window.scrollTo(0,0) // initialise page position to top
markPos()
motion()
}

defPosTop=""
function markPos(){ // position of layer after dragging in relation to window top
pageTop=(document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)
pageLeft=(document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)
defPosLeft=parseInt(document.getElementById("layer_cont").style.left)-pageLeft //  get position X
defPosTop=parseInt(document.getElementById("layer_cont").style.top)-pageTop //  get position Y
}
window.onscroll=motion
timer=""

function motion(){
clearTimeout(timer)
step=15
distance=(pageTop+defPosTop)-parseInt(document.getElementById("layer_cont").style.top)
divTop=parseInt(document.getElementById("layer_cont").style.top)
if(divTop<=(pageTop+defPosTop)){
if(distance>150){step=20}
if(distance<20){step=1}
divTop+= step
document.getElementById("layer_cont").style.top =divTop
}

if(divTop>=(pageTop+defPosTop)){
if(distance< -150){step=20}
if(distance> -25){step=1}
divTop-= step
document.getElementById("layer_cont").style.top =divTop
}

timer=setTimeout("motion()",50)
if(divTop<=(pageTop+defPosTop)+1&&divTop>=(+defPosTop)-1){

if(!moz){ // onscroll event is not fired when using mouse wheel to scroll page in MOZ
clearTimeout(timer) //  therefore only clear timer in IE
}

}

}

// add onload="initMenu()" to the opening BODY tag

</script>

<style>
.c1{
color:#404000;
font-size:12px;
line-height:16px;
padding:5px;
border-top:2px solid #ffffff;
border-left:2px solid #ffffff;
border-right:2px solid #808080;
border-bottom:2px solid #808080;
background:#c9bda9;
ursor:hand;
cursor:pointer
}
</style>
<DIV id="layer_cont" name="dragme" class="c1" style="position:absolute;left:5px;top:45px;width:100px" onmousedown="dragNow()" onmouseup="markPos()"> Your Links </DIV>