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 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Smooth Scrolling Between Frames

    Please take a look at my site at http://purdypoodles.webs.com/index2.html to see what I have set up with frames. I'm looking for code that will allow users to click on "meet the parents" in the top frame, for example, and nicely scroll from the current position in the bottom frame to the Meet the Parents section also in the bottom frame. Then, if the user wants to go to Poodle Facts from there, it'll scroll smoothly from Meet the Parents to Poodle Facts. etc. I got a JS code somewhere, but it doesn't work. Any ideas??

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    56
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Hi

    Not sure if your smoothscroll.js works across frames.

    Anyway you could check this out

    http://scripterlative.com/files/softscroll.htm

    dowmload the softscroll.js file ----- it has all the instructions and examples included in the file (open with notepad or whatever)

    It works and it's easy --- I just tested it and if I can do it anybody can:-)

    hope it helps.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <HTML>
    <HEAD>
    <TITLE>PURDY POODLES :: TINY TOY POODLE BREEDER IN NEBRASKA CITY, NE</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    	BODY { MARGIN:0; }
    </style>
    
    
    </HEAD>
    
    <frameset rows="199,*" border="0" framespacing="0" frameborder="1">
    	<center>
    
    	<frame src="091016Top.htm" noresize="noresize" SCROLLING=NO>
    	<frame name="Bottom" src="091016Bottom.htm" noresize="noresize" name="main">
    	</center>
    </frameset>
    
    </HTML>
    top

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function ScrollTo(anchor){
     var obj=window.parent.Bottom.S;
     if (obj){
      obj.ScrollTo(anchor);
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <a onclick="ScrollTo('fred');">Goto Fred</a>
    
    </body>
    
    </html>
    bottom

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    // Scroll To (16-October-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    //  parameter 0 =  period of time in milliseconds to scroll the height of the page.     (digits or defaults to previous or 1000(on first call) milliSeconds)
    //                 scalled to thje specific distance to be scrolled
    //  parameter 1 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                               (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    function zxcScrollTo(ms,c){
     this.time=ms||1000;
     this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
     return this;
    }
    
    //  parameter 0 = the unique ID name of the anchor object.                                           (string)
    //  parameter 1 =  period of time in milliseconds to scroll the height of the page.     (digits or defaults to previous or 1000(on first call) milliSeconds)
    //                 scalled to thje specific distance to be scrolled
    zxcScrollTo.prototype.ScrollTo=function(anchor,ms){
     anchor=document.getElementById(anchor);
     clearTimeout(this.to);
     if (anchor){
      this.time=ms||this.time;
      this.data=[0,zxcWWHS()[3],zxcPos(anchor)[1]];
      this.mS=this.time*Math.abs((this.data[2]-this.data[1])/zxcBdyWH()[1]);
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     }
    }
    
    zxcScrollTo.prototype.cng=function(){
     var oop=this,ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.c=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.c=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
     this.apply();
     if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Complete) this.Complete(this);
     }
    }
    
    zxcScrollTo.prototype.apply=function(){
     if (isFinite(this.data[0])){
      window.scrollTo(0,this.data[0]);
     }
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    function zxcBdyWH(){
     if (document.body.scrollHeight>document.body.offsetHeight) return [document.body.scrollWidth,document.body.scrollHeight]; // all but Explorer Mac
     return [document.body.offsetWidth,document.body.offsetHeight]; // Explorer Mac;
    }
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    
    
    
    </script>
    
    </head>
    
    <body onload="S=new zxcScrollTo(1000,'sin');" >
    
    <a onclick="S.ScrollTo('fred');">Goto Fred</a>
    <div style="height:300px;" ></div>
    <a id="fred" >Fred</a>
    <div style="height:500px;" ></div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where do I put this code?

    <a onclick="S.ScrollTo('fred');">Goto Fred</a>
    <div style="height:300px;" ></div>
    <a id="fred" >Fred</a>
    <div style="height:500px;" ></div>

    You show it in the bottom frame, but I don't have any links in the bottom frame, so I'm confused.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    look at my example for the bottom frame

    <a id="fred" ></a> is the position the page is scrolled to
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Damo View Post
    Hi

    Not sure if your smoothscroll.js works across frames.

    Anyway you could check this out

    http://scripterlative.com/files/softscroll.htm

    dowmload the softscroll.js file ----- it has all the instructions and examples included in the file (open with notepad or whatever)

    It works and it's easy --- I just tested it and if I can do it anybody can:-)

    hope it helps.
    Well I can't do it! LOL I don't why, I'm having a hard time figuring this out. I saved the text file as the .js file and put the script code within the Head of all documents (index2, PurdyPoodlesBtm2, and PurdyPoodlesTop2) because it didn't work in them individually. What am I missing? It sounds so simple, but I can't get it to work. AND it puts a break in the design.

  • #7
    New Coder
    Join Date
    Jan 2009
    Posts
    56
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Hi
    ok i'll try.

    download the softscroll.js
    http://scripterlative.com/files/softscroll.htm

    It is AN EXTERNAL FILE so no need to do anything --- jus put it in a folder.

    next

    put the following in the head of doc --- make sure the src points to the folder where you placed the js file.(so change if needed)

    <script type='text/javascript' src='softscroll.js'></script>


    then in yr doc

    <a href="#goThere">Go to link point</a>
    \
    \
    \
    \
    \
    <a name="goThere">LINK TO HERE</a>


    The above example is assuming everything on same page ---- just get it to work first:-)

    then

    Cross-Frame Scrolling
    ---------------------
    The script can scroll to anchors within an iframe in the same document, or another frame from the same <frameset>.
    The target document does not need to load a copy of the script.
    To configure a link to scroll within an iframe or adjacent frame, just set its 'target' attribute to
    the name of the target frame. Do not include a 'URL' in the 'href' parameter.
    The standard values: _top, _self, _parent & _blank are ignored.

    Examples:

    <a href='#iframeAnchor' target='if1'>Somewhere in the iframe 'if1' in this page</a>

    <a href='#otherFrameAnchor' target='main'>Somewhere in the adjacent frame called 'main'</a>
    Last edited by Damo; 10-19-2009 at 08:05 AM. Reason: anchor names didn't match --- my mistake --ok now

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    56
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Hi there

    please find mock up of your page with scrolling.

    Download zip file and unpack.

    open index file to see scrolling

    also read txt notes.
    Attached Files Attached Files


  •  

    Posting Permissions

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