Jackyboy
06-08-2008, 11:35 PM
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 --->
</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("divTopLeft", 0, -760).floatIt();
</script>
<!-- ********************************************************* -->
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?
Thanks.
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 --->
</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("divTopLeft", 0, -760).floatIt();
</script>
<!-- ********************************************************* -->
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?
Thanks.