DIV horizontal scroll

I want to find simple script like that one:
http://www.dyn-web.com/code/scroll/horiz.php

second example - glide on click.

may be any one has an example with scrolling div on click event?

thank you!

 

Why don't you just use the script from the website that you have shown?

 

because it's too expensive for me to buy this script for each of my websites for $40 each site and as i am respection other side's author rights i will not use script illegally.

 

I can create a script like this in Javascript. I've done something similar to it as well. Let me know if you want me to program a script like this that can be very similar.

 

Sorry, I didn't even realise it was a paid script. I'll see if I can do it, I have done something similar before...

 

Already did it myself. it's very easy actually. there are js functions ScrollLeft ScrollRight that can scroll DIV.

 

great.... care to post the result?

 

i'm not greedy

<script type="text/javascript">
var Timer;

function ScrollLeft()
{
Timer = setInterval("document.getElementById('scrolladblock').scrollLeft -= 15", 1);
}
function ScrollRight()
{
Timer = setInterval("document.getElementById('scrolladblock').scrollLeft += 15", 1);
}
</script>


<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign=middle align=left width=20><input type="button" value="<" title="Scroll left"
onmousedown="ScrollLeft()"
onmouseup="clearInterval(Timer)">
</td>
<td>

<nobr>


<div id="scrolladblock"  style="margin: 0pt auto; overflow: hidden; width: 704px;">
   block block block - here i used table
</div>
</nobr>
</td>
<td valign=middle align=right width=20><input type="button" value=">" title="Scroll right" onmousedown="ScrollRight()"
onmouseup="clearInterval(Timer)"></td>
</table>

Code (markup):

 

you can use element.scrollTo(x, y). scrollLeft is not a function as far as i know. it's a css property that gets changed by scrollTo()

http://fragged.org/dev/scroller.php -> a mootools class i wrote that does scroll images, can go back/forward, work on left/right buttons, work as a carousel etc.

what you posted will work but its ineffective. you really don't want to access the css property directly, its slows it down as it reads it first then increments/decrements and sets it. the property itself would return in px(probably) so it also is ineffective in that it needs to convert to an integer. another thing - take the quotes out of the setInterval and use an anonymous function instead, this way you avoid the js interpreter launching a new instance to evaluate the code all the time.

eg.

Timer = setInterval((function() {
    document.getElementById('scrolladblock').scrollLeft -= 15;
}), 1);

PHP:

also, as you don't keep track of your available scroll space, it will continue trying to evaluate code and run when it reaches end-of-line.

 

another thing.. I may be wrong but when assigning values to scrollLeft etc., for it to work in firefox don't you have to add + "px"; to the end of each value... I can't remember exacvtly what propert it is... it may only be for style.width ....

 

I found the one that i did a while ago to scroll thumbnails of youTube vids... It's ugly but I'll post it anyway:
JS:

      var fl = false;
      
function scrollDiv(whichWay) {
    var r = document.getElementById("recent");
    var tbl1 = document.getElementById("tb1");
    if(whichWay=="left" && fl)
    {
        if (parseInt(r.style.left) < 0)
        {
            r.style.left = (parseInt(r.style.left) + 5) + "px";
            setTimeout("scrollDiv('left')", 30);
        }
        else
            r.style.left = "0px";
    }
    else if (whichWay=="right" && fl) 
    {
        if (parseInt(r.style.left) > (parseInt(r.offsetWidth) - parseInt(tbl1.style.width)) - 80) 
        {
            r.style.left = (parseInt(r.style.left) - 5) + "px";
            setTimeout("scrollDiv('right')", 30);
        }
        else
            r.style.left = (parseInt(r.offsetWidth) - parseInt(tbl1.style.width)) - 80 + "px";
    }
}

Code (markup):

HTML

 <table class="style3">
                                <tr>
                                    <td class="leftbutton" onmouseover="fl=true; scrollDiv('left');" onmouseout="fl=false;">
                                        &nbsp;</td>
                                    <td>
                                    <div style="overflow:hidden; width: 100%; height: 98px; position:relative; border: none;" id="divCont">
                                     <div id="recent" style="overflow: visible; width: 100%; position: absolute; top: 1px; left: 0px; height: 100px;">
                                     <table style="width: 1200px; border:none;" id="tb1">
                                     <tr>
                                     <asp:Label ID="lblVids" runat="server"></asp:Label>
                                     </tr>
                                     </table>

                                    </div>
                                    </div>
                                    </td>
                                    <td class="rightbutton" onmouseover="fl=true; scrollDiv('right');" onmouseout="fl = false;">
                                        &nbsp;</td>
                                </tr>
                            </table>

Code (markup):