[Flash/Javascript] Horizontale mouse-scroll

[BlueAce]

Normaal gesproken ben ik niet zo moeilijk over horizontaal scrollen: simpelweg een scrollby() gebruiken in combinatie met "onmouseover". Nu is er alleen iemand die het volgende van me verlangt:

http://www.datagold.nl/index.htm

Een horizontale scroll dus, bestuurd door het bewegen van je muis naar links of naar rechts.

Zoals ik kan zien is dit dus mogelijk met Flash, maar ik ben daar verre van bekend in. Mijn vraag luid dus:

Is dit mogelijk in Javascript?

OF!

Bestaat er ergens een voorbeeldscript van wat ik bedoel?

Thx alvast.

[CrashOne]

Ja en ja.

Ik denk dat je even moet zoeken.

[Verwijderd]

Het beste kun je dan waarschijnlijk als gevolg van een mouseover de positie van de muis ten opzichte van dat element (bijvoorbeeld een div) opvragen, en vervolgens checken of dat meer of minder dan de helft van de breedte van het parent element is. Oftewel, of de muis links, rechts of in het midden staat. Vervolgens kun je de inhoud van de div verschuiven. Komt natuurlijk wel wat bij kijken, maar zo moeilijk is het allemaal niet. Het is iig zeker mogelijk in Javascript, en ik denk dat er ook zeker wel voorbeelden te vinden zijn. Mocht ik nog tijd hebben maak ik wel een voorbeeldje.

[BlueAce]

@ CrashOne: Wellicht had ik beter kunnen vragen: "Hoe is dit mogelijk?"

@ Riff: daar had ik eigenlijk geneens aan gedacht En zoals je al zegt: het is zeker niet makkelijk. Een voorbeeld is natuurlijk meer dan welkom! Ik heb nog geen soortgelijk script kunnen vinden online.

[ Voor 12% gewijzigd door BlueAce op 21-05-2004 12:55 ]

[Pelle]

Dit is allemaal niet zo heel moeilijk hoor. Riff legt het redelijk uit
Overigens is deze site volgens mij door Nozzman en Bosmonster gebouwd

[Verwijderd]

Zal zo even met een voorbeeldje beginnen, komt er vanmiddag nog wel aan.

[Verwijderd]

Even een vraagje die een hoop gemier met JS scheelt: wordt het geheel absoluut gepositioneerd of is dat niet mogelijk?

[Verwijderd]

En werken doet ie:

HTML:

<div id="scrollwrap">
    <div id="rel"><div id="scroll">
        [img]"http://gathering.tweakers.net/global/smileys/smile.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/frown.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/wink.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/puh.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/coool.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/smile.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/frown.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/wink.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/puh.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/coool.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/smile.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/frown.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/wink.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/puh.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/coool.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/wink.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/puh.gif"[/img]
        [img]"http://gathering.tweakers.net/global/smileys/coool.gif"[/img]
    </div></div>
</div>

Allemaal got smilies idd, even om het hele stuk op te vullen. In #scroll kun je iig al je data kwijt.

JavaScript:

<script type="text/javascript">
// Even de breedte van het scrollende gedeelte opgeven:
var scrollWidth = "750";
// De absolute positie van de container:
var parentX = "200";

var scrollEd = "0";
var moveRight = true;
var moveStep = "0";

window.onload = initScroll;

function initScroll() {
    el = document.getElementById('scroll');
        el.onmousemove = mouseScroll;
    wrap = document.getElementById('scrollwrap');
        wrap.style.overflow = 'hidden';

    var deBreedte = 0; var i = el.childNodes.length;
    while (i--)
        deBreedte += el.childNodes[i].offsetWidth;

    setInterval(function() {
        scrollEd = moveRight?scrollEd - parseInt(moveStep / 10):scrollEd + parseInt(moveStep / 10);

        el.style.left = scrollEd + 'px';
        if(scrollEd>0) { el.style.left = '0px'; scrollEd = 0; };
        if(scrollEd<0-deBreedte+scrollWidth) { el.style.right = '0px'; scrollEd = 0-deBreedte+scrollWidth; };
    }, 50)
}

function mouseScroll(event) {
    // Horizontale muise positie
    muisX = navigator.userAgent.indexOf('MSIE')>=0?(window.event.clientX):(event.clientX);

    // En dan hebben we de positie ten opzichte van de parent
    relativeX = muisX - parentX;

    // moveRight is True als er naar rechts gescrollt moet worden, false = naar links
    moveRight = relativeX>scrollWidth/2?true:false;

    // moveStep is eigenlijk de afwijking ten opzichte van het midden
    moveStep = moveRight?relativeX-scrollWidth/2:scrollWidth/2-relativeX;
}

</script>

En ten slotte de CSS:

Cascading Stylesheet:

<style type="text/css">
#scrollwrap {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 750px;
    height: 200px;
    overflow: auto;
    border: 1px solid black;
}

#rel {
    position: relative;
}

#scroll {
    width: 10000px;
    height: 200px;
    position: absolute;
}

#scroll img {
    width: 200px;
    height: 200px;
}
</style>

Bugs:

• Aan de rechterkant scrollt ie gewoon door, had geen zin om daar nog een check voor in te bouwen, maar dat kun je nog makkelijk zelf erin zetten op dezelfde manier als de check aan de linkerkant heb gezet.
• Het geheel moet nu absoluut gepositioneerd zijn. Ook dat kan anders, maar dat is weer iets wat je zelf mag doen. Ik ga ervan uit dat zo'n ding meestal ook absoluut gepositioneerd zal zijn.
• Levert een scrollbar op in Opera, ook wel op te lossen.

edit:

Even iets toegevoegd waardoor mensen zonder javascript, of met javascript uitgeschakeld een scrollbar erbij krijgen. De inhoud blijft daardoor bereikbaar.

[ Voor 56% gewijzigd door Verwijderd op 21-05-2004 17:22 ]

[BlueAce]

* ... slik. Heb je je adres, dan komt er een taart met dame jouw kant op Allemachtig bedankt man

Ik ga die bug voor de rechterkant er even uitfilteren, post de code wel hier zodra ik klaar ben. De absolute positionering is geen probleem, en Opera komt later wel.

Nogmaals: big thx

[ Voor 13% gewijzigd door BlueAce op 21-05-2004 15:56 ]

[BlueAce]

Op line 22 van het script komt de check naar links dus voor:

code:

if(scrollEd>0) { el.style.left = '0px'; scrollEd = 0; };

Nou moet dit dus te modden zijn naar rechts, maar hoe: geen idee Zo zie je maar dat je nooit "alles" kan weten

Ik heb al verschillende dingen geprobeerd (zoals style.right) maar nog niks gelukt eigenlijk. Misschien moet ik het iets verder zoeken...

[Verwijderd]

Weet je de breedte van de scrollende inhoud?

[BlueAce]

In principe wel ja. Ik kan server-side bepalen hoeveel de breedte van de content is. Client-side heeft opzich een voorkeur, maar veel problemen zal dat niet opleveren.

[BlueAce]

Hebbem, regel 22 veranderen in het volgende:

code:

if(scrollEd>0) { el.style.left = '0px'; scrollEd = 0; };
if(scrollEd<-2850) { el.style.right = '0px'; scrollEd = -2850; };

2850 is de breedte in pixel van de inhoud. Is er een manier waarop de breedte te checken is? Dat zou opzich iets handiger zijn dan server-side een variabele eraan te geven.

[ Voor 10% gewijzigd door BlueAce op 21-05-2004 17:05 ]

[Verwijderd]

BlueAce schreef op 21 mei 2004 @ 17:04:
Is er een manier waarop de breedte te checken is?

Maar natuurlijk offsetWidth is daar specifiek voor bedoeld, maar die is niet toe te passen op #scroll omdat ik daar vanuit CSS al een breedte van 10000px aan toeken. Je zult dus de breedte van alle childnodes van #scroll op moeten tellen. Hoppa:

JavaScript:

var deBreedte = 0; var i = el.childNodes.length;
while (i--)
    deBreedte += el.childNodes[i].offsetWidth;

De maximale waarde van scrollEd is dan weer te bereken door 0-(deBreedte+scrollWidth) oftewel 0-deBreedte-scrollWidth.

In een paar posts hierboven staat het toegepast.

[BlueAce]

Helaas blijkt dat niet te werken. Hij scrollt gewoon lekker door.... teh bastard...

[Verwijderd]

BlueAce schreef op 21 mei 2004 @ 17:33:
Helaas blijkt dat niet te werken. Hij scrollt gewoon lekker door.... teh bastard...

