Mobile page scroll problem

[izanagi]

Hello

on smartphone, i have the problem that i can not scroll the page when the Webrotate Div comes in middle view. My webrotate is black and my website background black too. The user cant see the div from webrotate and have problem to scroll the page.

My wish, that touch controll is inactive. Only after the user click one time on the webrotate, the touch controll goes active... like fullscreen... a second doubleklick/touch makes inactive again (or a X button)

I tried the fullscreen mode. But its buggy, after klick fullscreen the screen is black and nothing load. second try to open fullscreen the webroate shows, but freeze. no control.
And other Problem when you use "disable touch control" the "double tab" open fullscreen function not work.


I wish scroll the page on mobile and only interactive with webroate when user want it.

 

[izanagi]

For first, i have build my own little solution.

#outbox{
	border: 5px dotted transparent;
}

#content
{
    width: 100%;
    height: 560px;
	position: relative;
	margin: 0 auto;
   
}
#blocking{
	width: 100%;
    height: 100%;
	position: absolute;
	color: white;
	z-index: 15;
	text-align: center;
	padding-top: 20px;
	font-family: verdana;
}
#clickme{
	width: 100%;
	height: 30px;
	position: absolute;
	color: white;
	z-index: 15;
	text-align: center;
	padding-top: 20px;
	font-family: verdana;
	display: none;
}
#closeit{
	width: 40px;
	height: 30px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 17;
	color: #ff8400;
	font-size: 30px;
	cursor: pointer;
	border: 1px solid #313131;
	background-color: #222;
	text-align: center;
	padding-bottom: 8px;
	font-family: verdana;
	display: none;
   
}
<script language="javascript" type="text/javascript">

jQuery(document).ready(function(){

    jQuery('#wr360PlayerId').rotator({
        ...........................
    });

	document.getElementById("blocking").onclick = function() {activecontrol()};
	document.getElementById("closeit").onclick = function() {closecontrol()};
	//var list = document.getElementsByTagName("div")[0];//option for fade off all content
	
	function activecontrol() {
	  document.getElementById("blocking").style.display = "none";
	   document.getElementById("outbox").style.border = "5px dotted rgb(215, 142, 0)";
	   document.getElementById("clickme").style.display = "block";
	   document.getElementById("closeit").style.display = "block";
	   //list.style.opacity = "0.3";//option for fade off all content
		//document.getElementById("content").style.opacity = "1";//option for fade off all content
	   
	}
	function closecontrol() {
	  document.getElementById("blocking").style.display = "block";
	  document.getElementById("outbox").style.border = "5px dotted transparent";
	  document.getElementById("clickme").style.display = "none";
	  document.getElementById("closeit").style.display = "none";
	  //list.style.opacity = "1";//option for fade off all content
	}

});

</script>

<div id="outbox">

<div id="content">
<div id="blocking">1. CLICK ME!</div>
<div id="clickme">2. ROTATE ME! (or close)</div>
<div id="closeit">X</div>
<div id="wr360PlayerId" class="wr360_player" style="background-color:#000000;"></div>
</div>

</div>

 

[WebSupport]

Hi couple of things!

1) Not sure if you are using PRO version or not but the full-screen feature is not available in the free one.

2) We do have something like this built-in where we place a customizable button inside the view such that the 360 product view doesn't fully load (hence can't interfere with the scroll obviously) until user clicks on the button and/or mouse hovers over the 360 product view or clicks inside the view. Here's an example:

https://www.webrotate360.com/examples/browse-all-examples/multi-row-3d-car-model.aspx

To activate this feature, please see the attached screenshot and you can customize it further in CSS.

 

[izanagi]

OKEY now i understand. Yes, i used the free version.
Thank you for your example. It is ok, but not perfect. I tell you why.

1. i want to play auto(endless) after site loading
2. the inside activate button is good, its allow the touch scrolling on smartphone... BUT when you first click on it (activate it) then you cant go out. you must find a "empty" place on display to scroll the page forward. In my case, all is black :lol: the Rotatebox and the site background. User cant see what is rotatebox and whats not. And my rotatebox is 100% width. So left/right you cant scroll down. And my rotatebox is 500px height. When you see it in center from display, you have problem to scroll site down from top or bottom. The user rotate the product only and he is captive.

One solution will be, to disable the vertical rotating and allow horizontal only.
But then, you have no rows more then 1.

Now, i use my solution. Invisible layer with one click action. then the webrotate is active. Plus a border color to the Box, user can see where is the webroate div and how large. And with a close button, the webrotate is inactive again. user can scroll the page

 

[WebSupport]

Ah I didn't realize you were using a multi-row 360 product view which is indeed not covered fully with my solution above.

I like your approach! Thanks for sharing

 

[izanagi]

Today i saw on Explorer and chrome, they give out an error "404 license.lic not exist" in the directory of the webrotate.
I delete the line >>licenseFileURL: 'license.lic',<< in code, but still same error message. How we can deactivate this license check ?
Or anything i have dont see about free license.lic ?

 

[WebSupport]

Please just create an empty file with the same name (license.lic) at the URL where it gives you 404 or replace licenseFileURL: 'license.lic' that you have removed with licenseCode: 'free' :ugeek: