[JS]Horizontaal scrollable div probleem, is het mogelijk?

[ReseTTim]

Wat wil ik?
* 3 div's die horizontaal het beeld compleet vullen
* inhoud van die divs zijn meer dan weer te geven op venster.
bijv.: scherm = 1000pixels, inhoud div = 3000px
* 2 knoppen die scrollbalk van de div beinvloeden.

Wat krijg je dus?
* 6 div's die de sturing van 3 div's beinvloeden
* 3 div's voor links en 3 voor het naar rechts scrollen

Mijn resultaat
* eerste div scrollt (bovenste 2 cellen)
* 2de div niet! (onderste 2 cellen)


voorb: http://foto.resettim.nl/dev2/layout.htm

ik heb de code om de eerste te scrollen herschreven voor de 2de. mijn vraag is nu is het wel mogelijk dat ik 2 of meerdere div's dmv overflow kan aansturen via andere div's of kan ik maar 1 div aansturen? tot heden toe heb ik her en der alert's toegevoegd maar nog geen resultaat geboekt helaas

weet iemand of het mogelijk is om meerdere div's aan te sturen?

[NMe]

Ik heb geen idee wat je nou doet en wat je probeert te doen. Heb je ergens een simpele testcase als voorbeeldje?

[ReseTTim]

NMe schreef op dinsdag 16 juni 2009 @ 02:25:
Ik heb geen idee wat je nou doet en wat je probeert te doen. Heb je ergens een simpele testcase als voorbeeldje?

voorbeeld: http://foto.resettim.nl/dev2/layout.htm

[Mad Marty]

Hier in Fx 3.0.11 scrollt zowel 'aa' als 'bb' gewoon

[edit]
Ow, wacht, je wilt dat we scrollen met de paarse balken aan de zijkant

[ Voor 45% gewijzigd door Mad Marty op 16-06-2009 07:44 ]

[moozzuzz]

Misschien moet je es kijken hoe die fancy foto-gallery-scripts werken (type lightbox ed). Daar kan je in elk geval navigeren door op de linker of de rechterkant vd foto te klikken.

[Bosmonster]

Met een gewone scrollbar is dit bijna ondoenlijk is mijn ervaring (hier zijn overigens ook al meerdere topics over geweest).

Met dhtml is het wel eenvoudig te doen natuurlijk

[ReseTTim]

moozzuzz schreef op dinsdag 16 juni 2009 @ 09:14:
Misschien moet je es kijken hoe die fancy foto-gallery-scripts werken (type lightbox ed). Daar kan je in elk geval navigeren door op de linker of de rechterkant vd foto te klikken.

ja, dat is met jquery, dat werkt weer anders

[ReseTTim]

http://foto.resettim.nl/dev2/temp/test/index.html

ik heb het werkend gekregen door gebruik te maken van frames.. mijn vraag is hoe lelijk vinden jullie deze oplossing door gebruik te maken van frames? in mijn geval zou ik dus 3 frames nodig moeten hebben..

[Verwijderd]

Brrr. Bijzonder lelijk, zou ik durven zeggen. Nergens voor nodig ook.

Een divje met overflow: auto en een vast breedte doet 't net zo goed. Daar stop je weer een ander divje met content in, en daar zet je een margin-left op die je regelt met een knopje. Of je gebruikt er een slider-achtige control (zoiets als hier : http://demos.mootools.net/Slider),

[Bosmonster]

overflow auto in de breedte werkt niet goed, aangezien elementen nooit de breedte zullen forceren

Ik zou gewoon een willekeurige dhtml slider control van internet plukken eerlijk gezegd ipv gaan zitten kutten met frames

[Verwijderd]

Bosmonster schreef op dinsdag 16 juni 2009 @ 20:24:
overflow auto in de breedte werkt niet goed, aangezien elementen nooit de breedte zullen forceren

Als je een div als 'venster' gebruikt, met daarin een andere div (waar de content dan weer in zit) en je geeft beide divs een vaste breedte, dan ben je er toch?

Ik zou gewoon een willekeurige dhtml slider control van internet plukken eerlijk gezegd ipv gaan zitten kutten met frames

True

[Bosmonster]

Verwijderd schreef op dinsdag 16 juni 2009 @ 20:38:
[...]

Als je een div als 'venster' gebruikt, met daarin een andere div (waar de content dan weer in zit) en je geeft beide divs een vaste breedte, dan ben je er toch?

Ik ging er even vanuit dat de content dynamisch is, wat vaak wel het geval is bij dit soort controls. Je wilt dat ie netjes meeschaalt afhankelijk van de hoeveelheid content die je erinplaatst zonder de breedte te moeten hardcoden.

Maar inderdaad als het een statisch ding wordt kun je dat op zich best doen.

[ Voor 7% gewijzigd door Bosmonster op 16-06-2009 20:43 ]

[harrald]

Alle elementen die je in de te scrollen div stopt de breedte van tellen, en bij elkaar optellen. Deze breedte meegeven aan een container die die je in de te scrollen div stop, en in die container stop je weer de elementen waar je de breedte van heb opgeteld.

hoop dat ik te volgen ben

nu hoef je alleen de container te verplaatsen.

[ReseTTim]

http://foto.resettim.nl/dev2/multiscroll.htm#

woohoo tis gelukt
nu de rest nog

[moozzuzz]

ReseTTim schreef op donderdag 18 juni 2009 @ 17:26:
woohoo tis gelukt

de eerste wel, de 2de en derde geven een js-error hier in IE6.

[Spinal]

Hm... als ik in Opera 10 met de muis over het paarse deel links/rechts van de 2e of 3e balk beweeg (pff, volg je het nog?) verspringt dat hele gedeelte. Het scrollen moet daarna nog wel op de zelfde plaats
In FF 3.0.11 heeft ie dat probleem niet, in IE8 werkt de hele pagina niet (JS-foutmelding).

Succes ermee

[Bosmonster]

De library die je gebruikt is bijna 3 jaar oud, toen bestond Opera 10 of IE8 nog niet.

Ik zou je toch (nog een keer) aanraden een library als jQuery te pakken.

[Rwin]

Beetje laat, maar deze zou je ook eens kunnen ontleden:
http://maaki.com/thomas/SmoothDivScroll/

[Ras]

moozzuzz schreef op donderdag 18 juni 2009 @ 17:49:
[...]

...hier in IE6.

[ReseTTim]

ok, het is mij gelukt in jquery.. helaas tot op zekere hoogte..

dit is het resultaat wat ik wil hebben en werkt niet
werkt wel, maar dan mis ik de pijlen die er overheen zijn gelegd

JavaScript:

window.addEvent('domready', function(){
var scroll1 = new Scroller('clip1', {area: 100, velocity: 1});

// clip1
$('clip1').addEvent('mouseover', scroll1.start.bind(scroll1));
$('clip1').addEvent('mouseout', scroll1.stop.bind(scroll1));

// clip2
var scroll2 = new Scroller('clip2', {area: 100, velocity: 1});

$('clip2').addEvent('mouseover', scroll2.start.bind(scroll2));
$('clip2').addEvent('mouseout', scroll2.stop.bind(scroll2));

// clip3
var scroll3 = new Scroller('clip3', {area: 100, velocity: 1});

$('clip3').addEvent('mouseover', scroll3.start.bind(scroll3));
$('clip3').addEvent('mouseout', scroll3.stop.bind(scroll3));
}); 

ik vind dit nu erg prettig werken, maar ik ben bang dus dat ik gebruik moet maken van Rwin zijn link.