Member Avatar for flockit

Hello,

I want to stick one DIV to the bottom! I've managed to do that but when I scroll down the DIV doesn't scroll smoothly! Below is my code:-

<div id="x">
 <center>
  <div id="footer" style="width: 95%; background-color:#66CCFF; border: 1px normal black; top: 100px; position:absolute; align:center; height: 50px" align="center"><center>A</center></div>
 </center>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script>

window.onscroll = function() { 
	document.getElementById("footer").style.display = "none";
	document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px";
	document.getElementById("footer").style.display = ""; };

document.onscroll = function() { 
	document.getElementById("footer").style.display = "none";
	document.getElementById("footer").style.top = (document.body.scrollTop + document.body.clientHeight - 50) + "px";
	document.getElementById("footer").style.display = ""; };

</script>

Check attachment for the code too!

Do NOT wanna use CSS or any other JScript!
Do NOT wanna use "position: fixed; bottom: 0px;" as it doesn't work in IE6, 7, 8[citation needed].

Please help me!

Thanks,
Akshit Soota

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
<!--
.foot {width:95%; background:#66CCFF; border: 1px solid #000; bottom:0; position:fixed; text-align:center; height:50px }
-->
</style>
</head>
<body>
<div class='foot'>This is a fixed footer</div>
</body>
</html>

0px does not work because 0px is not a valid css measurementthe coorect measure is bottom:0;
javascript to perform css functions is out dated,
the javascript given seems specific to the IE DOM, Mozilla browsers use a different DOM

Continuing the drop dead thought provoking sitting here watching while the time expired and I couldnt edit the post again,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
<!--
.foot {width:95%; background:#66CCFF; border: 1px solid #000; bottom:0; position:fixed; text-align:center; height:50px }
-->
</style>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iestyles.css" />
<![endif]-->
</head>
<body>
<div class='foot'>This is a fixed footer</div>
</body>
</html>
//iestyles.css
.foot {width:95%; background:#66CCFF; border:1px solid #000; position:fixed; text-align:center; height:50px; top: expression(document.body.scrollTop + document.body.clientHeight - offsetHeight ); }

it works, good

Member Avatar for flockit

Continuing the drop dead thought provoking sitting here watching while the time expired and I couldnt edit the post again,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
<!--
.foot {width:95%; background:#66CCFF; border: 1px solid #000; bottom:0; position:fixed; text-align:center; height:50px }
-->
</style>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iestyles.css" />
<![endif]-->
</head>
<body>
<div class='foot'>This is a fixed footer</div>
</body>
</html>
//iestyles.css
.foot {width:95%; background:#66CCFF; border:1px solid #000; position:fixed; text-align:center; height:50px; top: expression(document.body.scrollTop + document.body.clientHeight - offsetHeight ); }

Thanks for your code, but unfortunately it doesn't dock itself bottom in IE! I'm attaching the code, please help me!

<style>
<!--
.foot {width:95%; background:#66CCFF; border: 1px solid #000; bottom:0; position:fixed; text-align:center; height:50px }
-->
</style>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iestyles.css" />
<![endif]-->

<div class="foot">
 Hello!
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
//iestyles.css
.foot {width:95%; background:#66CCFF; border:1px solid #000; position:relative; text-align:center; height:50px; top: expression(document.body.scrollTop + document.body.clientHeight - offsetHeight ); };

Check my code and please find out the mistake!
Thanks!

I put browsershots.org images into a prior post
it does dock at window bottom,
I dont have other ideas, that ie hack to keeps "goto top" link in the bottom corner of long pages

If it works for me and not for you there must a difference I guess between my host and yours

Member Avatar for flockit

I put browsershots.org images into a prior post
it does dock at window bottom,
I dont have other ideas, that ie hack to keeps "goto top" link in the bottom corner of long pages

If it works for me and not for you there must a difference I guess between my host and yours

Thanks for your help, but I got a better code! Contact me and let me know if you want it as it works in all FireFox, Netscape, Safari, Internet Explorer and much more. It is just using pure CSS!

Thanks!

Regards,
Akshit Soota

Thanks for your help, but I got a better code! Contact me and let me know if you want it as it works in all FireFox, Netscape, Safari, Internet Explorer and much more. It is just using pure CSS!

Thanks!

Regards,
Akshit Soota

how to get this code......please give me

Hi akshits,
Share with us.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.