Q: fullscreen button & html elements

This topic has 4 replies, 3 voices, and was last updated 4 years, 4 months ago by Yuri Kovelenov.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
2020-05-03 at 2:44 pm #27122
robwu01
Participant
It seems a lot of people having issues with this, and I’m struggling atm as well.

When we keep this simple, and look at the basic cube tutorial at the bottom of the page: Developer_Approach. We can make a index.html file with two buttons, that can show or hide the cube inside the iframe scene.

But when you go into full-screen, the buttons disappear. According to the manual here: init_fullscreen you can define a separate html element as button to toggle between states.

Here’s the confusion starting…..

I can turn off the default button within the ‘configure application’ puzzle, and add a html button in my code like this:
```
<body>
    <iframe id="my_iframe" src="my_project.html"></iframe>

    <div id="hide_button">Hide</div>
    <div id="show_button">Show</div>
    <div id="fs_button" class="fs_image"></div>
</body>
```
With this, I don’t have a full-screen button yet to show for, as the default is turned off and the html button is not defined.

As I don’t quite get the references in the ‘init fullscreen’ puzzle example, can someone please show a example for the css code for the fs_button?
How do you define the fs_button, regarding to the fs_image in the example?

Cheers for any answers, as this is very annoying to say the least. I’m also getting back into html/css after a long time, so a bit rusty as well ;)

rob

p.s. Sorry for the long posts, but I try to be as accurate as possible on these questions.

Below sea level: 52.213545 Lat, 4.422061 Long
2020-05-05 at 4:43 am #27170

Yuri Kovelenov
Staff

Hi,

you can just copy/reuse the CSS code for the other 2 buttons for your fullscreen button.
Just change its position so that it does not overlap.

Chief 3D Verger | LinkedIn | Twitter

2020-08-11 at 8:04 am #31359

abin
Customer

Hi Yuri & robwu,
I am also on that point to initialize fullscreen button and I have no success. I just want to ask (after reviewing files from our examples), that some projects have in fullscreen puzzle “set attr: src” for setting image, and some of them “set style: background-image”. What is a difference and mining for my fullscreen button? I made screenshot of both puzzles together to show you which attributes I mean.

2020-08-11 at 9:05 am #31365

abin
Customer

Additional, I was experimenting with both puzzles, it doesn’t influence anything in behaviour of the fullscreen button. In both situations the fullscreen-button dosn’t change its image on toggle. This is what I do not understand completely.

2020-08-11 at 1:25 pm #31381

Yuri Kovelenov
Staff

let’s merge this into https://www.soft8soft.com/topic/fullscreenbutton-customizing-needs-better-explaining/#post-31379

Chief 3D Verger | LinkedIn | Twitter
Author

Posts