Hmz, heb je de code net zo overgenomen als in mijn originele post (die ik dus alweer aangepast had)? Hier werkt dit namelijk prima in zowel IE als FF

edit:

Ah, ik zie het al: hij gaat op z'n bek bij spaties tussen <div id="scroll"></div>. Het werkt dus wel als je de spaties allemaal weglaat (de enters dus ook) tussen de inhoud, of het script enigzins aanpast. Het scheelt al een stuk als je weet wat erin komt te staan. Divs, imgs, of gemengd?

[ Voor 32% gewijzigd door Verwijderd op 21-05-2004 17:38 ]

[BlueAce]

Jep, alles gecopy-paste Waarschijnlijk vergeet ik iets ofzo, maar ik heb de HTML, CSS, en JS nu wel 10 keer gekopieerd, nog steeds doorscrollen...

edit:

Klopt, zo doet ie het dus. Er komen images in de div te staan met tekst erboven en beneden dmv andere divs. Is dit een probleem? En in hoeverre is de aanpassing "enigszins"?

[ Voor 44% gewijzigd door BlueAce op 21-05-2004 17:43 ]

[Verwijderd]

BlueAce schreef op 21 mei 2004 @ 17:38:

edit:

Klopt, zo doet ie het dus. Er komen images in de div te staan met tekst erboven en beneden dmv andere divs. Is dit een probleem? En in hoeverre is de aanpassing "enigszins"?

Als je weet dat er alleen divs als directe childs in komen te staan kun je daar op checken zodat je geen last meer hebt van de whitespaces. De aanpassing is dus:

JavaScript:

    var deBreedte = 0; var i = el.childNodes.length;
    while (i--) {
        if (el.childNodes[i].nodeName == 'DIV')
            deBreedte += el.childNodes[i].offsetWidth;
    }

Probeer maar eens uit met:

HTML:

<div id="scrollwrap">
    <div id="rel"><div id="scroll">
        <div style="width: 250px; height: 200px; float: left; background: yellow;">test</div>
        <div style="width: 160px; height: 200px; float: left; background: red;">test</div>
        <div style="width: 250px; height: 200px; float: left; background: yellow;">test</div>
        <div style="width: 160px; height: 200px; float: left; background: red;">test</div>
        <div style="width: 250px; height: 200px; float: left; background: yellow;">test</div>
        <div style="width: 160px; height: 200px; float: left; background: red;">test</div>
    </div></div>
</div>

[BlueAce]

En nog steeds scrollen we lekker door Werkt hij bij jouw wel?

[Verwijderd]

BlueAce schreef op 21 mei 2004 @ 17:50:
En nog steeds scrollen we lekker door Werkt hij bij jouw wel?

Hier wel ja Hier dan nogmaals mijn complete XHTML bestand, misschien toch een knipplak foutje? Om het topic niet al te lang te maken, klik hier voor mijn code:

[ Voor 13% gewijzigd door Verwijderd op 21-05-2004 17:56 ]

[BlueAce]

De style zat bij mij onder het script zelf, lekker bijdehand

Hij werkt zoals het zou moeten, perfect. Groot is mijn dank

* BlueAce geeft Riff zijn eergeborene

[Verwijderd]

_{Stuur nog maar eens een mailtje met de link waar het gebruikt wordt, dat vind ik dan weer leuk om te weten}

[BlueAce]

Zodra ie online is, komt de link je kant op

Klein dingetje nog: op Mac IE5 schijnt die niet te werken helaas. Iemand enig idee waarom niet?

[Verwijderd]

BlueAce schreef op 03 juni 2004 @ 15:44:
Klein dingetje nog: op Mac IE5 schijnt die niet te werken helaas. Iemand enig idee waarom niet?

Ik heb dat ook ooit gehad, wil gewoon niet, stomme bug, zal eens kijken of ik dat topic nog kan vinden. Weet niet of dit helemaal hetzelfde is, maar het is gewoon een kut browser.

[rml][ javascript]IE 5 Mac scrollbarprobleem[/rml]

[ Voor 21% gewijzigd door Verwijderd op 03-06-2004 16:03 . Reden: gevonden ]

[BlueAce]

Zo te zien en te horen heeft Microsoft weer een hoogstaand stukje werk afgeleverd

Dit gaat de klant leuk vinden...