Resizing does not work correctly when placed in a hidden layer.

[Visnetje]

Dear WebRotate Support,

I am currently implementing a 360 product viewer project on a website using the official Wordpress plugin.
I seem to get almost everything working using the shortcode (see below).
However, I have noticed the following behavior:

The website has multiple pages (placed in separate <article> elements) per HTML page, and is using JavaScript to initially show only the first page and hide the other pages.
When I place the 360 product viewer on a page that is initially hidden (display: none, the 360 product viewer uses a certain default width/height set to 100x100px. This means the 360 product viewer is not correctly resizing after I show the correct page layer (setting the <article> element to "display: block;").

I have discovered that this behavior is fixed when resizing the browser window, in other words: when the resize handler is fired. Or when the 360 product viewer is finished loading when the page is visible.

See [...edited out - work in progress...]

(click the grey/white arrow button to navigate to the next page, where the 360 product viewer has been placed)

PS I have used the following shortcode:

[wr360embed name="NewProject1" config="/wp-content/uploads/webrotate-360-viewer/NewProject1/NewProject1.xml"]

I have defined the default width to "100%" and height to "450px" in the plugin settings.
The same behavior occurs when using these values in the shortcode.

My question:
Is it possible to fire a certain handler in my JavaScript code to resize the 360 product viewer(s) on the visible page?

 

[WebSupport]

Hi! Thanks for the details and apologies for the late reply..

Yes, there's a known issue related to initializing the viewer while an html block that it's being attached to is hidden via display:none during viewer initialization.

The problem is with jQuery in that it doesn't want (or know how) to return correct width and height of an html element that is hidden via display:none.

So I suggest to rather initialize the viewer when your sliding page becomes visible. This would require some minor coding as our WordPress plugin out-of-the-box doesn't expect a part of page or post where it's embedded to be not visible (with display:none) during viewer initialization.

If you would like to keep the existing shortcode wiring for this, the easiest would be to change our plugin's webrotate360.php and have the viewer to load not on jQuery.ready as it's now, but on some other notification from your code (i.e when you slide to that block and make it visible). This would be a small change under wr360embed_shortcode_hanlder.

The other option is to not use the shortcodes and just hook up the viewer in your code similar to this (more on this in our user guide starting on page 26 here):

function yourCallbackWhenSlidingBlockGetsVisible()
{
	// Some state flag to return if this was called before on the same page.
	if (_viewerInitialized == true)
		return;
		
	_viewerInitialized = true;
	
	jQuery('#wr360PlayerId').rotator({
		configFileURL  : "your-viewer-config-xml-url",
		graphicsPath   : "/wp-content/plugins/webrotate-360-product-viewer/imagerotator/html/img/thin",
		licenseFileURL : "your-license-file-url"
	});
}

Does this help?

 

[Visnetje]

Solution 1 (modifying webrotate360.php) will break the ability to update the plugin without any worries, since the modification will be lost and overwritten after an update of the Wordpress plugin. So that's not an option.

Solution 2 (not using the shortcode) would complicate usage from the Wordpress editor and will cause my client (non-technical) to have to use JavaScript code.

The function/method/handler I need is currently already being executed at window.onresize, since resizing the window fixes the problem instantly. It would just require to be executed once from the function that is currently being used to show the layer (set display:block.

Would it be possible to make the function that is currently executed at window.onresize available as a public function or API function?

I suppose this solution shouldn't be too complicated and could help solve this issue for other users as well!

 

[WebSupport]

Couple of quick thoughts:

1) Can you try to trigger a window resize event on showing the slide which would likely hit all required handlers and would be a quick fix while keeping everything intact?

window.dispatchEvent(new Event("resize")); or jQuery(window).trigger("resize");


2) The API we expose is not integrated in the WordPress shortcodes (yet ) and there's no good way for us to give you a global handle to the API as these are jQuery objects and there can be more than one on the same page, each having its own API handle. We can still do this (i.e add a shotcode parameter for you to be able to pass the name of your callback function (in the shortcode!) to receive an API object for each shortcode, but you would need to wait a week or so for us to release something like this and I'm not sure your client would like to deal with the function names in the shortcode.. but let us know if this will work!

 

[Visnetje]

This solutions works for me:

jQuery(window).trigger("resize");

Thanks a lot for helping me out!