Can JavaScript be used to simultaneously activate two events?

Question

Can JavaScript be used to simultaneously activate two events?

Is there a way to simultaneously trigger two events by clicking the "Past Locations" link on the right side navigation? I want it to jump to the bottom of the page to the "Past Locations" section and also display a default image map (Indianapolis map) at the same time.

Currently, it successfully jumps to the bottom of the page, but the image map disappears - leaving the placeholder empty.

In the HTML code snippet below, the other two working links route to image maps:

<li class="j_linkHover">
  <a href="#mapCO-asp" class="j_linkThumb">Aspen, CO</a>
  <p class="j_accordion-panel"><span class="j_dateLocation">Central Regions<br>May 29 - June 3</span></p>
</li>

<li class="j_linkHover">
  <a href="#mapOR" class="j_linkThumb">Salem, OR</a>
  <p class="j_accordion-panel"><span class="j_dateLocation">Oregon School for the Deaf,<br>Washington School for the Deaf, <br> Non-Profit Community Event<br>June 3 - 6</span></p>
</li>

<li  class="j_linkHover">
  <a href="javascript: document.body.scrollIntoView(false);" id="location-color" class="j_linkThumb  is-active">Past Locations</a> <--- jumps to the bottom, but cannot route image map at the same time
</li>

The JavaScript function provided below routes image maps in the placeholder:

$(document).ready(function(){

  //Default Action
  $(".mapActive").css({'display':'none'});
  $("ul.j_linkLocation li#mapIN").addClass("active").show(); //Activate first tab
  $(".mapActive#mapIN").show(); //Show first tab content

  //On Click Event
  $("ul.j_linkLocation li").click(function() {
    $("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".mapActive").css({'display':'none'}); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn('fast'); //Fade in the active content
    return false;
  });

});

https://i.sstatic.net/pBF8W.jpg https://i.sstatic.net/4wJzi.png

javascript jquery html css

Answer 1

Answer №1

To make your code more efficient, encapsulate the repeated functionality in a function:

function updateTabContent (elem) {
  $("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
    $(elem).addClass("active"); //Add "active" class to selected tab
    $(".mapActive").css({'display':'none'}); //Hide all tab content
    var activeTab = $(elem).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn('fast'); //Fade in the active content
}

Your revised code will look like this:

//On Click Event
  $("ul.j_linkLocation li").click(function() {
    updateTabContent($(this));
  });

Next, add a click listener for the list item:

$('#location-color').parent('li').on('click', function() {
  //the first event
  $('body').scrollIntoView(false);

  //call the function to update tab content
  updateTabContent($('ul.j_linkLocation li:first'));
});

Answer 2

To make your code more efficient, encapsulate the repeated functionality in a function:

function updateTabContent (elem) {
  $("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
    $(elem).addClass("active"); //Add "active" class to selected tab
    $(".mapActive").css({'display':'none'}); //Hide all tab content
    var activeTab = $(elem).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn('fast'); //Fade in the active content
}

Your revised code will look like this:

//On Click Event
  $("ul.j_linkLocation li").click(function() {
    updateTabContent($(this));
  });

Next, add a click listener for the list item:

$('#location-color').parent('li').on('click', function() {
  //the first event
  $('body').scrollIntoView(false);

  //call the function to update tab content
  updateTabContent($('ul.j_linkLocation li:first'));
});

Answer 3

Answer №2

Absolutely! Utilizing jQuery, a JavaScript library, allows you to assign multiple event handlers to an element.

$([element selector]).on([events... separated by spaces], [Delegated selector], function([arg]){
  // Code to execute
});

For a more specific example (helpful for understanding the syntax):

$("#myDiv").on("click mouseenter mouseleave tap touchstart touchend", ".innerBox", function(event){
  // Code to execute
});

Explore the jQuery event handler documentation.

Also, check out this comprehensive list of events from QuirksMode.

Further study on event delegation is recommended...

Answer 4

Absolutely! Utilizing jQuery, a JavaScript library, allows you to assign multiple event handlers to an element.

$([element selector]).on([events... separated by spaces], [Delegated selector], function([arg]){
  // Code to execute
});

For a more specific example (helpful for understanding the syntax):

$("#myDiv").on("click mouseenter mouseleave tap touchstart touchend", ".innerBox", function(event){
  // Code to execute
});

Explore the jQuery event handler documentation.

Also, check out this comprehensive list of events from QuirksMode.

Further study on event delegation is recommended...

Can JavaScript be used to simultaneously activate two events?

Answer №1

Answer №2

Similar questions

Error encountered while compiling a method within a .vue component due to a syntax issue

Exploring JavaScript and accessing objects

What is the best way to pass an array as a parameter in Angular?

Tips for preserving the encoded value of a variable in base64?

Tips on showing binary information as images using extjs 4

Sending data to a Higher-Order Component

JavaScript tutorial: Strategies for loading specific sections of a webpage initially

Trigger the reactive helper again when there is a change in the $scope

Javascript's ReferenceError occasionally acts inconsistently when using Firefox's scratchpad

How to effectively utilize Python to compare HTML files

Notifying with Jquery Alert after looping through routes using foreach loop

When my viewport's size is less than 998px, a blank space appears

Errors encountered by the Chrome extension

Having trouble properly implementing variable updates when creating a multi-theme website

Unable to remove the "d-none" class using Bootstrap 4

What is the best way to stop div animations when clicking with jQuery?

What could be the reason behind receiving an "undefined" message when attempting to access db.collection in the provided code snippet?

Refresh the form using ajax

How does bodyParser determine the specific view to populate in req.body?

The administrator user assigns a user value in the authentication context, but that value remains hidden from the component where it was originally set