Easy to use vertical scroller?

JavaScript
1

Hi, I know nothing of js yet, I’m still studying CSS & PHP. So I’m just looking for a ready made script for vertical scrolling.

I found one that does exactly that, but all the css styling is done in the javascipt, so I was completely lost. I want to be able to just enter the html (into the js array if neccessary, I can do that much lol) and have it scroll upwards, simple as that.

The nearest thing I could find to what I want is this Creating a vertical content scroller using DHTML I can style my div & images myself, then all I need to do is enter the html and away it goes, but it functions just like the marquee tag in that it waits for the entire content to clear before it starts scrolling again.

Anyone know of a script that I can use?

Thanks in advance :slight_smile:

2

Couple of questions.

The first hyperlink takes you to a page but which part of that page (there are a lot of examples on it) are you referring to?

Secondly you say

“it waits for the entire content to clear before it starts scrolling again.”

What effect were you after?

3

depend on your image and your client internet connection speed, because if you wait the image shown then scrolling it could waste your client time

4

Hmm, he’s using a url rewrite, all pages have the same url. Its ‘Vertical 5’ on the image scripts page (except I want it to scroll upwards). I’m looking for something that continuously scrolls, doesn’t wait for the last item to clear the element before starting the next iteration.
They are only small 200px images, so it will load fast enough.

That second script does exactly what in that I can just paste the js and know it will work, then add in the html where I want and it will scroll and stop on mouseover, but it waits for the last image to completely clear the div before the first image enters the bottom of the div. Its not a big problem, it would just be nice if I could find something that continuously scrolls with no gaps.

Thanks for the replies :slight_smile:

5

In terms of the functionality you require the code at Huntingground sounds as if it is closest to your needs.

It can scroll up rather than down by changing the value of the variable “dir”. zero is up, one is down.

It does load the images from an array but they could be inserted in the html if you so wish although a modification to the javascript would be required.

The html has a div for the viewport and two divs to hold the images.

<DIV id="scroll_box" style="position:relative;height:350px;overflow:hidden;background-color:#ddddee;border:4px solid #bbbbcc" onmouseover="pause()" onmouseout="reStartHV5()">
<div id="scroller1" style="position:absolute;left:0px;top:0px;text-align:center"></div>
<div id="scroller2" style="position:absolute;left:0px;top:0px;text-align:center"></div>
</DIV>

The two divs (id=scroller1 and id=scroller2) are essentially the same they both contain all the images.

The javascript scrolls both scroller1 and scroller2. So when scroller1 is disappearing scroller2 is appearing. When scroller1 disappears entirely it is repositioned to where scroller2 has got to.

The code relating to the array is

for(var j=0;j<vs5Arr.length;j++){

    scroll1.innerHTML+='<img id="pic'+j+'" src="'+preload[j].src+'" alt="'+vs5Arr[j][2]+'" title="'+vs5Arr[j][2]+'" onclick="initFade('+j+')"><br>'

    if(imageSize!=0){ // use percentage size
        newWidth=preload[j].width/100*imageSize
        newHeight=preload[j].height/100*imageSize
    }
    else{ // use fixed size
        newWidth=fixedWidth
        newHeight=fixedHeight
   }

   document.getElementById("pic"+j).style.width=newWidth+"px"
   document.getElementById("pic"+j).style.height=newHeight+"px"

   if(document.getElementById("pic"+j).offsetWidth>biggest){
        biggest=document.getElementById("pic"+j).offsetWidth
   }

}

if(scrollBox.currentStyle&&!window.opera&&document.compatMode!="CSS1Compat"){
    ieBorder=parseInt(scrollBox.currentStyle.borderWidth)*2
}


scrollBox.style.width=biggest+ieBorder+"px"

scroll2=document.getElementById("scroller2")
scroll2.innerHTML=scroll1.innerHTML
scroll2.style.top=scroll1.offsetHeight+"px"

Most of that is down to resizing the image which might not be necessary in you case.

6

Thanks a lot Philip, I will have a play with this now.

Thanks :slight_smile: