Mobile page scroll problem

CSS styling, controls, custom look and feel, custom packaging and deployment.
izanagi
Posts: 4
Joined: Sat Sep 14, 2019 2:52 pm
Contact:

Mobile page scroll problem

Postby izanagi » Mon Sep 16, 2019 5:50 am

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
Posts: 4
Joined: Sat Sep 14, 2019 2:52 pm
Contact:

Re: Mobile page scroll problem

Postby izanagi » Mon Sep 16, 2019 7:18 am

For first, i have build my own little solution.

Code: Select all

#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>
Last edited by izanagi on Mon Sep 16, 2019 2:52 pm, edited 1 time in total.

WebSupport
Posts: 980
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Mobile page scroll problem

Postby WebSupport » Mon Sep 16, 2019 2:13 pm

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/b ... model.aspx

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

2019-09-16_15-12-30.png

izanagi
Posts: 4
Joined: Sat Sep 14, 2019 2:52 pm
Contact:

Re: Mobile page scroll problem

Postby izanagi » Mon Sep 16, 2019 2:48 pm

:o OKEY :D 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
Posts: 980
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Mobile page scroll problem

Postby WebSupport » Mon Sep 16, 2019 2:56 pm

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 8-)

izanagi
Posts: 4
Joined: Sat Sep 14, 2019 2:52 pm
Contact:

Re: Mobile page scroll problem

Postby izanagi » Tue Sep 17, 2019 1:17 pm

:D
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
Posts: 980
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Mobile page scroll problem

Postby WebSupport » Wed Sep 18, 2019 6:40 am

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:


Return to “Viewer Development and Customizations”

cron