CODEWITHSUNDEEP
jqueryjscrollpane
Shawn Northrop
Shawn Northrop

Reputation: 6016

jScrollPane scrolls to top with click

I am having a little trouble with jScrollPane. I created a list of links inside a vertical pane. These links trigger a jquery load into another div. When I scroll down the list of links and click one, it scrolls the pane back to the top and does not trigger the load. If the scroll is already at the top, the load works fine.

--html--
    <div id="projects" class="span-9" style="margin:0 !important">
        {% for project in projects %}
            <a href="project/{{ project.id }}/details">
                <div class="left clear" style="width:335px; margin:0 !important; {% if loop.first %} border-top:1px solid #AAA;{% endif %} border-bottom:1px solid #AAA;">
                    <img src="{{asset(project.thumbnail)}}" class="left" style="width:150px; height:100px; margin:5px 5px 5px 0;">
                    <span style="font-weight:bold">{{ project.title }}</span><br>
                    {{ project.short }}
                </div>
            </a>
        {% endfor %}
    </div>

    <div id="details"></div>

--js--  
    $(function(){   
        $('#projects').jScrollPane();

        $("#projects a").live("click", function(){
            $("#details").load(this.href);
            return false;
        });
    });

--cs--
        #projects{ height: 667px; overflow:auto ;}

Any one know why this may be happening?

Upvotes: 0

Views: 1037

Answers (2)

R&#232;LF
R&#232;LF

Reputation: 1

Maybe late, but when your stuck to hrefs, a good fix is posted here: https://groups.google.com/forum/?fromgroups=#!topic/jscrollpane/Ww1jwPVfAKE

Upvotes: 0

Martijn Smidt
Martijn Smidt

Reputation: 1624

I had the same issue as you have. What I did is remove the <a> tag around the divs and put an onclick on the divs to redirect. This solved the problem for me; hope it does the same for you!

Upvotes: 2

Related Questions