View Full Version : Floating menu cut off if window is resized or --

06-09-2008, 12:35 AM
if the screen resolution is reduced, thereby having the same effect as reducing the height of the window. I have a large floating menu here: http://www.dallasplumbing.com
The menu is fine as long as the window is deep enough such as with 1024 x 768 resolution. Problem occurs when the screen resolution drops to 800 x 600. The top of the floating menu disappears. If the window is too large, the menu drops down too far. I want the top of the arc shape to disappear above the top of the window, but not so much that the DPC logo is not visible.

I got the script here:

<!-- *********************************************************
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Floating Div from http://www.javascript-fx.com
******************************************************** -->
<div id="divTopLeft" style="position:absolute">
<!-- Start - put your content here --->
<b>Your Content Here</b>
<!-- End - put your content here --->

<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;
el.cx = el.sx = sx;el.cy = el.sy = sy;

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;
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("divTopLeft", 0, -760).floatIt();
<!-- ********************************************************* -->

My css style is set to position: absolute and z-index: 33

I want the arc shape of the menu to be complete, meaning the graphics display a complete arc as the top of the menu floats to position off and above the top of the window. So, that seems to require a negative top position setting.

If I set the top position to -183px the whole div drops down from the top that far. So, I tried different settings and found that -760px looks ok in FF and IE 6 at 1024 x 768 res.

Is there code to keep it there when the resolution or window size changes?


06-09-2008, 06:39 AM
I came up with a solution:

In the javascript, I changed this: if(this.sy<0)

to this: if(this.sy<-180)

and this:
JSFX_FloatDiv("divTopLeft", 0, -760).floatIt();

to this:
JSFX_FloatDiv("divTopLeft", 0, -180).floatIt();

Seems to work in FF, Safari and IE 6. Those are all I'm able to check.