onSizeChanged Method


Inform the control that the size of the container has changed.


JavaScript Syntax
ImageViewer.prototype.onSizeChanged = function() 
TypeScript Syntax
onSizeChanged(): void; 


The viewer hooks to standard HTML Window "sizechanged" or "orientationchange" events depending on the browser being used. This will allow the viewer to recalculate the transformation matrix and cause a render if the size of the control (container div) changes. If however, the size of the control is changed programmatically or due to CSS rules that do not fire "sizechanged" or "orientationchange", then the control will not be updated. You must call OnSizeChanged to trigger the control to update its transformation.

The control size can be obtained by using ControlSize.


Run the demo and click the Example button. The size of the container is reduced by half and OnSizeChanged is called to reflect the new size into the viewer.

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

JavaScript Example
function ImageViewer_OnSizeChanged() { 
   // Create a panel to the top 
   var panel = document.createElement("div"); 
   panel.style.width = "800"; 
   panel.style.height = "800"; 
   // Create the image viewer taking the rest of the form 
   var imageViewerDiv = document.createElement("div"); 
   this._imageViewer = new lt.Controls.ImageViewer(new lt.Controls.ImageViewerCreateOptions(imageViewerDiv)); 
   // Add Pan/Zoom interactive mode 
   // Click and drag to pan, CTRL-Click and drag to zoom in and out 
   this._imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
   var myViewer = this._imageViewer; 
   window.onresize = function (e) { 
      if (myViewer) 


Target Platforms

Help Version 19.0.2017.10.27
Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly