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.

Ok, I Agree

fullscreenbutton – customizing needs better explaining

Home › Forums › Programming › fullscreenbutton – customizing needs better explaining

Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • Author
    Posts
  • 2020-08-11 at 12:26 pm #31373
    abin
    Customer

    So really, I break on customized fullscreen-button.
    This is my setup:
    code in html: 

     <div class="html-embed w-embed w-iframe"><iframe src="syncopate.html" width="100%" height="100%" frameborder="0"></iframe></div>
      <div id="fullscreen-button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
       </div>

    code in .css

    .html-embed {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.fullscreen-button {
  position: static;
  z-index: 3;
  display: block;
  width: 40px;
  height: 40px;
  top: 10px;
  right: 10px;
  float: right;
  background-color: transparent;
  background-image: url('../media/fullscreen-open.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

    but the button dosn’t respond and not expanding iframe. Could you Yuri or somebody look what I did wrong?

    2020-08-11 at 1:22 pm #31379
    Yuri Kovelenov
    Staff

    Hi Abin,

    Try specifying the allowfullscreen property for your iframe element.

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-11 at 2:00 pm #31389
    abin
    Customer

    No, isnt working. I just don’t understand it. You say Yuri, that we need to build UI.html+ initialization of fullscreen-button to make other html elements visible during fullscreen.
    I just to try to understand why is it so complicated to implement the own button. I found here such a nice project:
    without extra extern files

    There are buttons, own fullscreen button, all is visible during fullscreen. There is no iframe, no extra css or html files.
    I can’t understand. ANd I messed actually completely my files, because I try and try and cry :)

    2020-08-11 at 2:15 pm #31392
    Yuri Kovelenov
    Staff

    Sure you can go this way and just override the style of the default fullscreen button. Here are some hints:
    https://www.soft8soft.com/docs/manual/en/introduction/Styling-Verge3D-Apps.html#fullscreen_button

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-11 at 3:01 pm #31395
    abin
    Customer

    but overriding style isnt enough, then after that I go fullscreen and other buttons are gone again. Why is it like this?

    2020-08-12 at 5:16 am #31415
    abin
    Customer

    Yuri, I removed all additional css+html and build this button via puzzle. It is also not working, why? I don’t understand. Is it bug in verge3d?

    2020-08-12 at 5:42 am #31418
    abin
    Customer

    I wish to have a template for that. I created now the new empty project and the first I did, is the fullscreen button. It is not working!

    2020-08-12 at 7:12 am #31429
    Yuri Kovelenov
    Staff
    abin wrote:

    I go fullscreen and other buttons are gone again

    try adding the additional button at the same level as the full screen button itself.

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-12 at 7:38 am #31430
    abin
    Customer

    I don’t understand what you mean with the same level ?? What is the level of the fullscreen-button? Is the fullscreen button in industrial-robot on the same level? Or is another “level”. What is the meaning of the level?

    2020-08-12 at 7:46 am #31433
    abin
    Customer

    I created this, could you please look what I did wrong?
    fullscreen-template

    2020-08-12 at 8:04 am #31436
    Yuri Kovelenov
    Staff
    abin wrote:

    what you mean with the same level

    html hierarchy

    Your link works for me. I had to remove display none and when I enter full screen mode the second button does not hide.

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-12 at 8:14 am #31437
    abin
    Customer

    “I had to remove display none and when I enter full screen mode the second button does not hide”

    Where did you remove that “display none”? I don’t see that rule. And I am totally schocked, that it is working for you, it gives me hope

    2020-08-12 at 8:21 am #31439
    Yuri Kovelenov
    Staff

    I don’t know may be it’s cache?

    Attachments:
    You must be logged in to view attached files.

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-12 at 8:22 am #31441
    Yuri Kovelenov
    Staff

    and yes, your screenshot button is not inside the container element

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-12 at 8:22 am #31442
    abin
    Customer

    aha, wait, now slowly I understand…i hope..I go for new test now, thank you as long, Yuri

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • You must be logged in to reply to this topic.