clashing events triggered by same click from separate script functions

Question

I am an absolute biginner in web design that has been thrown at the deep end. In the last two weeks I have managed to put together a custom google map with markers and info windows popping up when clicking a link outside the map.

----- map.js

function triggerClick(id) {
  google.maps.event.trigger(gmarkers[id],"click")
};

function createMarker(latlng, html, id) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map,marker);
    });
    gmarkers[id] = marker;
}

Now I am trying to combine it with another script that implements an animated parallax scrolling that moves the page from clicked link to the map, using another script that uses jquery. This also works but the marker+infowindow pop-up fails to happen. What I need is the marker+infowindow to pop after the scrolling has ended.

----- scripts.js

jQuery(document).ready(function ($) {

    $(window).stellar();

    var chartLink = $('.chart').find('li');
    slide = $('.slide');
    htmlbody = $('html,body');

    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }
    chartLink.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

});

The HTML links I am trying to target are:

----- index.html

<ul class="chart">
<li>
  <a data-slide="3" href="javascript:triggerClick('bond')">Bond Street</a></li>
  <li><a data-slide="3" href="javascript:triggerClick('barbican')">Barbican</a>
</li>
</ul>

As far as I understand the same click event is triggering two different events at the same time, one from the triggerClick function and the other from the goToByScroll function.

I have looked for solutions for days and tried many things, specially callback(), but dealing with separate scripts is beyond my fried brain. Can someone give me a hand.

Thanks!

Answer 1

You're on the right track with using a callback. You need to trigger the marker click after the scrolling has completed. If the issue your facing is your scripts are hiding functions from one another, create a global application object and place the functions needed in there. You'll also want to remove the javascript from the href attributes and replace them with another data attribute with the corresponding id.

<ul class="chart">
  <li><a data-slide="3" data-id="bond">Bond Street</a></li>
  <li><a data-slide="3" data-id="barbican">Barbican</a></li>
</ul>

Create a application wide object to store functions

window.myapp = {};

Add the triggerClick function to this object

myapp.triggerClick = function(){...};

Now call this function after the animation has completed by using a callback

function goToByScroll(data) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + data.slide + '"]').offset().top
    }, 2000, 'easeInOutQuint', function() {
        myapp.triggerClick(data.id);
    });
}
chartLink.click(function (e) {
    e.preventDefault();
    goToByScroll($(this.data()); // use jquery to grab all the data attributes
});