Scrollable Content II Help

**iamnotcreative** · 02-12-2005, 10:22 PM

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.

**iamnotcreative** · 02-14-2005, 11:01 PM

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

**cr3ative** · 02-15-2005, 09:19 AM

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

**speedracer** · 02-15-2005, 12:13 PM

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>

**cr3ative** · 02-15-2005, 01:46 PM

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

**mwinter** · 02-15-2005, 03:52 PM

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

**cr3ative** · 02-15-2005, 03:54 PM

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

**mwinter** · 02-15-2005, 03:59 PM

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

**iamnotcreative** · 02-15-2005, 10:51 PM

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.

**Mysc** · 06-27-2005, 10:20 AM

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

Thread: Scrollable Content II Help

Thread Tools

Search Thread

Scrollable Content II Help

Bookmarks

Bookmarks

Posting Permissions