Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to keep content on the screen when scrolling (without that annoying animation that you see on other sites!)

DHTML

How to keep content on the screen when scrolling (without that annoying animation that you see on other sites!)

by  adam0101  Posted    (Edited  )
You have no doubt seen floating layers on web sites before. You may also have noticed whenever you scroll down the page how these floating layers freak out as they try to reposition themselves into your field of view. Personally, I find this very annoying. Wouldn't it be great if you could have a floating layer without the flickering behavior? Well now you can! It's actually fairly simple. The key is to:
[ol]
[li]Turn off the browser's normal scrollbars.[/li]
[li]Put your main content in a div that has the overflow style set to "auto" or "scroll".[/li]
[li]Put the content you want to "float" in a div outside of the content div.[/li]
[/ol]
Code: 
<html>
<head>
<script language="JavaScript">
[green][b]// Change these values to fit your needs[/b][/green]
var alignRight	= true;
var alignBottom	= false;
var offsetX 	= 25;
var offsetY 	= 20;

function adjustDivs(){
  var df=document.getElementById('divFloat');
  df.style.left = alignRight ? document.body.clientWidth-(parseInt(df.offsetWidth)+offsetX) : offsetX;
  df.style.top = alignBottom ? document.body.clientHeight-(parseInt(df.offsetHeight)+offsetY) : offsetY;
}
</script>
</head>
<body scroll=no leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onload="adjustDivs()" onresize="adjustDivs()">
  <div id="divContent" style="position:absolute; width:100%; height:100%; overflow:auto;">
    [green][b]<!-- Put your content that exists between the BODY tags here -->[/b][/green]
  </div>
  <div id="divFloat" style="position: absolute; left:0px; top:0px; background-color: #cccccc; width:200px; height:200px;">
    [green][b]<!-- Put the content that you want to "float" here -->[/b][/green]
  </div>
</body>
</html>

Please post any comments you may have in thread216-1028974.

Thanks

Adam
http://adameslinger.blogspot.com//
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top