Iframe onMouseOver scrolling event

[DerekBogie]

I havent implemented any code for this yet as I do not know where to start.

 

Basically what I have is a webpage that displays an Iframe with a width and height of 500px. The actual webpage inside the Iframe is lets say 1200px by 1200px. I disabled visible scroll bars on the iframe and want to scroll the iframe page with an "onMouseOver" event near the edges of the iframe window with the cursor and not scroll while the cursor is in the middle of the page. I have been looking for examples for a few hours with little luck any help will be appreciated.

[justsomeguy]

I'm not sure if you'll be able to do that, especially if the site inside the iframe is on a different domain. But when you have an event handler for a mouse event then you can use the event object to get the coordinates of the mouse cursor. You can use that information to figure out if the cursor is close enough to an edge where you want to scroll, and if so then kick off a scroll animation. When the cursor moves away from the edge or out of the iframe then you can stop the scroll animation.

[DerekBogie]

The site is on the same domain. I am using an iframe window on an html video game i am creating outside of canvas. I know javascript moderately well but know nothing of canvas at all. So i am limited as to what i can do. Basically im making an rpg style click game and want the player to be able to scroll around the map as you would in age of empires, diablo, etc.... Unless you have another alternative i will be more than happy to listen.So you know exactly what i am worknig with here is a link to the game i am creating. Input is ALWAYS welcome.

http://emeraldcreations.site90.com/

[justsomeguy]

Is it necessary to use an iframe, or can the scrollable part be another canvas? Or even just a div that contains an image or something?

[DerekBogie]

I am not efficient enough for canvas as I have yet to even begin learning it. The iframe on the index page displays the oher html pages containing the game. This way the user cannot just cheat and change the address bar to advance in the game, the site address with remain the same. But with that I want to make the background an image of the game map. i will then use onClick, and onMouseOver image events that the player can click in the game. I want to have the effect for the player to be able to move around the map with the mouse and pan around it. I was going to make a large image file most likely 3000 x 3000 and make the iframe window that displays it around 1000px by 750 px.

[justsomeguy]

The iframe on the index page displays the oher html pages containing the game. This way the user cannot just cheat and change the address bar to advance in the game, the site address with remain the same.

That wouldn't stop someone who knows how to use the browser's developer tools.I haven't tried to do something like that, so I'm really just speculating here. It would require some testing. If you put a mouseover and mousemove event on the iframe I'm not sure if the event object will contain the coordinates in the iframe, or even if the mousemove event would fire on the iframe. It might, but it might also only fire on the document object displayed in the iframe. That's where the testing would come in. If it was just a small div that had an img element with the map then it would be a little more straightfoward, I haven't tested how that would work with an iframe. But that's what you would do, use mousemove to figure out where the cursor is over the element and then decide if you need to animate the scroll.

[DerekBogie]

I need movement such as this JFiddle script here with the entire webpage instead of a single Div element.

 

http://jsfiddle.net/georgedyer/RRPsa/

 

I have found a code that works portionally below but if the webpage is over a large area then it will only scroll half the page and not to the end.

I cannot just scroll certain elements such as images, or divs, i need to scroll the contents of an entire webpage together with the functionality with the Jsfiddle program above. Here is the code that i currently have but works only half way. Id prefer the program above to work when the mouse its towards the edges i can set up an onmouseover event to begin scrolling the page in those directions (movability in x and y positions)

// Variables for current positionvar x, y;function handleMouse(e) {  // Verify that x and y already have some value  if (x && y) {    // Scroll window by difference between current and previous positions    window.scrollBy(e.clientX - x, e.clientY - y);  }  // Store current position  x = e.clientX;  y = e.clientY;}// Assign handleMouse to mouse movement eventsdocument.onmousemove = handleMouse;

Edited April 30, 2015 by DerekBogie

[justsomeguy]

You need to attach the mousemove event to the iframe, not the whole document. See if it fires that event handler and if the event object contains the coordinates of the mouse over the iframe. You can use console.log to write debugging information to your developer console without interrupting the code.