Q; preloader & UI webpage

This topic has 5 replies, 5 voices, and was last updated 3 years, 6 months ago by robwu01.

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

Author

Posts
2020-07-09 at 1:48 pm #29894

robwu01
Participant

Hi,

I created a basic html page, that loads the project file in a iframe as in numerous examples from verge3D.
As in the examples, I also have some HTML code that sets the preloader image & loader bar.
My tweaks on the logo & loader bar colors are all in the project .css file, and is working fine. This according to the Çustomizing Preloader’ section in the documentation.

What I don’t seem to get working this way, is how te hide the UI buttons etc. at start. When I load the index.html, I see the loader -and- the UI buttons etc. at the same time, before the project page is loaded.

It’s very distracting, and I looked at the examples html/code & puzzles, but cannot figure it out for now. In the examples there’s a distinct separation between the two pages while loading.

cheers for any replies,

rob

Below sea level: 52.213545 Lat, 4.422061 Long

2020-07-13 at 4:45 pm #30060

Alexander Kovelenov
Staff

Hi,
If you need your elements to be hidden, simply hide them with CSS and then unhide upon your app loaded.

Soft8Soft Tech Chief
X | FB | LinkedIn

2020-08-07 at 7:16 pm #31281

doehlma
Customer

Hello robwu01,

can you please tell me how and with which program you created your individual

preloader image & loader bar ?

2021-06-06 at 5:20 pm #41901

Johnson
Customer

Want to bump this because I came across this issue as well.

How is this achieved via puzzles? Can this be done inside Verge 3D?

2021-06-07 at 6:51 am #41914

Mikhail Luzyanin
Staff

There’s some old tutorial on the youtube channel.

Co-founder and lead graphics specialist at Soft8Soft.

2021-06-07 at 8:21 am #41917

robwu01
Participant

It’s fairly simple, if you know where to look ;)

In the starter html page, add a display tag to the button div, so it won’t show on the initial load of the page:
<div id="button_home" class="btn_color" style="display:none;">Home</div>

Then create a puzzle that will ‘flip’ the ‘none’ tag to ‘block’ for the div id, on loading the webgl data.
This can be done with the HTML ‘set style’ puzzle piece.
So:
set style “display” – to “block” – for elem “button_home” – in parent doc:”checked”.

Hope this helps!

rob

Below sea level: 52.213545 Lat, 4.422061 Long
Author

Posts