Well, I was playing with making this more fully backward compatible to IE 6 (no fixed position support, on longer/wider pages made the image larger than the window). I discovered that if you refresh one of these longer pages when it's already been scrolled, all browsers convert to absolute positioning on:
if($sleeper.offset().top){
$sleeper.css({position: 'absolute'});
}
I used that because I wanted feature detection, not browser detection. But I've decided to go with browser detection. And found that setting the page overflow (html and body tags) to hidden during the effect helped IE 6 and looked good in others if the page had scrollbars. This begged a way to save the scroll state if any, so it could be restored after the effect.
And to answer your question, change the initial left: 0; for the $sleeper div to right: 0;
Here's the latest with the substitution for top right appearance (script only):
<script type="text/javascript">
jQuery(function($){
var $sleeper = $('<div style="display: none; width: 100%; height: 100%; background-color: black; position: fixed; top: 0; right: 0;">' +
'<img src="imSleeping.jpg" style="width: 100%; height: 100%; display: block;" width="100%" height="100%" alt="Click or Press Key to Return Image" title="Click or Press Key to Return"></div>')
.appendTo(document.body), timer, nofixed, scroll;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if($.browser.version < 7){
$sleeper.css({position: 'absolute'});
nofixed = true;
}
@end @*/
$(document).bind('mousemove click keydown', function(){
clearTimeout(timer);
preparetosleep();
if($sleeper.css('display') !== 'none'){
$sleeper.stop(true, true).hide('slow', function(){
if(scroll = $sleeper.data('scroll')){$(window).scrollTop(scroll[1]); $(window).scrollLeft(scroll[0]);}
});
$('html, body').css({width: '', height: '', margin: '', padding: '', overflow: ''});
}
});
function preparetosleep(){
timer = setTimeout(function(){
$sleeper.data('scroll', [$(window).scrollLeft(), $(window).scrollTop()]);
$('html, body').css({width: nofixed? $(window).width() : '100%', height: nofixed? $(window).height(): '100%', margin: 0, padding: 0, overflow: 'hidden'});
$sleeper.stop(true, true).show('slow');
}, 6000);
}
preparetosleep();
});
</script>