SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Easy to use vertical scroller?

    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

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member pututik's Avatar
    Join Date
    Mar 2011
    Location
    Jakarta
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <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

    Code JavaScript:
    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. #6
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Philip, I will have a play with this now.

    Thanks


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
  •