Home/ Questions/Q 7948129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:38:01+00:00

UPDATE: Outstanding mr. tpaksu solved my problems and you can see the horizontal ScrollTo

  • 0

UPDATE: Outstanding mr. tpaksu solved my problems and you can see the horizontal ScrollTo in action @ http://www.visioville.fi/en/

I had my time fiddling around with CSS, but i came to conclusion that this is pretty much the only thing i cannot get done without Javascript / jQuery.

I’ve been trying to implement Goro’s suggested jQuery.ScrollTo by Ariel Flesler, but i can’t seem to get it working in any way. Add to the fact that i’m a total newbie with Javascript and you’ll get my point. I downloaded the newest jQuery and named it as ‘jquery.js’

Here’s some source:

<head>
<script type='text/javascript' src='../js/jquery.scrollTo-1.4.2-min.js'></script>
<script type='text/javascript' src='../js/jquery.js'></script>
</head>
...
<div>
    <p id="gallerytext">...</p>
    <a title="$(div.smallpics).scrollTo( '0%', 800, {axis:'x'} );" id="previmg" href="#image1"></a>
        <div id="smallwindow">
            <div class="smallpics">
                <ul>
                <li><a href="#image1"><img alt="Jerseys" src="../images/peliasuja.jpg" /></a></li>
                ...
                <li><a href="#image14"><img alt="Drawing" src="../images/kynailya.jpg" /></a></li>
               </ul>
           </div>
        </div>
    <a title="$(div.smallpics).scrollTo( '50%', 800, {axis:'x'} );" id="nextimg" href="#image8"></a>
</div>

And then CSS:

#smallwindow    { float:left; overflow/*-y*/: hidden; width:890px; } /* overflow-y whips out the vertical scrollbar */

div.smallpics   { float:left; position:relative;  width:1595px; }

#previmg, #nextimg { float: left; width: 17px; height: 54px; background: white; overflow: hidden; background: url("images/galleryarrows_17x54.jpg"); }
#previmg        { background-position: left top; margin-right: 1px; left top; }
#nextimg        { background-position: right top; position: absolute; float: right; left: 935px; margin-left: 1px; margin-right: 1px; }
#previmg:hover  { background-position: left bottom; }
#nextimg:hover  { background-position: right bottom; }

.smallpics ul   { list-style: none; padding: 0; margin: 0; }

.smallpics li   { float: left; text-align: center;  margin-right: 1px; margin-bottom: 1px; white-space: nowrap; }

Goro mentioned binding click() event to my arrow buttons, but i don’t know what “function” i should type or where to put the code. I’m guessing in front of the .scrollTo event, assuming click() is even needed.

Thank you in advance! You guys are absolutely the best when it comes to programming and coding.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    first, you need to include your scrollto script AFTER the jquery script.

    <script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.scrollTo-1.4.2-min.js"></script>

    and then, you need something like this:

    $("#nextimg").on("click",function(){
    $("#smallwindow").scrollTo( '50%', 800, {axis:'x'} ); 
});

    The function inside the click event should change. But once you get this to work, the rest will be easy to figure out.

    • 0