Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Scrollable Content II Help

  1. #1
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Scrollable Content II Help

    Hello,
    I am pretty good at HTML, and I was wondering if there was a way to link from one point in the scrollable content II script to another. I know how to do this in a normal HTML document, but it didn't seem to work when I tried. Any help?

    EDIT: Let me try to make myself more clear. I am trying to put at the end of the Scrollable Content II box a "back to top" link. I've gone through the whole <a name="top"><a href="#top"> thing and set the anchors and linked to them and everything, but the links don't work. I guess if nobody can help me I can just use a normal iframe, but I like the look of the scrollable content box more. Anyway, help if you can. Thanks.
    Last edited by iamnotcreative; 02-13-2005 at 04:56 PM.

  2. #2
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hate to sound impatient, but is there any fix for this?

  3. #3
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I think you're talking the same as this thread:
    http://www.dynamicdrive.com/forums/s...ead.php?t=1746

    So I will look into it shortly.

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  4. #4
    Join Date
    Jan 2005
    Location
    Seattle
    Posts
    53
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    well for this script the solution is here:
    http://www.dynamicdrive.com/dynamici...nualscroll.htm

    add this to script:

    function stopscroll(){
    if (window.moveupvar) clearTimeout(moveupvar)
    if (window.movedownvar) clearTimeout(movedownvar)
    }

    function movetop(){
    stopscroll()
    if (iens6)
    crossobj.style.top=0+"px"
    else if (ns4)
    crossobj.top=0
    }


    and use this:

    <a href="javascript:movetop()">Top</a>

  5. #5
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Righty then - I have the solution.

    Here's an example code - you can make hyperlinks to a pixel location in the scrolling area.

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    </head>
    <body>
    <p>&nbsp;</p>
    <script type="text/javascript">
    
    /******************************************
    * Scrollable content script II-  Dynamic Drive (www.dynamicdrive.com)
    * Visit http://www.dynamicdrive.com/ for full source code
    * This notice must stay intact for use
    * Modified by cr3ative and speedracer to allow manual jumping
    ******************************************/
    
    iens6=document.all||document.getElementById
    ns4=document.layers
    
    //specify speed of scroll (greater=faster)
    var speed=5
    
    if (iens6){
    document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
    document.write('<div id="content" style="position:absolute;width:170px;left:0;top:0">')
    }
    </script>
    
    <ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
    <layer name="nscontent" width=175 height=160 visibility=hidden>
    
    <!--INSERT CONTENT HERE-->
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
    combination of HTML, JavaScript, and CSS</font></p>
    <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
    <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
    content on a page to change on the fly, without reloading the page</font></p>
    <p><font size="2" face="Arial">- CSS allows for the separation between content
    definition and formatting</font></p>
    <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
    <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
    Drive</a> provides free, cut and paste DHTML scripts</font></p>
    <!--END CONTENT-->
    
    </layer>
    </ilayer>
    
    <script language="JavaScript1.2">
    if (iens6)
    document.write('</div></div>')
    </script>
    
    <table width="175px"><td><p align="right">
    <a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
    </table>
    
    <script language="JavaScript1.2">
    if (iens6){
    var crossobj=document.getElementById? document.getElementById("content") : document.all.content
    var contentheight=crossobj.offsetHeight
    }
    else if (ns4){
    var crossobj=document.nscontainer.document.nscontent
    var contentheight=crossobj.clip.height
    }
    
    function movedown(){
    if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
    crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
    else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
    crossobj.top-=speed
    movedownvar=setTimeout("movedown()",20)
    }
    
    function movetop(){
    if (iens6)
    crossobj.style.top=0+"px"
    else if (ns4)
    crossobj.top=0
    } 
    
    function moveto(loca){
    movetop()
    if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
    crossobj.style.top=parseInt(crossobj.style.top)-loca+"px"
    else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
    crossobj.top-=loca
    }
    
    function moveup(){
    if (iens6&&parseInt(crossobj.style.top)<=0)
    crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
    else if (ns4&&crossobj.top<=0)
    crossobj.top+=speed
    moveupvar=setTimeout("moveup()",20)
    
    }
    
    function getcontent_height(){
    if (iens6)
    contentheight=crossobj.offsetHeight
    else if (ns4)
    document.nscontainer.document.nscontent.visibility="show"
    }
    window.onload=getcontent_height
    </script>
    <p><br>
    &nbsp;</p>
    
    <p><a href="javascript:movetop();">move to top</a></p>
    <p><a href="javascript:moveto(50)">move to 50 px</a></p>
    <p><a href="javascript:moveto(100)">move to 100px</a></p>
    <p><a href="javascript:moveto(150)">move to 150px</a></p>
    </body>
    </html>
    So with that code, you can customise the hyperlinks to move you higher or lower.
    For example, <a href="javascript:moveto(150)">move to 150px</a> would move you to 150px from the top, and <a href="javascript:moveto(300)">move to 300px</a> would move you lower down the box at 300px.

    Basically, to get the "anchors" right, you will need to play with those numbers until the content jumps to where you want it.

    If you don't understand any of this, please ask and I can guide you through it.

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by cr3ative
    Basically, to get the "anchors" right, you will need to play with those numbers until the content jumps to where you want it.
    That requires gross assumptions about presentation. For it to work as expected, the user has not only have the same font size, but has to have a font with precisely the same metrics which isn't guaranteed across different platforms, even within the same font family. Even the user agent-specific rendering of mark-up elements will effect the position of the content.

    Finally, use of the javascript: pseudo-scheme should be avoided. If you must use it, add those links with document.write calls.

    Mike

  7. #7
    Join Date
    Aug 2004
    Location
    Brighton
    Posts
    1,563
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Completely agree with you there.
    But I can't think of any other way around the problem, and as two people needed an answer I thought it best to try.

    cr3ative
    A retired member, drop me a line through my site if you'd like to find me!
    cr3ative media | read the stickies

  8. #8
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by cr3ative
    Completely agree with you there.
    But I can't think of any other way around the problem, and as two people needed an answer I thought it best to try.
    Well, I did have another thought:

    Code:
    document.onclick = function(e) {e = e || event;
      var t = e.target || e.srcElement,
          c = document.getElementById('content'),
          a = document.anchors,
          d, n;
    
      function isDescendant(d, a) {
        while((d = d.parentNode)) {if(d == a) {return true;}}
        return false;
      }
    
      if(('A' == t.tagName) && ('#' == t.href.charAt(0))) {
        if(!(d = document.getElementById(n = t.href.substring(1)))) {
          for(var i = 0, n = a.length; i < n; ++i) {
            if(a[i].name == n) {d = a[i]; break;}
          }
        }
        if(d && isDescendant(d, c)) {c.style.top = '0';}
      }
    };
    In principle, this will reset the position of the content to its original location before navigation to the anchor. However, it hasn't been tested and such an approach will probably require modifying the original code to check the scrollTop property (or something similar) of the containing div to keep the scrolling mechanism in sync.

    Personally, I prefer the simple solution: don't end up in this situation in the first place.

    Mike

  9. #9
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot. I'll give it a try, although I don't know if I understand completely. I'll probably just stick with an iframe of some sort. Oh well, thanks for the help anyway.

  10. #10
    Join Date
    Jun 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Same problem here. I've got the move to top function working, but I would like to assign a "bottom" anchor to the move down button.

    Any ideas?

    Thanks
    Last edited by Mysc; 06-27-2005 at 10:23 AM.

Bookmarks

Posting Permissions

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