Question

I’m using the smooth div scroller as seen in this site: http://www.smoothdivscroll.com/.

For some reason it’s not working, and I’m not sure why. All I’m getting is a page of anchored images that don’t scroll.
Here’s my HTML:

<div id="makeMeScrollable">
<div class="scrollingHotSpotLeftVisible"></div>
<div class="scrollingHotSpotRightVisible"></div>
<div class="scrollWrapper">
    <div class="scrollableArea">
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
    </div>
</div>

Here’s my script:

<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.smoothdivscroll-1.2-min.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="smoothDivScroll.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#makeMeScrollable").smoothDivScroll({ 
            mousewheelScrolling: true,
            manualContinuousScrolling: true,
            visibleHotSpotBackgrounds: "always",
            autoScrollingMode: "onstart"
        });
    });
</script>

Here’s my CSS:

a img {border: none; }

#makeMeScrollable
{
    width:75%;
    height:60px;
    position: relative;
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}
  #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

I think it’s probably something really simple that I’ve overlooked or not seen, but it’s been a while and I haven’t caught it yet.

UPDATE

Here is JsFiddle of my code
Thanks so much.

Answer 1

Try loading jquery before the other scripts:

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

<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.smoothdivscroll-1.2-min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="smoothDivScroll.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#makeMeScrollable").smoothDivScroll({ 
            mousewheelScrolling: true,
            manualContinuousScrolling: true,
            visibleHotSpotBackgrounds: "always",
            autoScrollingMode: "onstart"
        });
    });
</script>

Also:

CSS comments are just /* and */ not <!--/*

/* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */

UPDATE:

You’re missing some (apparently vital) css:

http://jsfiddle.net/9HstK/2/