Positioning

[joduffy]

Hi,

I am trying to expand on the themco theme.
I am using raw content element to insert html code into a page.

The html contains code to display its content in fullscreen mode, but I noticed there is a border/padding being displayed when viewed on mobile phones.

I then created a custom class to try and fix this.

.topLeft {
top: 0;
left: 0;

position: fixed;
height: 500px;
width: 100%;
}

While this does allow for full screen and the desired effect.
Any content I place on the page gets overlaid over the top of the raw content block.

Due to its fixed positioning, its stays in place, and the rest of the content gets overlaid when scrolling. It acts almost like a broken parallax image.

Is there a way for me to create the desired position of
top: 0;
left: 0;

To allow full screen without the padding effect. While still enabling the content to scroll up and down the page with the rest of the pages content?

I have tried the other content elements with no luck, as well as setting the page to no container, no header, no footer.

[paul.r]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

[joduffy]

Thanks for getting back to me.
The url is below:

Summary

http://www.tempertantrum.com.au/webvr-pro2/

The html code is from generated from a javascript library called a-frame
https://aframe.io/examples/showcase/helloworld/

The main issue before using fixed positioning was the offset/padding created by the theme for mobile browsers. I believe desktop worked fine.

Now with fixed positioning, the html code from aframe should work on mobile browsers. But the theme content layout is messed up.

I guess the experience would be similar to Sketchfab - where they embedded content within their header:
https://sketchfab.com/

The experience I am after would be to stay on the same page, and the ability to scroll past the model once you are done, to experience the rest of the pages content.

With javascript, the functionality could be extended. So that you can place the model anywhere on the page. Then enter and exit fullscreen mode by detecting user input on buttons.

[rad]

Hi there,

Thanks for writing in.

Have you tried using Revslider to include your iframe? The Revslider has full-width and full-screen feature that can solve this issue. It uses javascript for positioning since you can only position since CSS positioning and sizing is limited. Remember that a child element is only limited to its parent element unless you applied absolute and fixed positioning, but that makes your element floating. Hence, you can only do that through javascript like how Revslider do their full-width and full-screen setup.

Thanks

[joduffy]

Thanks for the direction.

I activated Slider Revolution (I think this is the plugin you meant by Revslider as I couldn’t find any others in the plugin section). But when I do, Pro stops working.
I just get stuck on the

/x/#/content

And it won’t let me edit the page, and add new elements, sections etc
When I deactivate the plugin, it works fine, and I can edit the page again.

[paul.r]

Hi,

Yes that’s the plugin my colleague was referring to.

It sounds like a memory limit issue.

Try adding the code below in your wp-config.php file located at the root directory of your site.

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

[joduffy]

I am still stuck on this page:

[joduffy]

I did change the wp-config.php file

Do I need to reboot or restart anything for it to take affect?

Also with the RevSlider.
Do I simple use an element in pro, then add my html code to a slide within that element?

Thanks for all your help with this.
I really appreciate it.
I have been trying to figure it out for a while before asking on the forum for help.

[lely]

Hi There,

In other cases, that changes might not take effect if memory is limited on your hosting. The code adjusted memory on wordpress only. Try to check in with your hosting provider about your memory allocation.

Regarding revslider, yes that is correct.

[joduffy]

Thank you.

I created a php.ini file and added the necessary changes to it at the root level.
I am now trying to get my html code to work within a slide.

  <head>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene  class="aframebox" embedded>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>

But the it doesn’t seem to be working correctly.
The alignment is off and also the interaction seems to be lost. I am trying to figure out how to fix this.

I have tried not using a class.
Using the following class.
The different settings in the RevSlider.

.aframebox {  
top: 0;
left: 0;

position: fixed;
  
height: 500px;
width: 100%;
}

If I remove the above class. The RevSlider for editing the slides breaks. Even the webPage I am adding the slider to looses the ability to scroll. I believe this is because the

<a-scene

Needs to have the

embedded

property added to allow you to position the player on your page and change its size.

[rad]

Hi there,

Would you mind providing the URL where you’re working on? I tried that code of yours and this is what I got

Uncaught Error: Error: No input element in the page matches .docs-search-sidebar .search-field
    at Function.checkArguments (docsearch.min.js:2)
    at new DocSearch (docsearch.min.js:2)
    at Factory (docsearch.min.js:2)
    at aframe.io/:236

Thanks!

[joduffy]

Hi,

Thats strange.
Here is the url with the problem RevSlider:
http://www.tempertantrum.com.au/webvr-pro3/

