SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Catfish-like JS Menu problem

    Hi,

    I'm trying to create a floating menu in JS which scrolls along the page at the bottom of the browser window. The idea is to have it look like those amazing "catfish" ads on Sitepoint.

    Check out this link: http://twizted.be/testmenu.php

    As you can see, a testversion of the menu is showing at the bottom and it moves along when you scroll trough the page. So far so good. However, there are two issues I can't seem to fix:

    1) In Firefox, the bottom part of the menu doesn't show as it dissapears behind the bottom border of the browser window.

    2) I can't get the menu to stretch the full 100% of the browser window and somehow it won't center on the page. The idea is that the red part is shown in the middle of the page and the green parts are stretched according to resolution size towards the right and left sides of the window.

    Here is the code in the testpage:

    in the head section:

    HTML Code:
     <SCRIPT LANGUAGE="JavaScript">
    <!--
    floatX=0;
    floatY=44;
    layerwidth=1000;
    layerheight=0;
    halign="center";
    valign="bottom";
    delayspeed=1;
    NS6=false;
    IE4=(document.all);
    if (!IE4) {NS6=(document.getElementById);}
    NS4=(document.layers);
    function adjust() {
    if ((NS4) || (NS6)) {
    if (lastX==-1 || delayspeed==0)
    {
    lastX=window.pageXOffset + floatX;
    lastY=window.pageYOffset + floatY;
    }
    else
    {
    var dx=Math.abs(window.pageXOffset+floatX-lastX);
    var dy=Math.abs(window.pageYOffset+floatY-lastY);
    var d=Math.sqrt(dx*dx+dy*dy);
    var c=Math.round(d/10);
    if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
    if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
    if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
    if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
    }
    if (NS4){
    document.layers['floatlayer'].pageX = lastX;
    document.layers['floatlayer'].pageY = lastY;
    }
    if (NS6){
    document.getElementById('floatlayer').style.left=lastX;
    document.getElementById('floatlayer').style.top=lastY;
    }
    }
    else if (IE4){
    if (lastX==-1 || delayspeed==0)
    {
    lastX=document.body.scrollLeft + floatX;
    lastY=document.body.scrollTop + floatY;
    }
    else
    {
    var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
    var dy=Math.abs(document.body.scrollTop+floatY-lastY);
    var d=Math.sqrt(dx*dx+dy*dy);
    var c=Math.round(d/10);
    if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
    if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
    if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
    if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
    }
    document.all['floatlayer'].style.posLeft = lastX;
    document.all['floatlayer'].style.posTop = lastY;
    }
    setTimeout('adjust()',50);
    }
    function define()
    {
    if ((NS4) || (NS6))
    {
    if (halign=="left") {floatX=ifloatX};
    if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
    if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
    if (valign=="top") {floatY=ifloatY};
    if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
    if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
    }
    if (IE4)
    {
    if (halign=="left") {floatX=ifloatX};
    if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
    if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
    if (valign=="top") {floatY=ifloatY};
    if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
    if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
    }
    }
    //-->
    </script>

    at the bottom of the body section:

    HTML Code:
     <script>
    if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
    if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; center:'+floatX+'; top:'+floatY+';">');}
    </script>
    </p>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#339933" align="center">
    <tr>
    	<td height="40">&nbsp;</td>
    	<td width="760" bgcolor="#990000"><font color="#FFFFFF" size="1" face="Verdana"><strong>test 
    	 menu </strong></font></td>
    	<td>&nbsp;</td>
    </tr>
    </table>
    <script>
    if (NS4)
    {
    document.write('</LAYER>');
    }
    if ((IE4) || (NS6))
    {
    document.write('</DIV>');
    }
    ifloatX=floatX;
    ifloatY=floatY;
    define();
    window.onresize=define;
    lastX=-1;
    lastY=-1;
    adjust();
    </script>
    Any ideas? Thanks in advance for your comments.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  3. #3
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe anyone has a similar script/solution I could use?
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions


Bookmarks

Posting Permissions

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