Tuesday, January 15, 2008

How to move web page division on mouse scroll (up/down)

How to move web page division on mouse scroll (up/down)
Following code is an example to move left side portion of the web page on mouse scroll.
The division which you are going to move should be placed before java script; this code can implement in Java or .Net application, this java script function is compatible with Netscape, Mozilla and IE browsers.
Note: This code will activate only when you have horizontal scroll bar in your web page.
//Sample division to move
<div id="divTopLeft" style="position:absolute;left:10;top:200;width:167;">
<table border="1" width="159" height="550" bgcolor=Pink bordercolor="black" cellspacing="0" cellpadding="0">
<tr>
<td bordercolor="Pink">
<font color="blue">Your text should go here..</font>
</td>
</tr>
</table>
</div>
//Java script function to move above division up and down
<script type="text/javascript">
function FloatTopLeft()
{
//Set the start X and Y position for division
var startX = 622, startY = 220;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
var px = document.layers ? "" : "px";
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all
?d.all[id]:d.layers[id];
if(d.layers)el.style=el
el.sP=function(x,y)
{
this.style.left=x+px;this.style.top=y+px;};
el.x = startX; el.y = startY;
return el;
}
window.stayTopLeft=function()
{
var pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var dY = (pY > startY) ? pY : startY;
ftlObj.y += (dY - ftlObj.y)/8 + 1;
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 20);
}
ftlObj = ml("divTopLeft");
stayTopLeft();
}
FloatTopLeft();
</script>

No comments: