by Brian Chaikelson

adobe-logo-160x160
Brian Chaikelson

Table of contents

Created

8 September 2014

Prerequisite knowledge
 
  • The reader must have an understanding of the Embedded Web Viewer (also called the Adobe Content Viewer for Web), which is similar to the DPS Web Viewer. The Embedded Web Viewer is embedded in the pages hosted on an organization’s Web servers. In addition, CSS styling, HTML coding, and JavaScript knowledge are required to extend or customize the solution.
User level: All
 
Required Adobe products (retail)
 
Additional required other products (third-party/labs/open source)
 
Sample files
 
By downloading software from the Adobe website you agree to the terms of our license agreement. Please read it before downloading.
 

 
Introduction

The Adobe Content Viewer for Web (also called Web viewer) empowers organizations to embed the DPS Desktop Web Viewer in their own website. The Web viewer also allows organizations to integrate it into their brand experience as described in the devnet article Embedding web viewer content in your web page. The Web viewer is used to display content to readers consuming content on desktop browser versions of Chrome, Firefox, IE, and Safari. It includes support for most interactive overlays. A related viewer, called the article viewer, renders a single article at a time on iPad browsers.
 
DPS customers would like to know how to adjust the size of the article content to fit in the browser window as the reader resizes it. This is especially useful for readers with lower resolution screens because without scaling down the image, the bottom part of the page would not fit on the screen. This article describes how to ensure that the entire page and navigation footer always appear, regardless of the browser window size. In this article, we illustrate the embedded Web viewer’s default behavior. In addition, we also provide details on its modified behavior once it is resizable, and the relevant HTML, JavaScript, and CSS code.
 
Note: Browsers which do not support CSS transformations, such as IE8 or IE9, cannot take advantage of this capability.
 

 
Default Behavior

A DPS article in portrait mode is typically 768x1024 pixels. If the height of the screen is less than 1164 pixels for portrait articles (1024 pixels + pixels for the Web viewer’s top/bottom padding + pixels for the legal footer), or 893 for landscape articles (similar math), only a portion of the page will be visible. In Figure 1, note how neither yellow tiles (not to be confused with the orange tiles in the top right) nor a navigation footer are visible.
 
Figure 1. Article with content below the fold

Figure 1. Article with content below the fold

 

In Figure 2, the yellow tiles and navigation footer appear because the reader has scrolled down the article page.
 
Figure 2. Scrolling down to see the bottom of the article

Figure 2. Scrolling down to see the bottom of the article

 

Sizing down the browser window hides more of the page as the article does not rescale, as illiustated in Figure 3.
 
Figure 3. Shrinking the size of the browser window hides even more of the page content

Figure 3. Shrinking the size of the browser window hides even more of the page content

 

 
Modified Behavior

With the code attached to this article, the height of a DPS article will always resize to fit the screen, with the width scaling proportionally.
 
Figure 4 shows the modified article taking up the entire height of the browser window. Notice how all the article content is above the fold, even though its full height contains more pixels than the screen resolution.
 
Figure 4. Article with content scaled down so it’s all above the fold

Figure 4. Article with content scaled down so it’s all above the fold

 

In Figure 5, note that as the browser window height is shrunken, the article resizes, with its height scaled proportionally to its width.
 
Figure 5. Content resizes as the browser window is shrunken

Figure 5. Content resizes as the browser window is shrunken

 

Similar modified behavior is observed for articles in landscape mode.
 

 
Code Description

Download rwv_sample.zip from this article and examine its file contents. The instructions below describe the differences between the code in the devnet article Embedding web viewer content in your web page (which you should be familiar with) and the sample code packaged with this article.
 
  1. Index.html is the file that includes the embedded viewer, as described in the aforementioned devnet article. In its header code, note the reference to the zooming-utils.js library which is included in the same directory.
<script src="zooming-utils.js"></script>
  1. In index.html, note the inclusion of a reference to the jQuery JavaScript library, which is a commonly used set of JavaScript features.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  1. In index.html, a reference is made to the Modernizr JavaScript library, which can be found in the vendor directory of the attached sample code. The Modernizr JavaScript library is used by the zooming-utils library to check for minimum browser requirements.
<script src="vendor/modernizr-2.7.1.min.js"></script>
  1. In index.html, a div is added around the main container div where the iframe is injected:
<div class="scalingWrapper"> <div id="mainContainer"></div> </div>
  1. At the end of index.html, the zooming-utils JavaScript library is initialized:
if (!navigator.userAgent.match(/iPad/i)) { var z = new ZoomingUtils('.scalingWrapper', '#iFrame'); z.startResizeListening(); }
The first argument of ZoomingUtils is the div that wraps the container that will scale. The second argument is the iframe element that will be scaled, which is referenced in the frame creation code below:
 
var bridge = adobeDPS.frameService.createFrame({ boolIsFullScreen : false, parentDiv : 'mainContainer', wrapperClasses : 'uniqueFrame', iframeID : 'iFrame', ...
Note the conditional logic around the ZoomingUtils initialization, which is necessary for the embedded article viewer on a tablet device. Without it, there would be interference with the interactive elements as they shrink in size.
 
  1. In styles.css (in the css directory), the following CSS is included for the div described in step 4 that wraps the main container div:
.scalingWrapper { -moz-transform-origin: top center; -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; }
As the browser window is resized, the ZoomingUtils library listens for changes and adjusts the embedded viewer accordingly.
 

 
Where to go from here

By using this code, DPS folios can be embedded in your hosted pages and also adapt to your responsive UI designs. It ensures that regardless of the size of the browser window, the full frame appears on the screen at all times.
 
Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.