panning / scrolling a div

  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

Hi everyone :)

I have a div which is 500x500 pixels, inside, the contents will be bigger than that, therefore a scrolling bar will be required.

What I wanted to do is, when the user moves the mouse around, the div contents would follow the mouse to achieve a panning effect, kind of like when you pan the googlemaps maps around.

No idea how to achieve this, I've googled but nothing much has surfaced, I've found only a mootols demo: http://demos111.mootools.net/Scroller but cannot get it to work, and also I'd like to keep away from using ajax frameworks because I've had problems with javascript conflicts already and really want to avoid that.

Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Are the contents of the <div> interactive at all (form inputs, buttons, links, etc), or just something to look at (images, video, etc) ?
  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

Hmm, there is a form... but it can be removed if its an issue.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Well if there's interactive content, it would be best to start/end the movement with the mousedown/mouseup events meaning the visitor would drag the content around within the box by holding down the mouse button.
However if it's just visuals the movement could be started/stopped with the mouseover/mouseout events meaning movement would start as soon as the mouse touhed the box and follow the movement from there.
  • Ifrit
  • Graduate
  • Graduate
  • User avatar
  • Posts: 196
  • Loc: Portugal

Post 3+ Months Ago

im not knowledgeable at all when it comes to javascript though, i dont even know where to begin, usually i rely on ready-made scripts, i'm that helpless hehe... i dont know how to refer to the mouse position and how to tell the div to scroll "that way"... hmm..

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 81 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.