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

Puzzle to interact with webflow Tabs or Slider

Home › Forums › General Questions › Puzzle to interact with webflow Tabs or Slider

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • 2020-08-27 at 11:15 am #32047
    johngrigni
    Customer

    I’m building a demo using webflow for the html wrapper, and I wanted to use their ‘Tabs’ or ‘Slider’ component, but I want to be able to trigger a specific tab or from the 3D model with puzzles.

    The slider in particular has an animated transition that I would lose by just swapping out inner-html or hiding and displaying different data.

    2020-08-27 at 11:45 am #32053
    Yuri Kovelenov
    Staff

    Hi John,

    In principle, it is possible to trigger/activate any HTML-based element through Puzzles or at least JavaScript.

    Please feel free to share a sample project so that we give you more elaborate advice.

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-27 at 12:23 pm #32054
    johngrigni
    Customer

    I just uploaded it to:
    https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:d4c42d0559/applications/Carboline/index.html

    2020-08-27 at 12:48 pm #32063
    Yuri Kovelenov
    Staff

    the app looks great! :good:

    You can open the console with F12, switch to elements and inspect your tabs.

    This reveals that these tabs has ids: w-tabs-0-data-w-tab-0, w-tabs-0-data-w-tab-1 and w-tabs-0-data-w-tab-2, for the first, second and third tabs respectively.

    As such, you can trigger a tab by executing this code:

    document.getElementById("w-tabs-0-data-w-tab-1").click()

    in which you should provide the corresponding id.

    In the preview build of Verge3D 3.4 we introduced the Script puzzle, so you can trigger a tab right in the Puzzles. :yes:

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

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-27 at 12:51 pm #32066
    johngrigni
    Customer

    Thank you! You are consistently excellent!

    When will 3.4 be available?

    2020-08-27 at 12:53 pm #32068
    Yuri Kovelenov
    Staff

    no problem! here you go: https://www.soft8soft.com/topic/verge3d-3-4-pre1-available/

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-27 at 1:10 pm #32070
    Yuri Kovelenov
    Staff

    update: since the Puzzles are executed in iframe, while your UI resides in the outer .html file, the code should look a bit different:

    parent.document.getElementById("w-tabs-0-data-w-tab-1").click()

    Chief 3D Verger | LinkedIn | Twitter

    2020-08-27 at 1:11 pm #32071
    johngrigni
    Customer

    Thanks again for the quick response!

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