PDA

View Full Version : JS and Flexroll conflict


henryhayes
10-10-2011, 12:06 PM
Id like to control scrolling of two divs with one scrollbar as in this example here

http://www.byenshjemmesider.dk/

At the same time i want to customize the scrollbar. Ive been using Flexcroll which work fine on a single div. But as soon as i insert flexcroll.js to head of document in the example, the sync of the two divs breaks and only the div with Flexcroll attached scrolls.

Anyone know how to solve this? You can find the code im using in the example or i can post.

I dont have to use Flexcroll, so if you know of any other application that can customize scrollbar and control scroll on two divs at the same time, id appreciate a link.

gentleone
10-10-2011, 02:16 PM
have you tried to load first flexscroll.js in the head, so before that scrollDiv javascript function?

otherwise you could try jScrollpane which use jQuery
http://jscrollpane.kelvinluck.com/

henryhayes
10-10-2011, 02:54 PM
Gentleone, please specify in which order to load, which one goes first?

henryhayes
10-10-2011, 03:19 PM
Anyway, got your point and tested by placing scripts any possible order. The scripts are still conflicting for some reason..

henryhayes
10-10-2011, 05:01 PM
Tried jScrollPane instead of Flexcroll. Same issue, the sync between divs breaks..
Any suggestions?

edbr
10-11-2011, 02:24 AM
looked at your page and first div shows
<div id="div1"
style="overflow: hidden; height:200px; width:500px; border:solid 4px #990000; position: relative; float:left; margin:30px;">

and the second
<div id="div2" class="flexcroll" onscroll="scrollDiv(this,'div1');"
style="overflow: auto; height:200px; width:500px; position: relative; float:left; border:solid 4px #009900; margin:30px;">
so im not sure what im looking for

henryhayes
10-12-2011, 01:47 PM
Thx for responses. Made both divs scroll with one customized scrollbar by using jscrollpane and this code in head:


<script type="text/javascript">
$(function()
{
$("#div2").bind('jsp-scroll-y', function(event, scrollPositionY) {
$("#div1").scrollTop(scrollPositionY);
}).jScrollPane();
$("#document").jScrollPane();
});
</script>