Skip to content

Instantly share code, notes, and snippets.

@KZeni
Created September 27, 2013 21:14
Show Gist options
  • Save KZeni/6735287 to your computer and use it in GitHub Desktop.
Save KZeni/6735287 to your computer and use it in GitHub Desktop.
Prevent memory limit crash in Mobile Safari (and other mobile browsers) when viewing an Impress.JS presentation with a lot of images and/or 3d elements by only showing the current, next, and previous slide on mobile devices.
<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ // Detect mobile browsers & use memory optimized styling if on mobile (hide all but the previous & next slides). Can prevent crashes when presentation contains many images and/or 3d elements.
var root = document.documentElement;
root.className += ' mobile';
}else{
var root = document.documentElement;
root.className += ' desktop';
}
function getPreviousSibling(element){
var p = element;
do p = p.previousSibling;
while (p && p.nodeType != 1);
return p;
}
document.addEventListener('impress:stepleave',function(event){
prev = document.getElementsByClassName('prev')[0];
if(typeof prev != 'undefined')
prev.classList.remove('prev'); // Remove prev class from old prev slide
current = document.getElementsByClassName('active')[0]; // Get current slide
prev = getPreviousSibling(current); // Get prev slide
prev.className += ' prev'; // Mark prev slide with class
});
</script>
<style>
.step { display:none; } /* Start by not showing slides to prevent mobile Crash at the start */
.desktop .step { display:block; } /* Desktops should be able to handle all slides */
.step.active,.step.present,.step.active + .step,.step.prev { display:block; } /* Limit mobile to only show the current slide, the next slide, and the previous slide */
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment