Floating Menu does not maintain position when scrolling horizontally.

**topolino** · 11-04-2012, 10:26 PM

I downloaded some time ago a java script file which I have used on a couple of my websites. Recently I discovered an issue whereby if you open the Favorites box in MS Internet Explorer and use the scroll bar at the bottom of the page to scroll the web page right, whilst the favorites window is open, the floating menu moves across with the page instead of staying on the right hand edge of the screen. Does any one know what could be causing this to happen and is it an issue with the position "absolute"?

Any help greatly appreciated

Here is the code I am using which is exactly as per that I downloaded:

Code:

if (!document.layers)
document.write('<div id="Floater" style="position:absolute">')
document.write('<layer id="Floater">');

document.write('<a href="../index.html"><img src="../images/graphics/float-home2.gif" border="0" vspace="1"></a><br>');

document.write('<a href="../contactus.htm"><img src="../images/graphics/float-contactsmall.gif" border="0" vspace="1"></a><br>');

document.write('<a href="../sitemap.htm"><img src="../images/graphics/float-map2.gif" border="0" vspace="1"></a><br>');

document.write('<a href="#top"><img src="../images/graphics/float-top2.gif" border="0" vspace="1"></a><br>');

document.write('</layer>');

if (!document.layers)
document.write('</div>')

function FloatMenu()
{
	var Xloc = 0,
	Yloc = 278;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	function SetMenu(id)
	{
		var GetElements=document.getElementById?document.getElementById(id):document.all?document.all[id]:document.layers[id];
		if(document.layers)GetElements.style=GetElements;
		GetElements.sP=function(x,y){this.style.right=x;this.style.top=y;};
		GetElements.x = Xloc;
		GetElements.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		GetElements.y -= Yloc;
		return GetElements;
	}
	window.LoCate_XY=function()
	{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - Yloc - ftlObj.y)/15;
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("LoCate_XY()", 10);
	}
	ftlObj = SetMenu("Floater");
	LoCate_XY();
}
FloatMenu();


//  End -->

**Beverleyh** · 11-05-2012, 05:27 AM

Not sure what you're saying - isn't that what's supposed to happen as per the script (floating menu and all)?

We need a link to your page to see what you describe in context.

**topolino** · 11-05-2012, 09:21 AM

Originally Posted by Beverleyh

Not sure what you're saying - isn't that what's supposed to happen as per the script (floating menu and all)?

We need a link to your page to see what you describe in context.

Hi Beverley, thanks for the reply. The floating menu is only supposed to remain in the same position vertically on the page, so that when you scroll up or down it always remains visible. Here is a link to the home page of one of my websites...

www.clanmatheson.org

If you open up the favorites box in IE8 or IE9, then use the left green arrow to "pin" the favorites center", it causes a scroll bar to appear at the bottom of the page. It is when you then use this scroll bar to scroll right, across the page, that the floating menu moves away from the right hand edge of the screen where it is meant to remain and moves across with the page horizontally. It still works vertically as it should, if you scroll the page vertically up or down.

Here is a screen shot with the problem showing. Note that once you close the favorites box, the floating menu returns back to the correct position.

**coothead** · 11-05-2012, 09:58 AM

Hi there topolino,

there is really no need to use an ancient javascript to fix an element on your .

CSS "position-fixed" is now used instead.

Here is a basic example...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>css position fixed</title>

<style type="text/css">
#fixed-box {
    position:fixed;
    top:278px;
    right:0;
    width:324px;
    height:200px;
    border:1px solid #000;
    background-color:#fff;
    line-height:200px;
    text-align:center;
 }
#page {
    width:3000px;
    height:3000px;
 }
</style>

</head>
<body>

<div id="fixed-box"> I am going nowhere!</div>

<div id="page">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p>
</div>

</body>
</html>

coothead

**sureshkumar** · 07-17-2014, 03:12 PM

Hi , I am using the below script for floating button copied from this site..

It is working in IE and not it Chrome...

Floating button is on right side and the left side i have some text boxes, radio buttons and check box..
If the floating button and the Text box/Radio/Checkboxes are in the same line, i am not able to enter anything on the text box & no click on radio/checkbox..

Those are disabled /Read only when the floating buttons are on same row.. so to enter something on the textbox i have to scroll down, so that the floating button will come down.
Basically a Compatibility issue in IE & chrome..

Please help me to fix it

<div id="divBottomLeft" style="position:absolute">
<img src="javascriptfx.gif"/>
</div>

<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
JSFX_FloatDiv("divBottomLeft", 10, -100).floatIt();
</script>