SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Floater

  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floater

    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
    -----
    Web Designer & Internet Consultant
    www.simonlilly.co.uk
    sililly@hotmail.com
    -----

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...)

  3. #3
    SitePoint Enthusiast Fluffy bunny slippers's Avatar
    Join Date
    Oct 2001
    Location
    outside your house
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could always take a peak at the source. But You heard nothing from me
    If you like the look of my slippers you should see my undies!

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heres the javascript for the code, who cares if they heard it from me:P

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


    function 
    ClassChaser(divNameobjName,takeOffToptakeOffBottom)
    {
        
    // 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(!
    dd=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(!&& 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 / ( this.slideTime )
        
    this.C        now.getTime( )

        if (
    Math.abs(this.A) > this.availableScrollingHeight) {
            
    this.this.this.targetY this.availableScrollingHeight this.targetY this.availableScrollingHeight
            this
    .this.this.availableScrollingHeight : -this.availableScrollingHeight
        
    } else {
            
    this.this.currentY
        
    }
    }




    function 
    m_sw_slide()
    {
        var 
    now    = new Date( )
        var 
    newY    this.Math.sinthis.* ( now.getTime( ) - this.) ) + this.D
        newY        
    Math.roundnewY )

        if (( (
    this.0) && (newY this.currentY) && (newY<=this.endPos)) ||
            ( (
    this.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
    PHP Code:
    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

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2002
    Location
    UK
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...but remember if you are going to use someone else's code verbatim you should at the very least credit them.

  6. #6
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But, they never coded that. look at there code and let me know if you still think that, as im sure they didn't

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It IS a governemt website. I think it's a distinct possibility that they did code it themselves.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2002
    Location
    UK
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The Answer

    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
    -----
    Web Designer & Internet Consultant
    www.simonlilly.co.uk
    sililly@hotmail.com
    -----

  10. #10
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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"

  11. #11
    SitePoint Zealot
    Join Date
    Feb 2002
    Location
    UK
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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":

    PHP Code:
    <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> 

  14. #14
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    We have a Winner!!!

    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

  15. #15
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A Better Script

    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


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
  •