Floating Menu does not maintain position when scrolling horizontally. [Archive]

View Full Version : 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:

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

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

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