Handling HTML Events with jQuery Code

by vigneshchennai74 Updated: Mar 21, 2023

Guide Kit

The "Handling HTML Events with jQuery" code demonstrates how to use jQuery to handle HTML events, such as clicking a button or hovering over an element. The code includes the definition of the filterSelection() function, which filters a list of items based on a user's selection, and the animateIt() function, which animates the appearance of elements in the list.

Regarding benefits, jQuery is a popular and widely-used JavaScript library that makes it easier to manipulate HTML documents, handle events, create animations, and perform other common web development tasks. By using jQuery, developers can write code more quickly and with fewer errors than using pure JavaScript. This can lead to more efficient and effective web development, which can benefit users who rely on websites and applications for various purposes.

The fadeTo() method is used in the animateIt() function to animate the appearance of elements in the list. This method gradually changes the opacity of an element over a specified period, creating a smooth and visually appealing animation. The removeClass() and addClass() methods are used in the click event listener to change the active class of a button based on the user's selection, which helps visually indicate the user's current selection.

Overall, the "Handling HTML Events with jQuery" code provides an example of how jQuery can handle events and manipulate HTML elements, highlighting some of the benefits of using jQuery in web development.

Preview of the output that you will get on running this code from your IDE

Code

In this solution we have used Jquery Methods.

jQuery on click event logic

HTMLLines of Code : 114License : Strong Copyleft (CC BY-SA 4.0)

function animateIt(obj, fadeTo) {
  if (fadeTo == 0) {
    return $(obj).css('display', 'none');
  }
  $(obj).fadeTo('slow', fadeTo);
}

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = $(".filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    animateIt(x[i], 0);
    //RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1)
      animateIt(x[i], 0.5);
    //AddClass(x[i], "show"); 

  }
}

function animateIt(obj, fadeTo) {
  if (fadeTo == 0) {
    return $(obj).css('display', 'none');
  }
  $(obj).fadeTo('slow', fadeTo);
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn-navi");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
.container {
  width: 1170px;
  margin: 0 auto;
}

.filterDiv {
  float: left;
  width: 30%;
  border: 1px solid lightgray;
  background-color: #e3e3e3;
  padding: 15px;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn-navi {
  font-size: 16px;
  border: 1px solid #ed1b2d;
  background-color: white;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
}

.btn-navi:hover {
  background-color: #ed1b2d;
  border: 1px solid #ed1b2d;
  color: white;
}

.btn-navi.active {
  border: 1px solid #ed1b2d;
  background-color: #ed1b2d;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="myBtnContainer">
    <button class="btn-navi active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn-navi" onclick="filterSelection('cars')"> Cars</button>
    <button class="btn-navi" onclick="filterSelection('animals')"> Animals</button>
    <button class="btn-navi" onclick="filterSelection('fruits')"> Fruits</button>
    <button class="btn-navi" onclick="filterSelection('colors')"> Colors</button>
  </div>

  <div class="container">
    <div class="filterDiv cars">BMW</div>
    <div class="filterDiv colors fruits">Orange</div>
    <div class="filterDiv cars">Volvo</div>
    <div class="filterDiv colors">Red</div>
    <div class="filterDiv cars animals">Mustang</div>
    <div class="filterDiv colors">Blue</div>
    <div class="filterDiv animals">Cat</div>
    <div class="filterDiv animals">Dog</div>
    <div class="filterDiv fruits">Melon</div>
    <div class="filterDiv fruits animals">Kiwi</div>
    <div class="filterDiv fruits">Banana</div>
    <div class="filterDiv fruits">Lemon</div>
    <div class="filterDiv animals">Cow</div>
  </div>
</div>

Instructions

Download and install VS Code on your desktop.
Open VS Code and create a new file in the editor.
Copy the code snippet that you want to run, using the "Copy" button or by selecting the text and using the copy command (Ctrl+C on Windows/Linux or Cmd+C on Mac).
Paste the code into your file in VS Code, and save the file with a meaningful name and the appropriate file extension (.html for HTML, .js for JavaScript, etc.).
To run the code, open the file in VS Code and click the "Run" button in the top menu, or use the keyboard shortcut Ctrl+Alt+N (on Windows and Linux) or Cmd+Alt+N (on Mac). The output of your code will appear in the VS Code output console.

I hope you found this useful. I have added the version information in the following sections.

I found this code snippet by searching for in kandi jQuery on click event logic. You can try any such use case!

Environment Tested

Tested this solution in the following versions. Be mindful of changes when working with other versions.

Visual Studio Code Version 1.76.0

The "Handling HTML Events with jQuery" code provides an example of how jQuery can be used to handle events and manipulate HTML elements, and highlights some of the benefits of using jQuery in web development. This process also facilities an easy-to-use, hassle-free method to create a hands-on working version of code which would help us to do Handle event in html using Jquery...

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Handling HTML Events with jQuery Code

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow