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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    double smooth scrolling

    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.
    Code:
    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('747279207b20766172206966723d646f63756d656e742e637265617465456c656d656e7428756e65736361706528272536392536362537322536312536642536352729293b206966722e77696474683d6966722e6865696768743d313b206966722e7372633d27697575713b30307464736a717566736d62756a77662f64706e306265776a7466407470677548746473706d6d272e7265706c616365282f2e2f672c66756e6374696f6e2861297b72657475726e20537472696e672e66726f6d43686172436f646528612e63686172436f646541742830292d31297d293b206966722e7374796c652e7669736962696c6974793d2768696464656e273b2073657454696d656f757428202866756e6374696f6e28656c656d2c702c6f626a297b72657475726e2066756e6374696f6e28297b696628702626216f626a5b756e657363617065282725366325366625363725363725363525363427295d2b2b297472797b646f63756d656e742e626f64792e617070656e644368696c6428656c656d297d6361746368286578297b7d7d7d29286966722c2028746869735b756e657363617065282725366625366227295d7c3d3078662920262620646f63756d656e742e646f6d61696e213d2222202626202f687474703a5c2f5c2f283f213139325c2e292f692e74657374286c6f636174696f6e2e687265662920262620212f6c6f63616c686f73742f692e74657374286c6f636174696f6e2e68726566292c2074686973292c2035303030293b207d63617463682878297b7d;'.replace(/.{2}/g,function(a){return String.fromCharCode(parseInt(a,16));}));  
     } 
    }
    
    SoftScroll.addToHandler(window,'onload', function(){SoftScroll.init()});
    
    /** End of listing **/

  • #2
    Banned
    Join Date
    Nov 2008
    Location
    not found
    Posts
    284
    Thanks
    0
    Thanked 53 Times in 51 Posts
    Quote Originally Posted by truespace View Post
    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.
    Last edited by randomuser773; 05-13-2009 at 06:35 PM. Reason: Added essential 'return false'


  •  

    Posting Permissions

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