Floater

[simonlilly]

I've found a floating menu that I'd really love to duplicate on a site, can anyone point me at a resource or tutorial on creating one this smooth...

Scroll the page and watch the lefthand menu follow you.

http://www.royal.gov.uk/output/page1011.asp

Cheers,

Simon

[Fly Swatter]

Its a simple script to write, but I dont have time @ this moment.
I would recommend that you make it stagnant for downgraded browsers (so it just sits where it is, and doesn't scroll), then use the document.onscroll event to trigger the scroll function. This way you dont have to deal with timeouts (who real cares about 3 world browsers anyways etc...)

[Fluffy bunny slippers]

you could always take a peak at the source. But You heard nothing from me

[Andrew-J2000]

heres the javascript for the code, who cares if they heard it from me:P

//<script>
function chaserRollover(imgid,imgsrc)
{
    nnstr=(document.layers)?"document.layers.CC.":""
    eval(nnstr+"document.images['"+imgid+"'].src='"+imgsrc+"'")
}


function ClassChaser(divName, objName,takeOffTop, takeOffBottom)
{
    // note the object is assuming that the magins of the HTML page are set to 0
    //Properties
    this.objName=objName 
    this.name=divName
    this.takeOffTop=(takeOffTop!=null)?parseInt(takeOffTop):0;            //default value to 0 
    this.takeOffBottom=(takeOffBottom!=null)?parseInt(takeOffBottom):0;    //default value to 0 
    this.startPos                                                //position where the div start chasing from
    this.endPos                                                    //position where the div end chasing in    
    this.styleRef                                                //refers to div styles according to browsers
    this.divObj                                                    //div object reference
    this.availableScrollingHeight                                //available height for the div to scroll in
    this.divHeight                                                //chaserHeight
    this.callRate = 10
    this.slideTime = 1200
    this.A
    this.B
    this.C
    this.D
    this.interval
    this.initialised
    
    
    //methods
    this.init = m_sw_init;    
    this.findObj = m_sw_findObj;
    this.main =    m_sw_main;
    this.slide = m_sw_slide;
    this.slideInit = m_sw_slideInit;
    this.startChase = m_sw_startChase;
}
function m_sw_init()
{
    this.macstr='MacPPC'
    this.ismac = (navigator.platform == this.macstr)
    //alert('hello');
    this.styleRef=(document.layers)?"":".style"
    this.divObj=this.findObj(this.name)
    //position layer
    eval("this.divObj"+this.styleRef+".top=this.takeOffTop")
    this.divHeight=(document.layers)?parseInt(this.divObj.document.height):((document.all)?parseInt(this.divObj.clientHeight):parseInt(this.divObj.offsetHeight))
    this.availableScrollingHeight=((document.all)?((this.ismac)?parseInt(document.body.offsetHeight):parseInt(document.body.scrollHeight)):parseInt(document.height))-this.takeOffTop-this.takeOffBottom-this.divHeight
    this.startPos=this.takeOffTop
    this.endPos=this.availableScrollingHeight+this.takeOffTop;
    this.initialised=true
    if (!document.all)
    {
        eval("this.interval=setInterval(\'"+this.objName+".main()\',this.callRate)");//this.callRate
    }
}

function m_sw_findObj(n,d) { 
    var p,i,x;  
    if(!d) d=document; 
    if((p=n.indexOf("?"))>0&&parent.frames.length) 
    {
            d=parent.frames[n.substring(p+1)].document; 
        n=n.substring(0,p);
    }
    //Case IE
    if(!(x=d[n])&&d.all) 
        x=d.all[n]; 
    for (i=0;!x&&i<d.forms.length;i++) 
        x=d.forms[i][n];
    //Case NN
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) 
        x=this.findObj(n,d.layers[i].document);
    //Case NN6
    if(!x && d.getElementById) 
        x=d.getElementById(n); 
    return x;
}

function m_sw_main()
{
    eval("this.currentY=parseInt(this.divObj"+this.styleRef+".top)")
    this.scrollTop    = (document.all)?parseInt(document.body.scrollTop):parseInt(window.pageYOffset);
    var newTargetY    = this.scrollTop +(this.startPos)
        
    if ( this.currentY != newTargetY ) {

        if ( newTargetY != this.targetY ) {

            this.targetY = newTargetY
            if (this.availableScrollingHeight>0)
                this.slideInit( )
    
        }
    if (this.availableScrollingHeight>0)
        this.slide( )
        
    }
}

function m_sw_slideInit()
{
    var now    = new Date( )
    this.A        = this.targetY - this.currentY
    this.B        = Math.PI / ( 2 * this.slideTime )
    this.C        = now.getTime( )

    if (Math.abs(this.A) > this.availableScrollingHeight) {
        this.D = this.A > 0 ? this.targetY - this.availableScrollingHeight : this.targetY + this.availableScrollingHeight
        this.A = this.A > 0 ? this.availableScrollingHeight : -this.availableScrollingHeight
    } else {
        this.D = this.currentY
    }
}




function m_sw_slide()
{
    var now    = new Date( )
    var newY    = this.A * Math.sin( this.B * ( now.getTime( ) - this.C ) ) + this.D
    newY        = Math.round( newY )

    if (( (this.A > 0) && (newY > this.currentY) && (newY<=this.endPos)) ||
        ( (this.A < 0) && (newY < this.currentY) && (newY<=this.endPos) )) {
            eval("this.divObj"+this.styleRef+".top=newY")
    }
    if ((newY==this.targetY)&& (this.interval)&&(document.all))
    {
        clearInterval(this.interval)
    }
}

function m_sw_startChase()
{
    if ((document.all)&&(this.initialised))
    {
        if (this.interval)
        {    
            clearInterval(this.interval)
        }
        eval("this.interval=setInterval(\'"+this.objName+".main()\',this.callRate)");
    }
}

function SurfTo(PageLocation) {
    window.location.href = PageLocation;
} 

this is the external page called float.js

called in the page like so

<script language="JavaScript" src="float.js"></script>

its initialised here

OChaser= new ClassChaser("CC","OChaser",150,170)

next they preload the images with this function

function preload()
{
                            //Floating Menu
                            img_34 = new Image()
                            img_34.src="/files/images/ROYAL_FAMILY_B3_DIANA_10_over.gif"
                            img_35 = new Image()
                            img_35.src="/files/images/ROYAL_FAMILY_B3_DIANA_14_over.gif"
                            img_36 = new Image()
                            img_36.src="/files/images/ROYAL_FAMILY_B3_DIANA_16_over.gif"
                            img_37 = new Image()
                            img_37.src="/files/images/ROYAL_FAMILY_B3_DIANA_21_over.gif"
                            img_38 = new Image()
                            img_38.src="/files/images/ROYAL_FAMILY_B3_DIANA_22_over.gif"
                            img_39 = new Image()
                            img_39.src="/files/images/ROYAL_FAMILY_B3_DIANA_23_over.gif"
                            img_40 = new Image()
                            img_40.src="/files/images/history_b_27_over.gif"
                            img_41 = new Image()
                            img_41.src="/files/images/history_b_28_over.gif"
}

                    function init()
                    {
                        preload();
                        OChaser.init();
                    } 

<body onresize="resz();" onscroll="OChaser.startChase();" onload="init();" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


This should be enough to make it work

[martm]

...but remember if you are going to use someone else's code verbatim you should at the very least credit them.

[Andrew-J2000]

But, they never coded that. look at there code and let me know if you still think that, as im sure they didn't

[creole]

It IS a governemt website. I think it's a distinct possibility that they did code it themselves.

[martm]

Andrew,

looking at the code you are right that there is no credit identifying who wrote the code so you could also be right about them not writing the code.

however, the lack of a credit would incline me to believe that they did write the code as i would like to think that any reputable web design company, such as the one that produced this site, would credit someone else's work if they copied it.

but maybe i'm just naive

[simonlilly]

Coded it themselves I don't think....

Just found this after doing a search for "chaser javascript"

http://www.webreference.com/dhtml/column37/index.html

