Need a DIV always at bootm by my way!

Question

flockit

15 Years Ago

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

javascript

4 Contributors
9 Replies
172 Views
2 Months Discussion Span
Latest Post 15 Years Ago Latest Post by mail2saion

almostbob 866 Retired: passive income ROCKS

15 Years Ago

<!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

almostbob 866 Retired: passive income ROCKS

15 Years Ago

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 ); }

almostbob 866 Retired: passive income ROCKS

15 Years Ago

it works, good

Reply to this topic

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.

flockit · Answer 1 · 2009-06-24T18:42:50+00:00

Need the code as an attachment?

Get it from:

http://www.daniweb.com/forums/attachment.php?attachmentid=10543&d=1245592053

flockit · Answer 2 · 2009-06-27T14:54:57+00:00

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!

almostbob 866 Retired: passive income ROCKS · Answer 3 · 2009-06-27T20:00:07+00:00

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

flockit · Answer 4 · 2009-06-28T07:53:26+00:00

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

srinath49 0 Newbie Poster · Answer 5 · 2009-08-26T16:38:48+00:00

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

mail2saion 14 Posting Whiz in Training · Answer 6 · 2009-08-26T16:47:00+00:00

mail2saion 14 Posting Whiz in Training

15 Years Ago

Hi akshits,
Share with us.