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; Trigger a bootstrap modal window from inside puzzles by clicking on a object?

Home Forums Puzzles Q; Trigger a bootstrap modal window from inside puzzles by clicking on a object?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #30353
    robwu01
    Participant

    Hi,

    I have a bunch of bootstrap/jquery modal windows that will open up and show some videos.
    This all works fine with the buttons set to a href and calling the bootstrap code for the modals. So:

        <a href="#video01" div="divvid01" class="btn btn-lg btn-primary" data-toggle="modal">saturn v</a>
        <div id="video01" visibility="visible" class="modal">
          etc...</div>

    What I would like to have is a way to click an object inside verge to trigger that href, so the modal opens up.

    I was looking in the puzzles if something like this is possible, but so far I couldn’t really figure it out.
    I did find a javascript option in Misc, but I’m not entirely sure how that would work.

    Any tips on doing the above would be great, it’s our last hurdle.

    cheers!

    rob

    Below sea level: 52.213545 Lat, 4.422061 Long

    #30354

    Hi,

    if you’re able to trigger these modals with JS, then doing the same with Puzzles is straightforward:
    https://www.soft8soft.com/docs/manual/en/introduction/Using-JavaScript.html#From_Puzzles_to_JavaScript

    Chief 3D Verger | LinkedIn | Twitter

    #30373
    robwu01
    Participant

    Hi,

    Thanks for confirming our thoughts on this, but find it hard to wrap my head around this. Not really that JavaScript savvy tbh.

    This is the js script code that will trigger the modal to pop up inside our webpage when clicked on a href:

    $(document).ready(function(){
        /* Get iframe video url variable */
        var url = $("#vid_id1").attr('src');
            /* Assign empty url value to stop the video playing on hide */
        $("#video01").on('hide.bs.modal', function(){
            $("#vid_id1").attr('src', '');
        });
            /* Assign the initially stored url back when modal is displayed again */
        $("#video01").on('show.bs.modal', function(){
            $("#vid_id1").attr('src', url);
        });
    });

    If I could just use the above somehow in my appname.js with the
    function prepareExternalInterface(app) {} setup, to trigger the modal popup when clicked on the object inside Verge.

    I can get the object click to work on a console log message, like in the example on that page, but am stuck atm how to add the code above with the function.

    Or a way how to link a click event to the href from the object, so the javascript will be triggered from the index.hmtl page. As it would like clicking on the weblink manually.

    Really would appreciate some more info on this, as I am completely stuck here. :-( :unsure:

    rob

    Below sea level: 52.213545 Lat, 4.422061 Long

    #30383

    Hi,

    you can just add this code inside the runCode() function as shown here:
    https://www.soft8soft.com/docs/manual/en/introduction/Using-JavaScript.html#Method_1_Basic

    Be sure to link any javascripts that your framework requires in your_app.html.

    Chief 3D Verger | LinkedIn | Twitter

    #30392
    robwu01
    Participant

    Ah… I see.

    Thanks for the reply, will have a look at the runCode() function too. :)
    Again, still getting used to javascript, bootstrap & some other coding things here…

    rob

    Below sea level: 52.213545 Lat, 4.422061 Long

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