How do I fix this dynamic menu ?

[jeddiki]

Hi I have a dynamic menu on my site and it uses
javascript to make slide up and down the page.

I think its pretty cool but it seems that it works independently of the
page so if you try and reduce the width of the window, it starts getting messed up.

Have a look here and you will see what I mean:

my website

One other thing I don't like is that it forces the window to 100% each
time you click a link, I am sure that will annoy people.

Is there an easy way to stop the central column from "crashing into" the menu when the window width is reduced ?

And how do I stop this 100% window without messing the page up ?

Thanks for any advice.

The menu code is here :

(there are a few lines of php but the main part is all javascript)

 
/*
* Next display the menu.
*
*
*/
$start = 0;
$last = 20;
 
        $sql = "SELECT sc_name, user_id FROM clients
        WHERE confirm = 'y'  
      AND type = 'E'
      ORDER BY lig_pos DESC LIMIT $start,$last";             
 
        $result = mysql_query($sql)
         or die ("Could not execute STARTER FEATURE query.");
 
        while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
            {
            $Links[] = $row;
            }
 
 
//--> Output data.
 
echo '
<div id="divStayTopLeft" style="position:absolute">
<div class="menuH">Top Experts</div>
<ul class="categorylinks">';
 
foreach ($Links as $Link){
$the_link = str_replace(" ","%20",$Link['sc_name']);
echo "<li><a href=\"/$the_link/internet_marketing/expert/guru_{$Link['user_id']}\">&nbsp;{$Link['sc_name']}</a></li>";
}
echo '</ul>';  
?>            
 
</div>
<script type="text/javascript">
 
 
 window.moveTo(0,0);
 window.resizeTo(screen.width,screen.height);
 
/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/
 
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
 
document.write('<\/div>')
 
function JSFX_FloatTopDiv()
{
    var startX = 20,
    startY = 600;
    var ns = (navigator.appName.indexOf("Netscape") != -1);
    var d = document;
    function ml(id)
    {
        var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
        if(d.layers)el.style=el;
        el.sP=function(x,y){this.style.left=x;this.style.top=y;};
        el.x = startX;
        if (verticalpos=="fromtop")
        el.y = startY;
        else{
        el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
        el.y -= startY;
        }
        return el;
    }
    window.stayTopLeft=function()
    {
        if (verticalpos=="fromtop"){
        var pY = ns ? pageYOffset : document.body.scrollTop;
        ftlObj.y += (pY + startY - ftlObj.y)/8;
        }
        else{
        var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
        ftlObj.y += (pY - startY - ftlObj.y)/8;
        }
        ftlObj.sP(ftlObj.x, ftlObj.y);
        setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("divStayTopLeft");
    stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
 
 

[acoder]

The 100% problem is caused by lines 42-43. Remove them.

As for the script, it's a bit of mix-mash of old code/browser detection. You can use position: fixed instead. It works in most modern browsers. It doesn't work in IE6 though, but you can use this fix.