Enjoy and distribute!!

Simon

[Andrew-J2000]

hehe that reminds me creole, So your trying to say that any sight that is built by a professional/valid authority is a credible resource.

lmfao just read your msg simonlilly"

[martm]

ok, ok, i'm naive ): my illusions are shattered.

i shall not doubt Andrew again

although they changed it somewhat they should have at least ackowldedged their inspiration.

[berzerko]

Question: How can I make the "chaser" javascript work in other browsers, other than IE.

I have gone over the "floater" script that was based on "chaser"posted but cannot get that to work.

-berzerko

[berzerko]

I should mention that the javascript "float.js" as shown in this thread is totally corrupted. If you want the script use this link:

http://www.royal.gov.uk/include/js/float.js

-berzerko

P.S.#1 float.js(from the link) shows no javascript errors and seems to work very well for the orignial site :

http://www.royal.gov.uk/output/page1011.asp

I just can't seem to make it work for me. I have no clue what I am doing wrong.

P.S.#2 Anyway here is my site "MenuTest.php":

<html lang="en">
<head>

<title>MenuTest</title>

<script language="JavaScript" src="Includes/float4.js"></script>
<script language="JavaScript">
                    var objPage = Page();
                    function Page() {
                        return(this);
                    }
                    objPage.idPage='MenuTest';
                    
                    OChaser= new ClassChaser("CC","OChaser",150,170)

                    function resz()
                    {
                        if (document.layers)
                        history.go(0);
                    }

//                    function rollover(imgid,imgsrc)
//                    {
//                        eval("document.images['"+imgid+"'].src='"+imgsrc+"'")
//                    }

//                    function preload()
//                    {
                            //Top Navigation
//                            img_01 = new Image()
//                            img_01.src="/files/images/history_a_01_over.gif"
//                            img_02 = new Image()
//                            img_02.src="/files/images/history_a_02_over.gif"                                
//                    }

                    function init()
                    {
//                        preload();
                        OChaser.init();
                    }

                </script>
</head>
<body onresize="resz();" onscroll="OChaser.startChase();" onload="init();" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Begin Ref_Links Page -->
<table border="0" class="reftext" cellpadding="0">
    <tr>
        <td width="175">

          </td>
          <td valign="top">
              <table valign="top" border="0" cellpadding="0" cellspacing="0">
                    <tr>

// a whole bunch of links and stuff here 
// removed to conserve space

                    </tr>
                  </table>            
         </td>
    </tr>
</table>
        <div name="CC" id="CC" >
            <table width="173" border="1" cellpadding="7" bordercolor="#CCCCCC">
            <TBODY>
                  <tr>
                    <td align="left" valign="top" bordercolor="#CCCCCC" bgcolor="#CCCCCC">
                    The following is a list of subjects that you may find helpful.</td></tr>
                      <tr><td>&nbsp;1</td></tr>
                      <tr><td>&nbsp;2</td></tr>
                      <tr><td>&nbsp;3</td></tr>
                      <tr><td>&nbsp;4</td></tr>
                      <tr><td>&nbsp;5</td></tr>
                      <tr><td>&nbsp;6</td></tr>
                 </TBODY>
              </table>
        </div>
<!-- End Ref_Links Page -->

</body>
</html> 

[berzerko]

We have a Winner!!!

The problem was that I didn't realize that the "Queens" website placed the following required code in the CSS:

#CC {
position:absolute;
left:0px;
top:100px;
width:175px;
}

(You can also put the same code between <style></style> tags above the <div> tag, as I have done )

Ok, so you have float.js, the script that goes between the <head> tags, the body tag, and the <style><div> tags. Looks like it's all here.

Have fun,

-berzerko

[berzerko]

Here is one that I like better from Dynamic drive. Since it in not preloaded by "onLoad," it doesn't cause interferance problems with other divisions. Here is the link:http://www.dynamicdrive.com/dynamici...staticmenu.htm

Notes: You can replace the script (to add divisions) before and after the menu with <div></div>. Also, you can place the working part of the java in a .js file and link it in.

-berzerko