Here is the one with the overflow problem (uses fixed positioning):
http://www.tempertantrum.com.au/webvr-pro2/

Here is one that will work on all other platforms - desktop, Android. Except for iOS; using standard theme functionality:
http://www.tempertantrum.com.au/webvr-pro/

I believe this is an issue with the iOS stopping fullscreen on mobile browsers
So I need to figure out a way to allow it go fullscreen.

On A-Frame, here is a link on how to embedded scenes with a working example. It works on everything except iOS - which was where i was doing all my testing from (iphone 7):
https://aframe.io/docs/0.7.0/components/embedded.html

Here is a resource that is suppose to help it remove the barrier of minimal UI that iOS seems to enforce on web browsers by creating a scrollable element. But I am having no luck implementing it. Apparently you need to scroll to remove the header of iOS, but the AFrame is not scrollable so that what the following link is suppose to help with:
https://github.com/protyze/aframe-always-fullscreen-component

Thanks for all your help and suggestions.
It helps me out a lot in figuring this out.

It should just be a simple case of inputting plain html code straight in.

[christopher]

Hi there,

I want to continue the case with this approach:

http://www.tempertantrum.com.au/webvr-pro2/

Please go to the section which you added the Raw element, and click on the customize tab and add the CSS Class of theaframe:

Remove the code with the Fixed positioning and add the CSS code below instead to X > Launch > Options > CSS:

.theaframe.x-section {
    padding: 0 !important;
}

.theaframe.x-section .x-container {
    max-width: 100%;
    width: 100%
}

.aframebox {
    height: 500px;
    width: 100%;
}

Thank you.

[joduffy]

Thank you for the approach.

I duplicated what was done on:
http://www.tempertantrum.com.au/webvr-pro2/

To another page (so we don’t loose that page as a guide):
http://www.tempertantrum.com.au/webvr-pro5/

I tested it out on my iPhone. The only issue is the header is still there.

But there is now no overflow which is awesome.
Feels like such a big step in the right direction.

I have been researching different solutions using iframe and changing document heights. Even adding in scroll elements to get rid of the header and allow fullscreen.

What is nice about the current approach is that it works even when the a-frame is further down the page. I have tested it on desktop, android, and iOS.

http://www.tempertantrum.com.au/webvr-pro6/

The first two (desktop and android) are fine. The issue again comes to iOS. Instead of going into fullscreen. It scrolls to the top of the page in landscape. Which is odd.

Desktop I can get into fullscreen, and exit with the esc key. Which seems to reload the page as my position on the page is scrolled back up to the top.

With android, I have to use the back button, which reloads the page to exit full screen.

So Desktop and Android are workable solutions.
iOS can work to some extent if I move the iPhone further up in the google cardboard to hide the bar - as long as a-frame is at the top of the page and not further down. If a-frame is embedded further down. Trying to enter fullscreen will cause the page to enter landscape and scroll to the top of the page, away from the a-frame content.

I am just lost on how to get rid or work around iOS minimal design on its devices.

[joduffy]

Adding the following in the head of html for the raw content seems to fix it for Safari on iOS but not for Chrome:

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
<meta name="apple-mobile-web-app-capable" content="yes">

So my raw content now looks like this (I am use Christopher solution above with this):

  <head>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
<meta name="apple-mobile-web-app-capable" content="yes">
  </head>
  <body>
    <a-scene class="aframebox" embedded>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>

I did read that apple-mobile-web-app-capable no longer works for some people. So don’t know if this solution is even any good.

Note: This solution will only for for the a-frame with an embedded scene at the top of the page. If you have the scene further down, you still face the same issue with the page being scrolled back to the top of the page and not entering fullscreen mode for the content.

[christopher]

Hi there,

I see what you mean regarding the Fullscreen and getting back. But unfortunately, there is nothing that I can think of more to know how to prevent the scroll. This seems to be a browser behavior and not related to our theme at all.

I suggest that you test the case while a default WordPress theme is used with the standard Wordpress editor and add the iFrame to check the case. I bet you will see the same result.

This is nothing that we can be of a help and you will have a better chance to contact the feature developers to follow up.

Thank you for your understanding, we did try to give suggestion to the limitation of our knowledge about the iFrames, but it seems we lack more detailed info which naturally the developers of the feature will have.

Thank you for your understanding.

[joduffy]

Thats perfectly fine. I understand, and really appreciate all the help everyone has given me in trying to resolve this.

If it is ok with everyone here. I might continue to use this thread to post any results I obtain in the effort to help other people who might be trying to solve this now or in the future.

[Joao]

Hi,

Sure, let us know how it goes

Thanks!