Introduction
JQuery is one of the most popular JavaScript Frameworks around (for good reason), it gives you the ability to access and manipulate the HTML DOM with a lot more ease than your normal JavaScript.
In our BuildVu output, we have endeavoured not use any JavaScript frameworks so that our output doesn’t have any additional dependencies (it also means we can avoid any licensing issues that can arise from using third-party libraries/frameworks).
Compatibility with Frameworks and CMS
However, we have no problem with you using our output with your own web frameworks or Content Management Systems and even have a mode designed specifically for that called No Viewer mode.
In this blog post, I am going to show you a very simple and quick example of a jQuery viewer I built using the no-viewer mode and the steps I took to create it.
Running the Converter
I am going to use our online converter to create the HTML output I desire, but you can use the standalone Java Jar file to do the same thing or our webservice.
No Viewer option
I’ll be using one of our go-to example files that you will of probably seen in several of our other blog posts.
All I did on the online converter was choose the option labelled “Only Pages No Viewer” and clicked “Upload & Convert”. I could have customised the options further, but for now I will leave all other options on default.
Upon completing the conversion process, I am given several actions I can do; the two we are concerned with are “View Online” and “Download Zip File”.
If you click on “View Online” and then view the source code for the converted page, you will see that the
tag is absent from the HTML Markup. This is intentional and means that you converted it in the no viewer mode.Interesting Note: Older versions of Internet Explorer (IE8 and below) may render this page incorrectly, which is due to the missing
tag; it causes them to render the page in the Quirks document mode, which results in some bad formatting. You can change the document mode if you experience this by going into tools and clicking on Developer Tools (or by pressing F12) and selecting the correct Document Mode in the Developer Tools (normally Internet Explorer 8 Standards).Once you’ve confirmed that the files have been converted using the correct settings, you can download them in a zip file using the link labelled “Download Zip File”.
Building the jQuery Viewer
Preparing the Files
With the files downloaded we can then unzip them into the directory we will be using for our jQuery Viewer. Each page of your original file should have a corresponding html file named after it’s page number.
Creating the Index File
Now we can create the index.html that will contain our jQuery Viewer. The basic structure I used has a container div, used mainly to centre all the content in the jQuery web application, a set of form elements, used to control the viewer and another div where we load whatever page we want to see into.
Choosing a jQuery Version
I used jQuery 1.10.2 as it has support for Internet Explorer 8, but you can use any version you like. My CSS and JavaScript were inlined; I did this to keep everything in one place. (In a more complex viewer or web app, you’d want to keep your CSS in a separate CSS file and your JavaScript in its own .js file).
Below is the basic example code:
<!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>
Understanding the Code
The JavaScript/jQuery code makes use of the hash change event to load the corresponding page and should be very simple to follow, I will briefly explain what it does in the order it is written:
The loadPage function uses an ajax call to load the content of our previously converted pages into the div with the id “page”, it also updates widths, and runs our font spacing adjustment code if needed. (This code is within a script tag in our converted pages).
The updatePageNum function changes the contents of several tags to reflect the current page of the document. It also changes the hash of the page, triggering the hash change event described below.
Upon document ready we bind the correct events to the buttons on the page (updatePageNum being called from each) and the event that is called upon changing the hash of the page.
Any further questions on the code do not hesitate to ask.
The resulting web app is quite responsive, has support for the forward and back buttons in the web browser, and can be easily adapted and improved.
Try BuildVu for yourself from free.
Top comments (0)