How to make a fixed background image?


(David) #1

I’m an elementary teacher who has been tasked with creating an interactive map of an event we are putting on to showcase student work. We want it to work on mobile devices (iPads, iPods, etc). So far, the project is going well (Hype is awesome), but I’d like the background map to stay fixed (it’s an HTML widget with an image link). If people swipe on the background as it is, it moves and the shapes I have drawn on top of the map show up. It doesn’t look very professional. I tried pinning and unpinning it different ways. I also searched the forums and tried adding this code, but it didn’t work. Here’s the link to my project (it’s still incomplete, so only the purple and blue tables are interactive currently).


#2

This is default iOS behavior, so you will need some work before you can counter this. If you are using Phonegap you can check here for a solution: http://stackoverflow.com/questions/22682665/how-to-avoid-pulling-down-of-screen-on-iphone-app

If you are using regular HTML / Safari you can maybe check this page: http://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect

Good luck, it’s probably going to be a bit tricky!


#3

Also have a look at this topic: Disable Rubberband Scroll on Mobile while allowing scrollable Elements