View Full Version : Scrollable Content II; Change Scrolling Arrow placements

12-24-2008, 02:53 AM
1) Script Title: Scrollable content II

2) Script URL (on DD):


3) Describe problem: This is the perfect script for how I want my page. However, I've encountered a dilemma when I try to change the placements of the scrolling arrows higher up so that they aren't located on the bottom where you can't see them when the page loads. Ideally I would like to have them up at the top on the outsides of the ilayers in the script, but anywhere else where they can function up near the top would be great as well, as long as they're are visible on the initial page load above the layer box and not at the bottom. This would be a great help, this is for the home page (index page) of my first website, www.butterflyhunters.com. I'm a web design virgin so please bear with me if my script looks a little messy. There's another script app on my page but it has nothing to do with this other script, it hasn't affected either one in anyway that I can see. Any other suggestions or comments would be greatly appreciated as well :)

here's the script as shown on my page.

<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


//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container" style="position:relative;width:800px;height:600px;border:2px ridge #FFFF00;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:800px;height:1200px;left:0;top:0">')

<ilayer name="nscontainer" width=800 height=400>
<layer name="nscontent" left="0" top="1" width=800 height=2000>

::::Content here; which is my blogger blog running through FTP from dreamweaver to be more specific::::::


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

<table width="880"><td><p align="right">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" width="21" height="57" border="0" align="left" /></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 moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
else if (ns4&&crossobj.top<=0)


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

12-24-2008, 05:20 AM
This portion of the code from Step 1:

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

is ordinary HTML with javascript events hard coded to the links. It may be placed anywhere you like in the body of your page, as well as styled in any fashion you like. The table need not even be used in fact, all that is required are the links and images, and they may be put anywhere you want. You may even use your own images, or text instead of the image tags, if you prefer.

12-24-2008, 10:47 PM
I seem to have a tendency to make things more complicated than they really are. My page is starting to come together, thanks.