One of the best parts about HTML5 IFrame Widgets is that they work equally well on desktop and mobile platforms. There are some minor quirks, however. When viewing a publication on mobile, it is usually possible to navigate pages by swiping left and right. If however, the reader's swipe gesture falls within an interactive IFrame widget, the widget will capture the event instead of the viewer, and the page will not turn!
Sometimes this is the desired behavior, if you would like the reader's swiping to affect the widget rather than turn the page. This is desirable for image slideshows, product lists, larger webpages, and so on. Other times, you may like to allow swiping within the widget to still turn pages for the viewer, but you don't want to disable interactivity on the widget entirely. Here's what you can do instead:
In the example above, horizontal swipe is enabled on the widget for page 2, so that even though it covers nearly the entire page of the publication, it does not interfere with navigating through the publication via swiping.
Example Code
Here's the code used for that widget, which can be added to your own widgets to achieve the same:
<!DOCTYPE html>
<html>
<head>
<script src="//secure.api.viewer.zmags.com/widgets/iframe.js" type="text/javascript"></script>
<script type="text/javascript">
var Iframe = com.zmags.api.widgets.Iframe;
Iframe.horizontalSwipeNavigation(true); // Enables horizontal swipe for this widget.
</script>
</head>
<body style="text-align:center; background:lightblue;">
<!-- Widget content goes here as usual; this can be whatever you'd like. -->
<br>
This is a test widget!
<br>
<br>
<button onclick="alert('You clicked the button!');">Click me!</button>
</body>
</html>
Comments
0 comments
Please sign in to leave a comment.