Question

I have jScrollpane in a 100% width div, auto heigt, dynamic content loading with auto-reïnitialise. Works fine, but not in IE7.

The scrollbar shows, height seems to be calculated fine, but when I click the arrows or try to draw the bar to scroll, nothing happens.

Is there anyone familiar with this? What am I doing wrong? Any help is greatly appreciated!

This is the site URL:
http://www.sporeninhetland.nl

The scrollbar is implemented on subpages, for example this one:
http://www.sporeninhetland.nl/over-de-hertogskuil-te-baarn/

This is my markup:

<div class="entry scroll-pane">
<?php the_content(); ?>
</div><!– sluit entry –>

I have this in the header:

<script type="text/javascript" id="sourcecode">
    $j=jQuery.noConflict();
    $j(function()
    {
        $j('.scroll-pane').jScrollPane({
        showArrows: true,
        autoReinitialise: true});
    });
</script>

This is my CSS:

/* Styles specific to this particular page */
.scroll-pane
{
    width: 100%;
    height: auto;
    overflow: auto;
}


/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer {
    overflow: hidden;
    position: relative;
}
.jspPane {
    position: absolute;
}
.jspVerticalBar {
    background: none repeat scroll 0 0 none;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
}
.jspHorizontalBar {
    background: none repeat scroll 0 0 none;
    bottom: 0;
    height: 16px;
    left: 0;
    position: absolute;
    width: 100%;
}
.jspVerticalBar *, .jspHorizontalBar * {
    margin: 0;
    padding: 0;
}
.jspCap {
    display: none;
}
.jspHorizontalBar .jspCap {
    float: left;
}
.jspTrack {
    background: url(scroll-images/groen-streepje.png) 0 0 repeat-y scroll;
    position: relative;
}
.jspDrag {
    background: none repeat scroll 0 0 #ACC314;
    cursor: pointer;
    left: 0;
    position: relative;
    top: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}
.jspArrow {
background: url(scroll-images/pijltjes.png) 0 0 no-repeat scroll;
    cursor: pointer;
    display: block;
    text-indent: -20000px;
}
.jspArrow.jspDisabled {
background: url(scroll-images/pijltjes.png) 0 -9px no-repeat scroll; /* ander kleur pijltje */
    cursor: default;
}
.jspVerticalBar .jspArrow {
    height: 9px;
}
.jspHorizontalBar .jspArrow {
    float: left;
    height: 100%;
    width: 16px;
}
.jspVerticalBar .jspArrow:focus {
    outline: medium none;
}
.jspCorner {
    background: none repeat scroll 0 0 #EEEEF4;
    float: left;
    height: 100%;
}
* html .jspCorner {
    margin: 0 -3px 0 0;
}

.jspArrowUp
{
background-position: 0 0;
}

.jspArrowDown
{
background-position: -15px 0 !important; /* twee pijlen in één png zetten */
}
.jspArrowDown.jspDisabled {
background-position: -15px -9px !important; /* twee pijlen in één png zetten */
}
.scroll-pane
{
    width: 100%;
overflow: auto;
z-index: 99;
}

Answer 1

Its because your MAP image is overlapping, and therefore you cant reach the scrollevent. Dont have a higher z-index on top of a link 🙂

You could just remove some of the empty spacing on the image, since its transparent ontop of the scrollpanel anyway.

(Tested it by changing the z-index / and increasing the minus value of the MAP image to right:-100px;)