DerekBogie Posted April 28, 2015 Share Posted April 28, 2015 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 28, 2015 Share Posted April 28, 2015 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. Link to comment Share on other sites More sharing options...
DerekBogie Posted April 29, 2015 Author Share Posted April 29, 2015 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/ Link to comment Share on other sites More sharing options...
justsomeguy Posted April 29, 2015 Share Posted April 29, 2015 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? Link to comment Share on other sites More sharing options...
DerekBogie Posted April 29, 2015 Author Share Posted April 29, 2015 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 30, 2015 Share Posted April 30, 2015 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. Link to comment Share on other sites More sharing options...
DerekBogie Posted April 30, 2015 Author Share Posted April 30, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted May 1, 2015 Share Posted May 1, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now