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 scroll

    <posted here too in case it falls under frameworks question>

    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
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    <posted here too in case it falls under frameworks question>
    Please follow http://www.codingforums.com/postguide.htm
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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