Scherm de muis/cursor laten volgen.

[Anoniem: 401968]

Goedenavond,

Ik ben eigenlijk op zoek na de naam/optie die er voor zorgt dat het scherm mee gaat met de muis.

Ik heb bijvoorbeeld een website, deze heeft een groote van 1600 breed en 1000 hoog. Het is een muur met daarop alle informatie etc. Dus wanneer je na rechts gaat met de muis, schuift hij automatische door na links waar je, je muis houdt. Zodat je de scrollbalk niet hoeft te gebruiken.


Iemand een idee hoe dit heet, en met wat voor iets dit gemaakt wordt (bijv. flash, php etc.)?

Bedankt.

[Sendy]

Met X (op GNU/Linux) kan je je desktop groter maken dan de viewport. (In ieder geval kon dat 10 jaar geleden.) Je krijgt dan het gedrag zoals jij beschrijft.

[8088]

Anoniem: 401968 schreef op dinsdag 06 november 2012 @ 17:30:
Iemand een idee hoe dit heet

Iets met mouse/cursor/position/tracking? Geen idee, maar vertaal je vraag of trefwoorden naar het Engels en je vindt vast wel wat.

en met wat voor iets dit gemaakt wordt (bijv. flash, php etc.)?

Flash zou ik niet aanraden wegens afnemende ondersteuning en PHP draait (voorlopig alleen maar) op de server. JavaScript daarentegen wordt (in dit geval) uitgevoerd door de browser.

tutorial en voorbeeld met jQuery
bijbehorende documentatie

[NMe]

Het probleem is dat je dit makkelijk bedienbaar wil houden zonder dat het storend wordt. Je wil dus de positie van de muis bekijken als hij over een bepaalde treshold heen is (zodat je de pagina ook stil kan houden). Je zou eraan kunnen denken om de middelste 50% van de contentbreedte (let op: content, niet viewport) niks te laten doen en als je daar overheen gaat naar links of naar rechts, dan je javascript wat laten scrollen.

Afgezien van de juiste manier om dit te doen: ik zou het überhaupt niet doen. Werkt op touchdevices niet lekker en ook op de pc is het bewerkelijk. Kies dan liever voor een swipe-idee waarin je van links naar rechts of andersom kan slepen en op basis daarvan kan scrollen.

Sendy schreef op dinsdag 06 november 2012 @ 17:37:
Met X (op GNU/Linux) kan je je desktop groter maken dan de viewport. (In ieder geval kon dat 10 jaar geleden.) Je krijgt dan het gedrag zoals jij beschrijft.

Wat heeft dat met websites te maken?

[Sendy]

NMe schreef op dinsdag 06 november 2012 @ 18:54:
[...]
Wat heeft dat met websites te maken?

je neemt zo'n configuratie in X met je desktop groter dan je viewport. Zet je browser aan, op fullscreen, en klaar.

[Barryvdh]

Sendy schreef op woensdag 07 november 2012 @ 12:13:
[...]

je neemt zo'n configuratie in X met je desktop groter dan je viewport. Zet je browser aan, op fullscreen, en klaar.

Super praktisch, zo'n website die alleen met jouw configuratie werkt..

[Sendy]

Barryvdh schreef op woensdag 07 november 2012 @ 12:28:
[...]

Super praktisch, zo'n website die alleen met jouw configuratie werkt..

Ik geloof dat de topicstarter voor één specifieke website een oplossing zoekt, dus ja, dat is praktisch.

[SandaX]

Een zoekopdracht op google bracht oplossingen die veelal "smooth scroll" heten. Misschien dat je daar iets mee kunt.

http://jsfiddle.net/gaby/72yhW/2/
http://www.smoothdivscroll.com/#quickdemo

[D4NG3R]

Middelste muisknop indrukken en dan de muis bewegen? Edit: Ah als script op de website. Geen idee .

[ Voor 32% gewijzigd door D4NG3R op 07-11-2012 12:54 ]

[TERW_DAN]

Je kunt kijken naar de coordinaten van je muis (clientX en clientY) als je een event triggert. Wil je dit over het hele document doen dan zou je kunnen kijken of document.onmousemove werkt (geen idee of iedere browser dit doet trouwens), of je kunt elementen positioneren op de plekken vanaf waar je wilt scrollen en de onmouseover en onmouseout gebruiken om een functie uit te voeren.

Het ligt er maar een beetje aan hoe je eea wil doen, bedenk wel dat het automatisch laten bewegen niet altijd even praktisch is.

[Anoniem: 401968]

Het is opgelost door de manier van: @SansaX. Nu heb ik nog een resterende vraag. Moet ik daarvoor een nieuw topic openen laat het even weten.

Ik heb nu dus die muur. Je moet het zien als een achterbuurt. Alles kapot, etc. (via photoshop gemaakt) staat ondertussen in HTML. Nu liggen er een paar dingen 'op de grond' voor die muur. Denk aan een bal, kan ik deze laten stuiteren, wanneer er met de muis overheen wordt gegaan? Hoeft niet ingewikkeld te zijn, simpel is goed genoeg voor mij. Maar ik heb het dus geprobeerd met Flash, het stuiteren lukt wel.. maar daarna. Hoe krijg ik het tot het effect dat ik wil wanneer er met de muis overheen wordt gegaan? Kan/moet ik iets anders dan flash gebruiken?

Mijn dank is groot.

[NMe]

Je kan hele leuke dingen met CSS-transities bereiken. Maar ik verwacht niet dat je daar helemaal klaar voor bent, want dan had je die techniek al gekend. Flash is een alternatief (en vreselijk irritant op websites) maar als je dat ook nog niet kent gaat dat ook wel even duren.

Hoe dan ook: nee, het is niet de bedoeling dat je van dit topic maar een vraagbaak maakt waar je even snel al je vraagjes in dumpt. Als je totaal ongerelateerde vragen hebt dan mogen die in een nieuw topic, maar dan wel graag conform de Quickstart.

Sendy schreef op woensdag 07 november 2012 @ 12:13:
[...]

je neemt zo'n configuratie in X met je desktop groter dan je viewport. Zet je browser aan, op fullscreen, en klaar.

Ik zou zweren dat we in dit forum praten over het ontwikkelen van websites, niet het gebruiken ervan. Een oplossing die alleen op jouw pc werkt interesseert een webdeveloper niks.

[ Voor 27% gewijzigd door NMe op 08-11-2012 21:31 ]

[Navi]

Dit is mogelijk met jQuery

http://docs.jquery.com/Tutorials:Mouse_Position

[8088]

Dat was al genoemd. Sterker nog, GnDJ maakt daar al (indirect) gebruik van.

[NMe]

Daarnaast kan het ook prima zonder jQuery en met standaard Javascript...

[Gomez12]

NMe schreef op maandag 12 november 2012 @ 00:47:
Daarnaast kan het ook prima zonder jQuery en met standaard Javascript...

jQuery is slechts een javascript-library, dus uberhaupt alles van jquery kan in javascript...

Alleen is het de vraag of TS het in javascript ook net zo cross-browser werkend krijgt als jquery al standaard doet.