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.

Show HTML element at click

Home Forums Puzzles Show HTML element at click

Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #59365
    rasmusroerbaek
    Participant

    Hi :bye:
    Sorry for being a complete newb – still can’t figure this out.
    Can anyone explain to me (like I’m five):
    How do I get a div element to show up at click on an 3D element?
    (being hidden at init, then shown at click)

    Please describe all steps – this is the only thing holding me back from building a website w Verge.
    Any help appreciated.
    Best, R

    #59367
    kdv
    Participant

    I tried setting my CSS visibility to hidden, but
    can’t figure out how to unhide the element at click.

    Depends on what you used in CSS to hide the element.

    If you used visibility: hidden, then you should set visibility: visible

    If you used display: none, then you should set display: block

    Note that popup must be the element id, not its class name.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #59378
    Pandern
    Customer

    Just for fun, as I was already talking to chatGPT, I asked it your question, and I am amazed how helpful this AI tool will be. Not to discard the awesome help that kdv77kdv offer here on the forums.

    Can you explain to me (like I’m five):
    How do I get a div element to show up at click on an 3D element in verge3d?
    (being hidden at init, then shown at click)

    Please describe all steps – this is the only thing holding me back from building a website with Verge3d.

    Sure! Here’s how you can make a div element show up when you click on a 3D element in Verge3D:

    First, you will need to create a div element in your HTML code. You can do this by using the <div> tag. Make sure to give your div element an id so you can reference it in your JavaScript code.

    Next, you will need to create a 3D element in your Verge3D scene. You can do this using the create_object function in your JavaScript code.

    Once you have both the div element and the 3D element, you will need to use JavaScript to hide the div element when the page loads. You can do this by setting the display property of the div element to none.

    Now, you will need to add an event listener to the 3D element that listens for a “click” event. When the 3D element is clicked, the event listener will be triggered and will run a function that shows the div element. You can do this by setting the display property of the div element to block.

    Finally, you will need to make sure that the div element is positioned properly on the page so that it is visible when it is shown. You can do this using the position property of the div element.

    I hope this helps! Let me know if you have any questions.

    ———————
    Can you give me an example?

    Certainly! Here is an example of how you can make a div element show up when you click on a 3D element in Verge3D:

    <!-- HTML code -->
    <div id="myDiv">This is my div element!</div>
    
    <!-- JavaScript code -->
    // Create a 3D element
    var my3DElement = create_object("box");
    
    // Hide the div element when the page loads
    document.getElementById("myDiv").style.display = "none";
    
    // Add an event listener to the 3D element that listens for a "click" event
    my3DElement.addEventListener("click", function() {
      // Show the div element when the 3D element is clicked
      document.getElementById("myDiv").style.display = "block";
    });

    I hope this helps! Let me know if you have any questions.

    ————
    How do i do this with puzzles in verge3d

    To show a div element when you click on a 3D element using puzzles in Verge3D, you can follow these steps:

    First, you will need to create a div element in your HTML code. You can do this by using the <div> tag. Make sure to give your div element an id so you can reference it in your JavaScript code.

    Next, you will need to create a 3D element in your Verge3D scene. You can do this using the create_object function in your JavaScript code.

    In the Verge3D puzzle editor, create a “Click” puzzle and connect it to the 3D element you created in step 2.

    In the puzzle editor, create a “Set Property” puzzle and connect it to the “Click” puzzle. Set the property you want to change (in this case, the display property of the div element) and the value you want to set it to (in this case, block).

    In the puzzle editor, create a “Run JS” puzzle and connect it to the “Click” puzzle. In the JavaScript code for this puzzle, use the document.getElementById function to get a reference to the div element, and set its display property to none. This will hide the div element when the page loads.

    Finally, you will need to make sure that the div element is positioned properly on the page so that it is visible when it is shown. You can do this using the position property of the div element.

    I hope this helps! Let me know if you have any questions.

    #59380
    Pandern
    Customer

    I am a novice when it comes to html and css, but this is normally how I do it:

    In the html code I add style="display: none;" to the DIV like this:
    <div class="popup-div" id="popup" style="display: none;">

    And then a set style puzzle like kdv77kdv did over here to change it to “block”

    #59399
    rasmusroerbaek
    Participant

    You guys make it seem so easy :unsure:
    What am I doing wrong – with a new project:

    First (for testing):
    Setting display to: block,
    block
    I’ll get this:
    shown

    So far, so good. Then – setting display: none
    none
    I’ll get this:
    hidden
    Cool – then setting the puzzle:
    puzzle

    Save, then run the HTML from app manager.
    Clicking the cube and nothing shows up. :cry:
    Am I missing something?

    #59402
    kdv
    Participant

    share your files here in zip. this new project.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #59403
    rasmusroerbaek
    Participant

    Here you go – thanks for your time kdv!

    Attachments:
    You must be logged in to view attached files.
    #59405
    kdv
    Participant

    you have a wrong iframe src in Home.html

    replace https://v3d.net/e1b with Html_test.html

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #59407
    rasmusroerbaek
    Participant

    can u elaborate on this kdv? how can I fix it?

    #59408
    rasmusroerbaek
    Participant

    whoops, did not see the last part, I’ll try it

    #59409
    rasmusroerbaek
    Participant

    It’s working!!! thank u so much. :yahoo: :heart:

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