...

View Full Version : Smooth Scrolling Between Frames



chelseasikoebs
10-16-2009, 06:52 AM
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??

Damo
10-16-2009, 11:02 AM
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.

vwphillips
10-16-2009, 12:25 PM
<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


<!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


<!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.scrollTo p];
}

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>

chelseasikoebs
10-16-2009, 08:40 PM
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.

vwphillips
10-16-2009, 09:09 PM
look at my example for the bottom frame

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

chelseasikoebs
10-19-2009, 04:53 AM
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.

Damo
10-19-2009, 07:36 AM
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>

Damo
10-20-2009, 04:25 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum