Home › Forums › Puzzles › Q; Trigger a bootstrap modal window from inside puzzles by clicking on a object?
- This topic has 4 replies, 2 voices, and was last updated 4 years, 4 months ago by robwu01.
-
AuthorPosts
-
2020-07-19 at 4:33 pm #30353robwu01Participant
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
2020-07-19 at 4:50 pm #30354Yuri KovelenovStaffHi,
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_JavaScript2020-07-20 at 9:45 am #30373robwu01ParticipantHi,
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.
rob
Below sea level: 52.213545 Lat, 4.422061 Long
2020-07-20 at 5:03 pm #30383Yuri KovelenovStaffHi,
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_BasicBe sure to link any javascripts that your framework requires in your_app.html.
2020-07-21 at 8:36 am #30392robwu01ParticipantAh… 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
-
AuthorPosts
- You must be logged in to reply to this topic.