Floating element with table while you scroll [Archive]

View Full Version : Floating element with table while you scroll

bluespotjaw

11-10-2009, 09:22 AM

I'm looking for a code that allows me to have a table on the right side of the screen that and the image that I have in that table will move down as the screen scrolls down.

An example can be found on dotster's site when you search for a domain. When it gives you the results, make your browser window smaller and scroll down. You'll see under selected domains it moves as you scroll.

https://secure.dotster.com/dds4/index.php?siteid=4798&domain=test-test&tld[]=com&x=0&y=0

There's a code here on DD that is close:

http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

This is only relative to the screen and I need one that is relative within a table on my site.

Anyone know where I can find this code or have one that I can use?

Thanks!

vwphillips

11-10-2009, 11:30 AM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.p {
position:relative;left:100px;top:100px;width:400px;height:400px;border:solid black 1px;
}

#float {
position:absolute;left:10px;top:0px;width:100px;height:40px;border:solid black 1px;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcFloat(id){
this.obj=document.getElementById(id);
this.p=this.obj.parentNode;
this.addevt(window,'scroll','Float');
}

zxcFloat.prototype.Float=function(){
this.obj.style.top=Math.min(Math.max(zxcWWHS()[3]-zxcPos(this.p)[1],0),this.p.offsetHeight-this.obj.offsetHeight)+'px';
}

zxcFloat.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}

/*]]>*/
</script>

</head>

<body>
<div class="p" >
<div ></div>
<img id="float" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
</div>

<div style="height:1000px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
new zxcFloat('float');
/*]]>*/
</script>

</body>

</html>

or

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#p {
position:relative;left:100px;top:100px;
}

#float {
position:absolute;z-Index:101;left:110px;top:0px;width:100px;height:40px;border:solid black 1px;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcFloat(pid,id){
this.obj=document.getElementById(id);
this.p=document.getElementById(pid); ;
this.addevt(window,'scroll','Float');
this.Float();
}

zxcFloat.prototype.Float=function(){
this.obj.style.top=Math.min(Math.max(zxcPos(this.p)[1],zxcWWHS()[3]),zxcPos(this.p)[1]+this.p.offsetHeight-this.obj.offsetHeight)+'px';
}

zxcFloat.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}

/*]]>*/
</script>

</head>

<body>
<table id="p" width="200" height="400" border="1">
<tr>
<td>Table</td>
</tr>
</table>
<img id="float" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />

<div style="height:1000px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
new zxcFloat('p','float');
/*]]>*/
</script>

</body>

</html>

MJH

11-11-2009, 03:39 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Permanently Positioned Div - Smooth Scrolls Back In To Place</title>
<script type="text/javascript">

/* Copyright 2008, Michael J. Hill. Used with permission. www.javascript-demos.com */
/* Free use of the code, so long as the above copyright notice is kept intact */

var useFloat = "";
var scrollTick = "";
var initTop = 0;
var nScrollTop = 0;
var prevVal = 0;
var currVal = 0;
var throttlePx = 0;
var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;

function throttle(){

throttlePx += Math.floor((nScrollTop - throttlePx) * .5);
useFloat.style.top = initTop + throttlePx + "px";
if (Math.abs(throttlePx - nScrollTop) > 1)
{
setTimeout("throttle()", 30);
}
else {
useFloat.style.top = initTop + nScrollTop + "px";
}
}

function stayHome(){

nScrollTop = document.documentElement.scrollTop;
scrollTick.value = nScrollTop;
prevVal = scrollTick.value;
if (prevVal == currVal)
{
throttle();
}
currVal = scrollTick.value;
prevVal = currVal;
}

function initFloatDiv(){

var nDiv = document.getElementsByTagName('div');
for (i=0; i<nDiv.length; i++)
{
if (nDiv[i].className = "float_container")
{
useFloat = nDiv[i];
}
}
scrollTick = useFloat.getElementsByTagName('form')[0].getElementsByTagName('input')[0];
initTop = useFloat.offsetTop;
setInterval("stayHome()", 350);
}

IE ? attachEvent('onload', initFloatDiv, false) : addEventListener('load', initFloatDiv, false);

</script>
<style type="text/css">

body
{
height: 3800px; /* a meaningless value used for testing */
}

.float_container
{
position: absolute;
top: 65px;
right: 25px;
border: 1px solid black;
background-color: #90ee90;
padding: 3px;
}

.float_container form
{
display: none;
}

.float_container img
{
margin-bottom: -4px;
width: 185px;
height: 139px;
}

</style>
</head>
<body>

<div class="float_container">
<form action=""><input type="hidden"></form>
<img src="./images/free_stamp.jpg" alt="Description" title="Description">
</div>

</body>
</html>

MJH, another great example but again it referenced the edge of the browser window and it ends up being in different spots depending on my window size and resolution.

No. It doesn't. The code works fine onresize, in both FF and IE.
YOUR problem is that you are using a table for page layout, instead of CSS.

bluespotjaw

11-11-2009, 08:03 PM

vwphillips, I tried using the code but I couldn't get it to work on my page. The div p code was positioning it based on the edge of the window. This didn't work because my site is centered within a fixed table and it would look different to people with not maximized screens and different resolutions. I even tried taking out the div p tag and using just the float but it didn't work.

MJH, another great example but again it referenced the edge of the browser window and it ends up being in different spots depending on my window size and resolution.

Now maybe I'm just messing it up.

Here's what I'd like. On my site page: http://www.jivephotography.com/2008.htm I'm looking to have the section FEATURED UPCOMING EVENTS scroll down as the user scrolls the page, or at least the fliers.

vwphillips

11-12-2009, 08:22 AM

centered in the table

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#p {
position:relative;left:100px;top:100px;
}

#float {
position:absolute;z-Index:101;left:110px;top:0px;width:100px;height:40px;border:solid black 1px;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcFloat(pid,id){
this.obj=document.getElementById(id);
this.p=document.getElementById(pid); ;
this.addevt(window,'scroll','Float');
this.Float();
}

zxcFloat.prototype.Float=function(){
this.obj.style.top=Math.min(Math.max(zxcPos(this.p)[1],zxcWWHS()[3]),zxcPos(this.p)[1]+this.p.offsetHeight-this.obj.offsetHeight)+'px';
this.obj.style.left=zxcPos(this.p)[0]+(this.p.offsetWidth-this.obj.offsetWidth)/2+'px';
}

zxcFloat.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}

/*]]>*/
</script>

</head>

<body>
<table id="p" width="200" height="400" border="1">
<tr>
<td>Table</td>
</tr>
</table>
<img id="float" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />

<div style="height:1000px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
new zxcFloat('p','float');
/*]]>*/
</script>

</body>

</html>