How do you get a .js embedded HTML5 page to scroll on mobile device (iPad)?

#1

I’m trying to get an HTML5 page to scroll vertically on a mobile device like iPad. If possible, by swiping on the javascript embedded game itself (since it is in the middle of the page). The code below is for this game: http://roomrecess.com/mobile/100Letters/play.html

I hate to paste to entire page so I’ll paste the div the game is in:

<div id="" align="center" >  
<div id="openfl-content"></div>
<script type="text/javascript">
	lime.embed ("openfl-content", 800, 600, "004080");
</script>
</div>

Here’s the info in the header:

<style>
	html,body { margin: 0; padding: 0; height: 100%; overflow: auto; }
	#openfl-content { background: #094885; width: 800px; height: 600px;  }
</style>
#2

Are you saying that A.) you want the game to intercept events, and to not allow the page to scroll, or B.) for the game to not prevent the default, and allow the browser page to scroll?

Do you want the game to fill the entire screen, or only part of it?

Thanks :slight_smile:

#3

I want the page itself to scroll when swiped up so that users can get the game into view when the iPad is in landscape (horizontal mode). The embedded game should scroll with the screen (does that make sense)?

Is that possible to do (and still have the game received normal events, like button pushing and such)?

#4

I think by default, we preventDefault () within the game window, to prevent this, but I think it’s allowed if you touch and scroll outside of it

EDIT: Hmm, I guess I’m wrong:

This is in the default template, but you can override the template with your own HTML, similar to how I’m doing it in this sample:

https://github.com/openfl/openfl-samples/blob/master/features/external/BrowserExternalInterface/project.xml#L11

https://github.com/openfl/openfl-samples/tree/master/features/external/BrowserExternalInterface/Assets/templates/html5/template

(It doesn’t have to be in assets, but this is the recommend way to override default templates)

1 Like
#5

Thanks, a lot for the help. Yeah, removing the event.preventdefault does allow me to scroll as long as the user swipes in the space outside the game window. This helps. I’ll explore the template option to possibly have the ability to swipe/scroll the entire page when swiping on the game.