Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating menu cut off if window is resized or --

    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:
    Code:
    <!-- *********************************************************
         * 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.
    Last edited by Jackyboy; 06-09-2008 at 12:37 AM. Reason: clarification

  • #2
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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();
    </script>


    to this:
    JSFX_FloatDiv("divTopLeft", 0, -180).floatIt();
    </script>


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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •