Scroller

[Verwijderd]

Ik ben een scriptje aan het maken waarbij een divje de muis in x-richting volgt. Het wilt alleen niet helemaal helpen. Dit is wat ik tot nu toe heb:

code:

function menufollower(actie){
        var oud = document.getElementById("menufollower").style.left;
        var nieuw = oud.substring(0,oud.length-2);
        int left = parseInt(nieuw);

        var IE = document.all?true:false;
        if (IE) {
                if(event.clientX !== left - 37){
                        document.getElementById("menufollower").style.left = left + 5;
                }
        }
        else {
                if(e.pageX !== left - 37){
                        document.getElementById("menufollower").left = left + 5;
                }
        }
        setTimeout("menufollower(\"start\")", 10);
}

Nu gaat het fout bij het converteren van de string nieuw naar een integer. Ik krijg een error op regel 4 met de melding: ';' wordt verwacht.

Ik heb geen idee wat ik hiermee aanmoet, ik had toch gedacht het een stuk makkelijker zou zijn. Of denk ik nu veel te makkelijk??

[ Voor 4% gewijzigd door Verwijderd op 28-05-2005 15:54 ]

[Verwijderd]

int left in javascript gaat niet werken he. JS is niet strong typed.

Verder nog:

Die .style.left zal wel geen waarde hebben. Dat had je zelf kunnen controleren. met .offsetLeft werkt het waarschijnlijk gewoon.
En geef de .style.left property een eenheid mee, dus plak er 'px' achter.

En document.all? Kom op zeg. En waar haal je die variabele e ineens vandaan? Waarom gebruik je niet setInterval?

Dit is overduidelijk een gebrek aan ervaring.

[Verwijderd]

Een gebrek aan ervaring heb ik inderdaad, vandaar dat ik er zelf niet uitkom.

style.left heeft wel een waarde, namelijk -100px (in het begin). Het probleem is alleen dat ik eerst die 'px' weg moet halen en vervolgens het moet omzetten naar een integer om er vervolgens 5 bij op te tellen. Dat wilt niet echt lukken.

Ik heb inmiddels 'px' achter de nieuwe waarde gezet!

[André]

De eerste 3 regels van je functie kun je samenvatten in:

code:

var left = parseInt(document.getElementById("menufollower").style.left);

Verder moet je in FF je event meesturen naar de functie. Maar deze functie zal dan nog maar 1 keer werken omdat hij daarna met setTimeout aangeroepen wordt en die geeft geen event mee dus kun je geen clientX of pageX meer uitlezen.

[Verwijderd]

Ik ben er zelf inderdaad ook achter gekomen dat die clientX na de tweede keer niet meer werkt. Hoe zorg ik er dan voor dat die event meegegeven word. Ik zie in wat voorbeeldjes wel staan dat 'e' word meegegeven in de functie, maar ik krijg het dan niet voor elkaar om ook nog 'actie' mee te sturen.

[André]

Zo bijvoorbeeld:

code:

function menufollower(evt, actie)
{
  if (!evt) { evt = event; }

  alert(evt)
}

menufollower(event, "blaat");

En ipv de setTimeout zou ik gewoon een onmousemove op de body zetten zodat je uit die event iedere keer de coordinaten kunt halen

Kijk hier voor een voorbeeld, check de functie Mouse maar eens

[ Voor 51% gewijzigd door André op 28-05-2005 17:48 ]

[Verwijderd]

Oke, ik heb al jullie tips erin verwerkt. Het werkt nu wel goed, alleen zodra de muiscursor stil staat blijft de div ook hangen en dat moet juist niet. Als ik met mijn cursor naar een plek in het menu ga, moet de div daarnaartoe 'scrollen'.

Hier kun je zien hoe het nu is.

Moet ik het dan met for() doen... en dan steeds 1 bij de style.left erbij? Maar hoe kan ik er dan voor zorgen dat hij gaat scrollen? Dus niet dat hij ineens zo snel naar die plek van de cursor gaat.

[André]

Dan zou je dus met die onmousemove gewoon een loop moeten starten die wel met setTimeout werkt. En elke keer als de onmouseout getriggered wordt kijk je of de animatie al loop: zo niet dan starten. En direct leg je in een variabele de event.clientX vast.