Set trigger on element outside the animated element Interaction

Pinegrow Interactions Add-on
21

@abirana

Is there a way to trigger the hours script at the bottom of the test page in Interactions!?

Thanks!

David

22

I don’t think I understood what you meant. Can you please elaborate more?

1 Like
23

@abirana

I mean that when I click the Interactions trigger the hours script at the bottom is activated so you see if the shop is open or closed. Now it only works on page load. So I wrapped both click events in a function and it works perfect.

I added the function to both click events is this how it’s supposed to be done?:

Now I can see the active day and close or open indication on click.

Is there a better way to do this?

 <a href="#menu-toggle" onclick="startHourScript()" class="btn  float-left text-danger" id="menu-toggle-2" data-pg-ia='{"l":[{"name":"clickCrossClosePanel","trg":"click","t":"$#hours-open-wrap","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"x":"0%"},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":3,"l":{"x":"100%"},"e":"Power1.easeOut"}]}]},"pdef":"true"}]}' data-pg-ia-show>&#10060;</a>

<a href="#menu-toggle" onclick="startHourScript()" class="js-scroll-trigger text-danger" style="font-size: 3em;" id="menu-toggle" data-pg-ia='{"l":[{"name":"slideInFromRight","trg":"click","t":"$#hours-open-wrap","a":{"l":[{"t":"","l":[{"t":"tween","p":0,"d":0,"l":{"x":"100%","autoAlpha":0},"e":"Power1.easeOut"},{"t":"tween","p":0.35,"d":0.76,"l":{"x":"0%","autoAlpha":1},"e":"Power1.easeOut"}]}]},"pdef":"true"}]}'> <i class="fad fa-clock fa-2x"></i> CLICK TO OPEN PANEL</a> 

function startHourScript() {


let currentDate = new Date();
let weekday = [];
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

let currentDay = weekday[currentDate.getDay()];

let currentTimeHours = currentDate.getHours();
currentTimeHours = currentTimeHours < 10 ? "0" + currentTimeHours : currentTimeHours;
let currentTimeMinutes = currentDate.getMinutes();
let timeNow = currentTimeHours + "" + currentTimeMinutes;

let currentDayID = "#" + currentDay; //gets todays weekday and turns it into id
$(currentDayID).toggleClass("today"); //this works at hightlighting today

let openTimeSplit = $(currentDayID).children('.opens').text().split(":");

let openTimeHours = openTimeSplit[0];
openTimeHours = openTimeHours < 10 ? "0" + openTimeHours : openTimeHours;

let openTimeMinutes = openTimeSplit[1];
let openTimex = openTimeSplit[0] + openTimeSplit[1];

let closeTimeSplit = $(currentDayID).children('.closes').text().split(":");

let closeTimeHours = closeTimeSplit[0];
closeTimeHours = closeTimeHours < 10 ? "0" + closeTimeHours : closeTimeHours;

let closeTimeMinutes = closeTimeSplit[1];
let closeTimex = closeTimeSplit[0] + closeTimeSplit[1];

if (timeNow >= openTimex && timeNow <= closeTimex) {
    $(".openorclosed").toggleClass("open");
} else {
    $(".openorclosed").toggleClass("gesloten");
} }