Created
August 20, 2013 16:02
-
-
Save LyndonArmitage/6283461 to your computer and use it in GitHub Desktop.
The Index.html for a jQuery based PDF Viewer that makes use of the PDF to HTML5 converter made by http://www.idrsolutions.com/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>jQuery Viewer Example</title> | |
<style type="text/css"> | |
body { | |
background: #0000FF; | |
} | |
#container { | |
margin-left: auto; | |
margin-right: auto; | |
width: 800px; | |
} | |
#controls { | |
/*position: absolute;*/ | |
width: 99%; | |
height: 50px; | |
border: black solid 1px; | |
overflow: hidden; | |
z-index: 500; | |
background: #FF0000; | |
} | |
#controls h1 { | |
font-size: 18px; | |
font-weight: bold; | |
text-align: center; | |
} | |
#page { | |
background: white; | |
border: black solid 1px; | |
display: inline-block; | |
} | |
#pageNum { | |
text-align: center; | |
margin: auto 0; | |
color: white; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<form id='controls'> | |
<input style="float: left;" type="button" name="Prev" value="Prev Page" id='prevBtn' /> | |
<input style="float: right;" type="button" name="Next" value="Next Page" id='nextBtn' /> | |
<h1>Page <span class="pageNum">1</span> of <span class="documentName">awjune</span></h1> | |
</form> | |
<div id='page' style=""></div> | |
<div id="pageNum">Page <span class="pageNum">1</span></div> | |
</div> | |
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> | |
<script type="text/javascript"> | |
var documentName = "awjune"; | |
var page = 1; | |
var maxPages = 39; | |
function loadPage() { | |
// First we check the file exists by getting it's header. | |
$.ajax({ | |
// Files are contained in the same directory as this file because things can get complicated with fonts not loading | |
url : page + ".html", | |
type : "HEAD", | |
error : function() { | |
// File not found, display an error message? | |
$("#page").html("<div style='text-align: center'><b>Error:</b> File not found.</div>"); | |
}, | |
success : function() { | |
// File is there let's load it into the element | |
$("#page").load(page + ".html", function() { | |
$("#controls").css("width", $("#page").width()); | |
$("#pageNum").css("width", $("#page").width()); | |
// Run our font adjustment code if it exists for the given page | |
if(window["fontAdjustments" + page] !== undefined) { | |
window["fontAdjustments" + page](); | |
} | |
}); | |
} | |
}); | |
} | |
function updatePageNum() { | |
$(".pageNum").html(page); | |
$(".documentName").html(documentName); | |
window.location.hash = page.toString(); // this will trigger a window.hashchange event | |
} | |
$(document).ready(function() { | |
$("#nextBtn").click(function() { | |
page = page+1 <= maxPages ? page+1 : maxPages; | |
updatePageNum(); | |
}); | |
$("#prevBtn").click(function() { | |
page = page-1 > 0 ? page-1 : 1; | |
updatePageNum(); | |
}); | |
$(window).on("hashchange", function() { | |
if(window.location.hash != "" && window.location.hash != page) { | |
var newPage = parseInt(window.location.hash.replace("#", "")); | |
if(isNaN(newPage) || newPage < 1) { | |
window.location.hash = "1"; | |
} | |
else if(newPage > maxPages) { | |
window.location.hash = maxPages.toString(); | |
} | |
else { | |
page = newPage; | |
loadPage(); | |
} | |
} | |
}); | |
loadPage(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment