We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Q; preloader & UI webpage

Home Forums Programming Q; preloader & UI webpage

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.2 Lat, 4.4 Long

    #30060

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

    Verge3D’s Tech Chief
    FB | Twitter | VK

    #31281
    doehlma
    Customer

    Hello robwu01,

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

    preloader image & loader bar ?

    #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?

    #41914

    There’s some old tutorial on the youtube channel.

    Co-founder and lead graphics specialist at Soft8Soft.

    #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.2 Lat, 4.4 Long

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.