CODEWITHSUNDEEP
javascriptjquery
Riviner
Riviner

Reputation: 17

Getting simple Javascript / jQuery to work (ScrollTo by Ariel Flesler)

UPDATE: Outstanding mr. tpaksu solved my problems and you can see the horizontal ScrollTo in action @ 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.

Upvotes: 0

Views: 699

Answers (1)

Taha Paksu
Taha Paksu

Reputation: 15616

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.

Upvotes: 2

Related Questions