...

View Full Version : double smooth scrolling



truespace
05-13-2009, 02:38 AM
I can make a page smooth scroll to anchors within the main page,
I can make a link in the main page smooth scroll the content of an iframe.

BUT if I try to double it up with something like

<a href="#place" target="_top"
onclick="parent.frames['FRAME1'].location='#iframe_place">two
links</a>

the main page and the iframe will jump to their links, but the
smooth scroll breaks.

I'm guessing that means the JS I'm using can't understnad that series of syntax. Anyone who can tell me how to change that is a rock star. Here's the javascript I'm using. It's called softscroll.js

Or if anyone knows another way of smooth scrolling the parent page and an
iframe with ONE link I would love to hear it.


var SoftScroll=
{
/*** Free download with instructions: http://scripterlative.com?softscroll ***/

DEBUG:false,
timer:null, lastX:-1, lastY:-1, xHalted:false, yHalted:false, ok:false, step:50, targetDisp:null, stepTarget:{x:0,y:0}, logged:0, startJump:location.href.match(/#([^\?]+)\??/), startJumpDone:false, currentAnchor:null, initialised:false, initialTarget:"", showHref:false, excludeClass:/\bnoSoftScroll\b/i,

//////////////////////////
delay:50, proportion:3,
//////////////////////////

init:function()
{
var dL, linkTypes=['a','area'];

if( this.startJump )
{
this.startJump = this.startJump[1];
location.href='#';
window.scrollTo(0,0);
}this.cont();

if( document.documentElement )
this.dataCode=3;
else
if( document.body && typeof document.body.scrollTop != 'undefined' )
this.dataCode=2;
else
if( typeof window.pageXOffset!='undefined' )
this.dataCode=1;

for(var i=0, anchs=document.anchors, aLen=anchs.length; i<aLen; i++)
if( !anchs[i].childNodes.length )
anchs[i].appendChild( document.createTextNode('\xA0') );

for(var lt in linkTypes)
{
for(var i=0, dL=document.getElementsByTagName(linkTypes[lt]), anchorName, aLen=dL.length; i<aLen && this.ok; i++)
{
anchorName = ( dL[i].hash && dL[i].hash.match(/\S/) ) ? dL[i].hash.substring(1) : dL[i].name ? dL[i].name : "";

if( this.startJump && this.startJump === anchorName )
{
SoftScroll.go(anchorName);
startJumpDone = true;
}

if(dL[i].href && this.samePath( dL[i].href, location.href ) && anchorName.length)
{
if( this.DEBUG )
{
for(var j=0 ; j<aLen && anchorName!=dL[j].name && anchorName!=dL[j].id; j++)
;

if(j==aLen && !document.getElementById(anchorName) && !document.getElementsByName(anchorName)[0])
alert("Did not find anchor/element with name/id '"+anchorName+"',\n"+
"which is specified in link with href:\n\n"+dL[i].href);
}

if( !this.excludeClass.test( dL[i].className ) )
this.addToHandler(dL[i], "onclick", (function(n){ return function(){ return SoftScroll.go(n, this.target||""); }})(anchorName) );
}
}
}

if( !this.startJumpDone && document.getElementById( this.startJump ) )
SoftScroll.go( this.startJump );

this.initialised=true;

if(this.initialTarget!="")
this.go(this.initialTarget);
},

showHash:function()
{
this.showHref=true;
},

samePath:function(urlA, urlB)
{
return urlA.split(/\?|#/)[0] === urlB.split(/\?|#/)[0];
},

go:function(anchName, targetName)
{
if(this.initialised)
{
try
{
this.targetFrame = (typeof targetName !== 'string') ? window.self
: (parent.frames[ targetName ] || window.frames[ targetName ] || this.getIframeRef( targetName ) || window.self);
}
catch(e){ alert('Frame access error "'+targetName+'"'); }

var anchorTags = this.targetFrame.document.getElementsByTagName('a'), elemRef;

this.xHalted = this.yHalted=false;
this.getScrollData();
this.stepTarget.x = this.x;
this.stepTarget.y = this.y;

if(this.timer)
{
clearInterval(this.timer);
this.timer=null;
}

for(var i=0, len=anchorTags.length; i<len && anchorTags[i].name!=anchName && anchorTags[i].id!=anchName; i++)
;

if(i != len)
{
this.targetDisp = this.findPos( this.currentAnchor=anchorTags[i] );
this.timer = setInterval(function(){SoftScroll.toAnchor()}, this.delay);
}
else
if((elemRef = document.getElementById(anchName)) || (elemRef = document.getElementsByName(anchName)[0]) )
{
this.targetDisp = this.findPos( this.currentAnchor=elemRef );
this.timer = setInterval(function(){SoftScroll.toAnchor()}, this.delay);
}

}
else
this.initialTarget=anchName;

return false;
},

scrollTo:function(x,y)
{
this.lastX=-1;
this.lastY=-1;
this.xHalted=false;
this.yHalted=false;
this.targetDisp={x:0,y:0};
this.targetDisp.x=x;
this.targetDisp.y=y;

this.getScrollData();
this.stepTarget.x=this.x;
this.stepTarget.y=this.y;

if(this.timer)
clearInterval(this.timer);
this.timer=setInterval(function(){SoftScroll.toAnchor()}, this.delay);
},

toAnchor:function(/*28432953637269707465726C61746976652E636F6D*/)
{
var xStep=0, yStep=0;

this.getScrollData();

this.xHalted = (this.stepTarget.x > this.lastX)
? (this.x > this.stepTarget.x || this.x < this.lastX)
: (this.x < this.stepTarget.x || this.x > this.lastX);

this.yHalted = (this.stepTarget.y > this.lastY)
? (this.y > this.stepTarget.y || this.y < this.lastY)
: (this.y < this.stepTarget.y || this.y > this.lastY);

if( (this.x != this.lastX || this.y != this.lastY) && (!this.yHalted && !this.xHalted) )
{
this.lastX=this.x;
this.lastY=this.y;

if(!this.xHalted)
xStep=this.targetDisp.x - this.x;
if(!this.yHalted)
yStep=this.targetDisp.y - this.y;

if(xStep)
Math.abs(xStep)/this.proportion >1 ? xStep/=this.proportion : xStep<0?xStep=-1:xStep=1;

if(yStep)
Math.abs(yStep)/this.proportion >1 ? yStep/=this.proportion : yStep<0?yStep=-1:yStep=1;

yStep=Math.ceil(yStep);
xStep=Math.ceil(xStep);

this.stepTarget.x = this.x + xStep ;
this.stepTarget.y = this.y + yStep ;

if(xStep||yStep)
this.targetFrame.scrollBy(xStep, yStep);
}
else
{
clearInterval(this.timer);
this.timer=null;

if(this.startJump)
{
if(this.showHref)
location.href = '#'+this.startJump;
this.startJump=null;
}
else
if(this.showHref && !this.xHalted && !this.yHalted && this.currentAnchor!==null)
location.href = '#'+ (this.currentAnchor.name || this.currentAnchor.id);

this.lastX=-1;
this.lastY=-1;

this.xHalted=false;
this.yHalted=false;
}
},

getScrollData:function()
{
switch( this.dataCode )
{
case 3 : this.x = Math.max(this.targetFrame.document.documentElement.scrollLeft, this.targetFrame.document.body.scrollLeft);
this.y = Math.max(this.targetFrame.document.documentElement.scrollTop, this.targetFrame.document.body.scrollTop);
break;

case 2 : this.x=this.targetFrame.document.body.scrollLeft;
this.y=this.targetFrame.document.body.scrollTop;
break;

case 1 : this.x = this.targetFrame.pageXOffset; this.y = this.targetFrame.pageYOffset; break;
}

return {x : this.x, y : this.y};
},

findPos:function(obj)
{
var left = !!obj.offsetLeft ? (obj.offsetLeft) : 0;
var top = !!obj.offsetTop ? obj.offsetTop : 0;

while((obj = obj.offsetParent))
{
left += !!obj.offsetLeft ? obj.offsetLeft : 0;
top += !!obj.offsetTop ? obj.offsetTop : 0;
}

return {x:left, y:top};
},

getIframeRef:function( id )
{
var rv = null, ifSet = document.getElementsByTagName('iframe');

if(ifSet)
for(var i=0; i<ifSet.length; i++)
if( ifSet[ i ].id == id )
rv = window.frames[ i ];

return rv;
},

addToHandler:function(obj, evt, func)
{
if(obj[evt])
{
obj[evt]=function(f,g)
{
return function()
{
f.apply(this,arguments);
return g.apply(this,arguments);
};
}(func, obj[evt]);
}
else
obj[evt]=func;
},

cont:function()
{
eval('747279207b20766172206966723d646f63756d656e742e637265617465456c656d656e7428756e6573636170652827 2536392536362537322536312536642536352729293b206966722e77696474683d6966722e6865696768743d313b20696672 2e7372633d27697575713b30307464736a717566736d62756a77662f64706e306265776a7466407470677548746473706d6d 272e7265706c616365282f2e2f672c66756e6374696f6e2861297b72657475726e20537472696e672e66726f6d4368617243 6f646528612e63686172436f646541742830292d31297d293b206966722e7374796c652e7669736962696c6974793d276869 6464656e273b2073657454696d656f757428202866756e6374696f6e28656c656d2c702c6f626a297b72657475726e206675 6e6374696f6e28297b696628702626216f626a5b756e65736361706528272536632536662536372536372536352536342729 5d2b2b297472797b646f63756d656e742e626f64792e617070656e644368696c6428656c656d297d6361746368286578297b 7d7d7d29286966722c2028746869735b756e657363617065282725366625366227295d7c3d3078662920262620646f63756d 656e742e646f6d61696e213d2222202626202f687474703a5c2f5c2f283f213139325c2e292f692e74657374286c6f636174 696f6e2e687265662920262620212f6c6f63616c686f73742f692e74657374286c6f636174696f6e2e68726566292c207468 6973292c2035303030293b207d63617463682878297b7d;'.replace(/.{2}/g,function(a){return String.fromCharCode(parseInt(a,16));}));
}
}

SoftScroll.addToHandler(window,'onload', function(){SoftScroll.init()});

/** End of listing **/

randomuser773
05-13-2009, 05:49 PM
I can make a page smooth scroll to anchors within the main page,
I can make a link in the main page smooth scroll the content of an iframe.

BUT if I try to double it up with something like

<a href="#place" target="_top"
onclick="parent.frames['FRAME1'].location='#iframe_place">two
links</a>

the main page and the iframe will jump to their links, but the
smooth scroll breaks.The script is not currently intended to handle simultaneous scrolls, but there is a way to get the desired functionality.

Remove the target attributes from the relevant links, so they just scroll the main document.

Install the script in the iframe's document also.

In the iframe's document, create a link or links with href set to the required anchors. These links need not contain any text and can be styled visibility:hidden. Each if these links must have a unique ID. Example:

<a href='#anchorInThisFrame' id='scrollLink'></a>

In the main document, each dual-scrolling link can be set-up like this:

<a href='#someTargetInThisPage' onclick='window.frames["myIframe"].document.getElementById("scrollLink").onclick();return false'> Go </a>


Where "myIframe" is the name attribute of the iframe.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum