The viewer doesn’t display at all (or at wrong size) when inside a Javascript based tab or ajax page transitions

If you attempt to embed the PDF viewer within a tab that is controlled by Javascript, you may find that it does not display at the correct size when the tab is opened. If you resize the browser window slightly, it should jump to the correct size. This is because the size was calculated when the tab was closed, and wasn’t updated for the size of the opened tab.

You could modify the tab opening code to force a window resize event after the tab is open:

window.dispatchEvent(new Event('resize'));Code language: JavaScript (javascript)

If you have AJAX-style ‘smooth’ page transitions, perhaps provided by your theme, then you may find that the PDF viewer only displays at all when you load the page directly. Clicking on to the PDF’s page from a different page may miss out on the initialization code of the plugin.

You might need to ensure that all relevant plugin Javascript files are loaded, and then fire this event to initialize the plugin after the new page content has been loaded:

jQuery('.pdfemb-viewer').pdfEmbedder();Code language: JavaScript (javascript)

If that doesn’t work, the following bit of code can be tried (edit the div.tab-title to whatever class the tab is actually labeled with):

jQuery(document).ready(function($){
	$(document).on('click', 'div.tab-title',function() {
		if (pdfemb_trans.cmap_url === "undefined") {
			var cmapURLis = '';
		}else{
			var cmapURLis = pdfemb_trans.cmap_url;
		}
		$('.pdfemb-viewer').pdfEmbedder(cmapURLis);
	});
});
Code language: JavaScript (javascript)

To be honest, we don’t really feel that ‘smooth page transitions’ make sense in a WordPress environment where different plugins will assume a particular initialization order, so our preference would be to disable these transitions. Please understand that we can’t necessarily support custom coding solutions like these, but hopefully these notes will help developers.