logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-10-2011, 11:06 AM   #1
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default JS and Flexroll conflict

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.
henryhayes is offline   Reply With Quote
Old 10-10-2011, 01:16 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-10-2011, 01:54 PM   #3
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

Gentleone, please specify in which order to load, which one goes first?
henryhayes is offline   Reply With Quote
Old 10-10-2011, 02:19 PM   #4
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

Anyway, got your point and tested by placing scripts any possible order. The scripts are still conflicting for some reason..
henryhayes is offline   Reply With Quote
Old 10-10-2011, 04:01 PM   #5
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

Tried jScrollPane instead of Flexcroll. Same issue, the sync between divs breaks..
Any suggestions?
henryhayes is offline   Reply With Quote
Old 10-11-2011, 01:24 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

looked at your page and first div shows
Code:
<div id="div1" 
		style="overflow: hidden; height:200px; width:500px; border:solid 4px #990000; position: relative; float:left; margin:30px;">
and the second
Code:
<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
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 10-12-2011, 12:47 PM   #7
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

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>

Last edited by henryhayes; 10-12-2011 at 12:59 PM..
henryhayes is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:35 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com