View Full Version : Scrollable Content II Help

02-12-2005, 10:22 PM
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.

02-14-2005, 11:01 PM
Hate to sound impatient, but is there any fix for this?

02-15-2005, 09:19 AM
I think you're talking the same as this thread:

So I will look into it shortly.


02-15-2005, 12:13 PM
well for this script the solution is here:

add this to script:

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

function movetop(){
if (iens6)
else if (ns4)

and use this:

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

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.


<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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


//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">')

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>

<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>


<script language="JavaScript1.2">
if (iens6)

<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>

<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))
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))

function movetop(){
if (iens6)
else if (ns4)

function moveto(loca){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
else if (ns4&&crossobj.top<=0)


function getcontent_height(){
if (iens6)
else if (ns4)

<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>

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.


02-15-2005, 03:52 PM
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.


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.


02-15-2005, 03:59 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.Well, I did have another thought:

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. :rolleyes:


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.

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?


09-15-2005, 12:44 AM
I'm just wondering whether a solution has been found for this. Actually, I came across another scrollable script that uses <div> to separate text into sections so that it would appear you are flipping through pages.


Is there any possible way to achieve this? You must be asking...why don't I just use that other script then. Well, I couldn't figure out how to make 2 scrollable areas within one page with that script. What I hope to do is Scrollable area A would contain the links and Scrollable area B would display the content.

Thank you so much.