HTML elements are displayed on top of Puzzles Editor

Tagged: Html, puzzles

This topic has 0 replies, 1 voice, and was last updated 1 year, 10 months ago by Pascal.

Viewing 1 post (of 1 total)

Author

Posts

2022-06-14 at 9:35 am #53027

Pascal

Customer

Ubuntu 20.04.4 LTS, 5.18.2-051802-generic

Verge3D 3.9.1

In this case, I have 3 HTML elements that get display on top of the Puzzles Editor. I would expect all these elements not be be displayed in the Puzzles Editor.
A workaround is to temporarily lower the z-index of the elements, so they get hidden behind the editor.

The icons on top (plus, minus and sound) are generated via Puzzles. The menu on the left is added manually to the .html page of the app. The chat-icon comes from a script at the end of the body.

<!DOCTYPE html>
<!-- __V3D_PUZZLES__ - enable Puzzles button in the App Manager -->
<!-- __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated -->
<html lang="en">
<head>
  <title>Verge3D Web Interactive</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

  <!-- Search Engines -->
  <meta name="description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the WebGL and HTML5 technologies.">
  <!-- Twitter -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Verge3D Web Interactive">
  <meta name="twitter:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the WebGL and HTML5 technologies.">
  <meta name="twitter:image:src" content="https://cdn.soft8soft.com/images/player_socials.jpg">
  <!-- Open Graph -->
  <meta property="og:title" content="Verge3D Web Interactive">
  <meta property="og:description" content="Interactive 3D Web application made with Verge3D. Immerse yourself in amazing graphics experience offered by state-of-the WebGL and HTML5 technologies.">
  <meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">
  <meta property="og:type" content="website">

  <meta name="generator" content="Verge3D 3.9.1">

  <!-- favicons -->
  <link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
  <link rel="manifest" href="media/manifest.json">
  <link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">

  <link href="bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="bootstrap-5.2.0-beta1-dist/js/bootstrap.bundle.min.js"></script>
  <script src="v3d.js"></script>
  <script src="jquery-3.6.0.min.js"></script>
  <script src="Exibition-Hall.js"></script>
  <script>
    var $mouseX = 0, $mouseY = 0;
    var $xp = 0, $yp =0;

    $(document).mousemove(function(e){
      $mouseX = e.pageX;
      $mouseY = e.pageY;
    });

    var $loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    $xp += (($mouseX - $xp)/4);
    $yp += (($mouseY - $yp +32)/4);
    $("#moving_div").css({left:$xp +'px', top:$yp +'px'});
    }, 30);
  </script>
  <link rel="stylesheet" type="text/css" href="Exibition-Hall.css">
</head>

<body>

<!-- Top Navigation  -->
  <div class="dropdown">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Standpunkt auswählen:
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button id="lookat-lesetafeln" class="dropdown-item btn btn-sm" type="button">Infowand</button></li>
    <li><button id="lookat-kommunikation"class="dropdown-item btn btn-sm" type="button">Kommunikation</button></li>
    <li><button id="lookat-videowand" class="dropdown-item btn btn-sm" type="button">Videowand</button></li>
    <li><button id="lookat-drohne" class="dropdown-item btn btn-sm" type="button">Drohne</button></li>
    <li><button id="lookat-stuhl" class="dropdown-item btn btn-sm" type="button">Stuhl</button></li>
    <li><button id="lookat-hottub" class="dropdown-item btn btn-sm" type="button">Hottub</button></li>
  </ul>
  </div>

  <!-- Tooltip Container  -->
  <div id="moving_div">TIPP</div>

  <!-- Verge3D -->
  <div id="v3d-container">
    <!-- <div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div> -->
  </div>
  <script src="https://123.chat/embedded/website/0574a6c8-4c8d-4798-8550-cfe942061c13.js" async></script>
</body>

</html>