Tips for resolving the strange behavior on a webpage with multiple active buttons labeled "portfolio"

I'm currently dealing with an issue regarding the behavior of a particular webpage that is quite unusual. I have provided a link to the Github page where this issue is occurring. Interestingly, the problem seems to be resolved when I remove the nav tag, however, it is essential for the functionality I require.

Upon further investigation by deleting the nav element from the developer console, I noticed that the nav tag is impacting the section below, specifically the "workshop_intro".

For reference, here is the link to the Github page:

Github repository: https://github.com/sarang13579/expt

<section class="workshop_intro">
<div class="container py-2">
  <h1 class="py-4"><strong>Gallery</strong></h1>
  <p>Cut and Engraved products range</p>

  <h2>PORTFOLIO</h2>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button>
    <button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button>
    <button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button>
    <button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button>
  </div>

My expectation is that the buttons in the portfolio section "workshop_intro" highlight one at a time without the need to remove the nav tag.

Answer №1

There might be an issue with another HTML element containing the "active" class. When using the query

document.getElementsByClassName("active");
, it retrieves the li element from the nav bar

<li class="nav-item active">
    <a class="nav-link px-5" href="index.html">Home</a>
</li>

To target the button more precisely, you can utilize

document.querySelector(".btn.active");

Presented below is the functional code

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.querySelector(".btn.active");
 current.classList.remove("active");
    this.classList.add("active");
  });
}
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: white;
}



body, html {
font-family: 'Open Sans', sans-serif;
height: 100%;
overflow-x:hidden;
scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}

.row{
margin: 0;
}



/*HEADER*/

/* Header Section */
.intro {
display: table;
width: 100%;
min-height: 88vh;
padding: 0;
background: url(../images/tooplate_middle_alt2.png) top center no-repeat;
background-color: #f6f6f6;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

.intro .fa {
font-size: 94px;
margin-bottom: 40px;
color: #fff;
}
.intro h3 {
color: #fff;
font-size: 45px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
text-transform: uppercase;
}
.intro p {
color: #fff;
font-size: 22px;
margin-top: 20px;
line-...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Design a progress bar that advances in increments of at least two and up to a maximum of

My task involves managing a simple list. const [progressBar, setProgressBar] = useState([ { isActive: false, name: "step1" }, { isActive: false, name: "step2" }, { isActive: false, name: "step3" }, { isActive ...

What is the best way to implement validation for a textfield to prevent submission if a negative value is entered?

I am working with a text field of type number and I have successfully set a minimum value of 0 to ensure that negative values are not accepted. However, I have encountered an issue where I am unable to delete the 0 once it is entered. Is there a way to fix ...

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Allow me to provide a clearer explanation here: Imagine an element placed on a webpage with a margin of 10% from the left side. When the size of the page is adjusted, the margin on the left decreases accordingly - for example, 10% from 1400px - 140px, and ...

Looping through data and converting it into a JSON format can

Can anyone help me figure out how to work through this JSON data using VUE? I'm having trouble accessing keys that v-for can't seem to reach: [ { "Lavandería": { "id": 1, "name": "Lavandería", "i ...

Is it feasible to utilize HTML files to fetch information from a MYSQL database by utilizing PHP on the server?

I am trying to set up a form in an HTML file called index.html that includes some AJAX code linking to PHP for MySQL database connectivity. The idea is for clients to be able to insert, delete, and edit data in the database by filling out the form on index ...

Inability to assign a value to an @input within an Angular project

I recently started using Angular and I'm currently trying to declare an input. Specifically, I need the input to be a number rather than a string in an object within an array. However, I'm encountering difficulties and I can't figure out wha ...

Is there a way for me to access the information on a web page?

Currently, I am attempting to extract web page data as a string in order to parse it. Unfortunately, I have not been able to find any suitable methods in qwebview, qurl, and other resources. Can anyone offer assistance? My environment is Linux, C++, and Qt ...

Transform the snake code by incorporating a visual image as the face of the serpent

Can someone help me change the snake's face to an image instead of a color fill in this code? And how can I add arrows for mobile compatibility? (function() { // Insert JS code here })(); // Insert CSS code here This code snippet includes functi ...

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

CSS: element misplaced at the top instead of the bottom where it belongs

The component with the ID of "#bottom-nav" actually appears at the top. I just designed this on CSS-board, so feel free to review the HTML and CSS code Take a look at it on CSS-desk here It is positioned at the very end of the page and includes a ' ...

New design for UI grid: eliminate sorting menu and right-align column headers

I came across a question similar to this one My goal is to eliminate the dropdown menu from the column headers and align the text of the headers to the right. .ui-grid-header-cell { text-align: right; } However, my current attempts result in the disap ...

Guide on how to implement user authentication using React hooks and react-router

My goal is to authenticate users on each route change using react-router-dom and react hooks. When a user navigates to a route, the system should make an API call to authenticate the user. This is necessary because I am utilizing react-redux, and the Redu ...

Is there a way to disable auto rotation on a website when accessed from a mobile phone?

My current solution involves the following code: @media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { html{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(- ...

Combine similar JSON objects into arrays

I'm working with a dataset returned by a library, and it's structured like this: var givenData = [{"fName": "john"}, {"fName": "mike"}, {"country": "USA"}] My goal is to group the "fName" values together and add '[]' to achieve the fo ...

The terminal does not recognize the nodemon command

My goal is to automate server reloads using nodemon. I have successfully installed it locally and set the start command as nodemon app.js with this code: "scripts": { "start": "nodemon app.js" } Initially, everything was running smoothly. However, ...

Issue with preventdefault() function in Internet Explorer 8

I've encountered a problem while working on a page that heavily utilizes ajax. Everything seems to be functioning well across different browsers, except for one final step that is broken in IE8 and below. You can view the issue on this demo page: To ...

Establishing a connection between HTML and MySQL database

I've been researching how to create a login system on my HTML page. From what I've learned, it seems I need to use an intermediate script to allow my HTML access to the database. So, I've created a PHP page that verifies the username and pas ...

What is the best way to ensure the height and width of a Next.js image matches the dimensions of the original image?

Currently, I am working on setting up an image gallery with a layout similar to Masonry. This layout involves multiple columns, all with the same width, adjusting based on the viewport width. The height of each item in the gallery is flexible, depending on ...

Creating visually appealing Highcharts.js visualizations for both mobile and desktop devices

Has anyone had success implementing a responsive design with Highcharts to ensure charts look great on both mobile and desktop screens? By default, Highcharts do adjust when resizing the browser window, but sometimes the X-axis can become cluttered by tic ...

Utilizing the 'container' property in a React.js React-Bootstrap modal

How can I open a modal within a designated container using the native property "container"? Whenever I specify the class name of the container element, I encounter an error TypeError: Cannot use 'in' operator to search for 'current' in ...