[JS]events luisteren en reageren indien var=true

[Dr_Frickin_Evil]

Ik wil op mijn site een scrollbalk maken. Heb op het moment 2 knopjes, met daarin een balkje dat verschuift zogauw je op de knopjes klikt (naar links of naar rechts). Dat werkt opzich goed, maar ik wil het uitbreiden door het balkje versleepbaar te maken. Ik kom er echter niet uit hoe ik dan te werk moet gaan.

In mn hoofd heb ik het wel een beetje uitgewerkt, maar hoe ik dit in javascript aan moet pakken weet ik niet. Ik zal bij een onmousedown een variabele op true moeten zetten, welke aangeeft dat er gedragged gaat worden, bij onmouseout moet deze variabele weer op false. Bovendien moet ik een globale functie in een loop hebben die continu controleert of die variabele true is, en zoja de waarde van de X-coordinaat van de muis uitleest. Daarna kom ik er verder wel weer uit.

Het grootste probleem is hoe ik zo'n globale functie declareer. Een echte term weet ik er niet voor, dus dat maakt het nogal lastig om te zoeken. Wie kan mij hiermee op gang helpen?

[Verwijderd]

Dr_Frickin_Evil schreef op 22 juni 2004 @ 00:14:
Bovendien moet ik een globale functie in een loop hebben die continu controleert of die variabele true is, en zoja de waarde van de X-coordinaat van de muis uitleest.

Dat doet de browser zelf al...je hoeft alleen een functie te koppelen aan het mousemove event:

JavaScript:

function doDrag() {
    // Je drag code
}

document.onmousemove = doDrag;

[djluc]

Kun je niet beter gewoon een divje met scrolling=auto nemen? Dat lijkt me handiger om een hoop problemen te voorkomen eerlijk gezegd. Om slepen met JS crossbrowser te maken is niet zo heel erg eenvoudig namelijk.

[Clay]

Om slepen met JS crossbrowser te maken is niet zo heel erg eenvoudig namelijk.

Makkelijk niet nee, maar op zich goed te doen. Wat ik schematisch meestal doe is iets ala:

code:

element onmousedown
 |- element onthouden
(|- evt. ondragstart acties uitvoeren...)

document onmousemove
 |- als er een element onthouden is
 |  |- huidige muis X en Y opvragen
 |  |- dx -> huidige muisX - oude muisX
 |  |- dy -> huidige muisY - oude muisY
(|  |- evt. ondrag acties uitvoeren...)
 |  |- verplaats element met dx, dy
 |  |- muis X en Y onthouden als oud
 |  |- return false (!) 
 |
 |- zoniet return true

document onmouseup
 |- als er een element onthouden is
   (|- evt. onrelease acties uitvoeren...)
    |- element vergeten

als je dan de events met een try/catch met een addEventListener of attachEvent eraan hangt (zodat je makkelijk bij je event object komt) gaat dat eigenlijk in elke browser goed. 'k verander nogal vaak van mening over wat ik lekker vind scripten, maar op dit moment hanteer ik een los eventlistener "component" waar oa dit in zit:

code:

function attachElementEvent(element, type, handler) {
    if(element.attachEvent) {
        element.attachEvent('on' + type, handler);
    } else {
        try {
            element.addEventListener(type, handler, false)
        } catch (e) { 
            element['on' + type] = handler; 
        }
    }
}

Slechts in geval van extreme browserbrakheid valt dat terug tot het lvl 0 event model.

[Dr_Frickin_Evil]

Het is inderdaad best te doen hoor. Ik heb nog niet echt superveel ervaring met Javascript (paar kleine functies), en dit wordt het eerste serieuze projectje. Ik heb al wel enigszins door hoe ik het aan ga pakken.

Bedankt voor je reactie Clay, dat ziet er allemaal erg begrijpelijk uit. Ik begrijp dat je die laatste functie hebt toegevoegd om het verschil IE/Mozilla op te vangen, ziet er erg slim uit. Nog een wat algemener vraagje. De basis van Javascript heb ik wel door onderhand, maar de wat verder gevorderde scriptjes, daar vind je weinig over, wat betreft uitleg en handleidingen. Waar lees ik zoiets??

[Clay]

De Devedge js 1.5 reference & guide zijn wel handig, je kan de Devedge multibar (voor moz/fire) insltallen, op de W3C site staat ontzettend veel en voor IE zal je veel op msdn moeten kijken.