Continuous Multipage Scrolling in HTML5

Most image viewing applications and controls are designed for viewing a single image at a time. However some images and documents, such as TIFF and PDF, have multiple pages. Since these documents are typically full of text, it is very natural to keep reading on to the next page without the need to press a button to load the next page. We have received several requests for this feature and one of our developer support agents has created an demo showing how to implement continuous multipage scrolling with our HTML5 viewer and RESTful Web Services.

The basic idea works similarly to an image slider or carousel you might see on a homepage. There is an outer container which, when scrolled to a specified location, will asynchronously create an additional HTML5 Viewer for the next page and allow you to keep scrolling until you have reached the end of the document. Below is the JavaScript snippet which modifies the DOM with jQuery and calls the LEADTOOLS Raster Web service to retrieve the image.

window.addEventListener("load", function()	{
   $("#loadFileButton").bind("click",function(sender,e)	{
      
      documentUri = $("#fileURLTextBox").val();					
      pagesLoaded = 1;
      numPages = 0;									
      $("#outerContainer").empty();
      
      LoadInfo(documentUri);			   			   
      LoadAndAddPage(documentUri,pagesLoaded++);				
   
      $("#outerContainer").scroll(function(e)	{
         var scrollPos = $(this).scrollTop();
         
         if(scrollPos > DIV_WIDTH * (pagesLoaded-1) - DIV_WIDTH && pagesLoaded <= numPages)	
            LoadAndAddPage(documentUri,pagesLoaded++);
      });
      
   });

}, false);

function LoadAndAddPage(filePath,pageNum)	{
   var URLPath = serviceUrl + "/Raster.svc/Load?uri=" + filePath + "&page=" + pageNum;
   
   var pageDiv = document.createElement("div");
   $(pageDiv).attr("id","page"+pagesLoaded);
   $(pageDiv).addClass("imageViewer");
   $("#outerContainer").append(pageDiv);
   
   var pageOptions = new Lt.Controls.ImageViewerCreateOptions("page"+pagesLoaded,"page"+pagesLoaded);
   var newViewer = new Lt.Controls.ImageViewer(pageOptions);

   newViewer.add_imageChanged( function(sender,e)	{
      newViewer.set_sizeMode(Leadtools.Controls.ImageViewerSizeMode.fitWidth);		
      $(pageDiv).height(DIV_WIDTH/pageWidth * pageHeight);
   });

   newViewer.set_imageUrl(URLPath);			
}

To download the full example, check out the original forum post.

Keep the feature and example requests coming! Our technical support agents are well trained programmers and absolutely love to take on any challenges you come up with and help you get a jump start on your application.