Problem med jScrollPane kombinert med annet script

[Kenneth Dammyr]

Hei

 

Aktuell side

 

Jeg har en side her. Den bruker et lite javascript for å vise/skjule elementer til høyre på siden. Det i seg selv fungerer fint. Men så har jeg kombinert det med javascript-scrollbaren jSrollPane som er basert på jQuery, og da ville den ikke samarbeide så bra.

 

Brukte lang tid på å forstå hvorfor dette ikke fungerte sammen, men så skjønte jeg det plutselig. Her kommer en forklaring:

Scriptet som skjuler og viser elementer gjør dette ved å endre CSS-en (display:block /none;). Men jScrollPane ser ikke forskjell på disse to og merker dermed aldri at innholdet i boksen overskrider dimensjonene. På den måten reagerer ikke scriptet og jeg får ingen scrollbar når jeg vil ha det.

 

Jeg har lagt inn litt tomt fyll i boksen slik at man skal se scrollbaren.

 

Så spørsmålet er enkelt:

Hvordan får jeg dette til å fungere?

Endret 28. juli 2007 av kennethdammyr

[eiden84]

Ser ut som jscrollpane lagrer høyden på div'en (den med innhold) ved initialisering. Hvis du endrer i innholdet på div'en (og dermed høyden), oppdateres dette ikke jscrollpane.

 

Hvis du initialiserer på nytt hver gang du endrer på innholdet, vil scrollingen bli riktig.

 

$('.scroll-pane').jScrollPane();

 

Det er sikkert andre måter (kanskje bedre) å løse dette på.

[Kenneth Dammyr]

Hvor skal dette inn?

[eiden84]

Forsøk å legg det inn i funksjonen toggle(id).

 

I ditt tilfelle blir det da $('.scroll').jScrollPane({scrollbarWidth: 5, showArrows:true});.

 

Eksempel:

function toggle(id) {
 ul = "ul_" + id;
 img = "img_" + id;
 ulElement = document.getElementById(ul);
 imgElement = document.getElementById(img);
 if (ulElement) {
 	if (ulElement.className == 'closed') {
   ulElement.className = "open";
   }else {
   ulElement.className = "closed";
 	}
 	
 	$('.scroll').jScrollPane({scrollbarWidth: 5, showArrows:true});
 }
}

Endret 28. juli 2007 av eiden84

[Kenneth Dammyr]

Fantastisk!

Hvor skal jeg sende lønna?

 

EDIT: Mens vi holder på... Er det mulig å på en enkel måte bytte ut "+" med "-" når et element ekspanderes? Kanskje på en eller annen måte bruke det som allerede finnes av kode og bare utvide den litt. Da sparer man litt koding. Eller ikke...

Endret 28. juli 2007 av kennethdammyr

[eiden84]

Det er ikke så mye stress å bytte på + og -.

 

Forsøk denne:

function toggle(id) {

var ulElement = document.getElementById("ul_" + id);
var imgElement = $('li#' + id).find('img')[0];

if (ulElement) {
 if (ulElement.className == 'closed') {
 	ulElement.className = "open";
 	imgElement.src = imgElement.src.replace("pluss.gif", "minus.gif");
 }else {
 	ulElement.className = "closed";
 	imgElement.src = imgElement.src.replace("minus.gif", "pluss.gif");
 }
 
 $('div#right .scroll').jScrollPane({scrollbarWidth: 5, showArrows:true});
}
}

 

Endret litt på koden for scollbaren. Nå reinitialiseres kun den ene scrollbaren.

[Kenneth Dammyr]

Pent

Men nå har selvfølgelig høyre scrollbar begynt å ikke virke i Opera. Noen ide hvorfor?

 

Tusen takk for hjelpen så langt!

[eiden84]

Bare hyggelig

 

Har en mistanke.

 

Forsøk å bytt ut (i toggle):

$("div#right .scroll").jScrollPane({scrollbarWidth : 5, showArrows : true});

 

Med:

$('.scroll').jScrollPane({scrollbarWidth: 5, showArrows:true});

[Kenneth Dammyr]

Dette skjedde før du kom med den tvisten der, så det kan ikke være feilen. Jeg prøvde å gjøre slik at boksen til høyre ble høyere, men da jeg gjorde det ble det kaos, så jeg skiftet tilbake. Og i det alt var som det skulle igjen ville ikke Opera fungere.

[eiden84]

Fant problemet.

 

Ser ut som det er en bug i mousewheel.js når jscrollpane blir reinitialisert i Opera:

 

Unhandled exception: [Object InternalException]
code: 6
message: WRONG_ARGUMENTS_ERR
Backtrace:
 Line 94 of linked script http://www.underdogstudio.org/etv/v3/mousewheel.js
   this.removeEventListener("mousewheel", this._mwHandler, false);

 

Mulig løsningsforslag:

 

Fjern <script type="text/javascript" src="mousewheel.js"></script> på linje 13.

Legg så til:

 

 if(!window.opera){
 	document.write('<scr' + 'ipt type="text/javascript" src="mousewheel.js"></scr' + 'ipt>');
 }

 

Hvis du bruker Opera, så lastes ikke mousewheel.js inn.

Endret 30. juli 2007 av eiden84

[Kenneth Dammyr]

Fantastisk!

Your'e a living genius