Numerous overlay triggers

Whenever I try to click on an image to activate the overlay, it seems to only work for one specific id and not for any others.

Here is the code snippet:

<div id="trigger-overlay">
   <div class="portfolio web" data-cat="web">
    <div id="trigger-overlay" class="portfolio-wrapper">            
        <div class="trans">
          <div class="item-info">
            <i class="fa fa-camera"></i>
            <h3>Bookworm</h3>
            <span>Books</span>
          </div>
        </div>
      </div>
   </div>
</div>

The trigger-overlay is the main issue here. You can also check out this fiddle for reference: http://jsfiddle.net/NLPrF/

Although the first image does trigger the overlay, the second one does not. Any suggestions on why this behavior is happening?

Thank you

Answer №1

I am unable to make changes to those external scripts, but I do have a workaround for you. The script currently references the images using the selector

$("#trigger-overlay").click(function(e)....

According to the HTML DOM spec, each ID should be unique. To work around this, you can change all the div's to have the class "trigger-overlay"

class="trigger-overlay"

Then, update the javascript code to reference the class instead of the ID

$(".trigger-overlay").click(function(e).....

By using the "." selector for classes, the click function will work for any element matching the selector. The "." selector denotes a class name.

After reviewing the actual javascript, I suggest implementing the following changes

New code for demo1.js can be found below

(function() {
    var triggerBttn = document.getElementsByClassName( 'trigger-overlay' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
        }
    }
    for (x=0;x<triggerBttn.length;x++) {
        triggerBttn[x].addEventListener( 'click', toggleOverlay );
    }
    closeBttn.addEventListener( 'click', toggleOverlay );
})();

http://jsfiddle.net/a9be3/ here is the JSfiddle link for a working demo

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

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

Retrieve the content outside of the quotation marks in an HTML document through web scraping

I need help extracting specific information from a web page using Python. The data I want is not within quotation marks, as shown below: nummber = page_soup.findAll("span", {"id": "referenznummer"}) nummber # result [<span ...

Issue encountered with Tailwind Color Classes not functioning correctly when triggered by a button click within NextJS and React Vite framework

Recently, I've developed a component showcasing the "Text Gradient" effect in Tailwind + React. The component comprises of 4 select dropdowns and a "randomize" button. Upon clicking the button or selecting an option from the dropdowns, the changes are ...

A Python program that creates an HTML webpage

I am currently working on a Python script that, when launched on localhost with Apache, will generate an HTML page. Here is the script (test.py): #!/usr/bin/python # -*- coding: utf-8 -*- import cgitb cgitb.enable() import cgi form = cgi.FieldStorage() ...

Dynamically uploading an HTML file using AJAX

My webpage has a feature that dynamically creates HTML with drop down elements. Additionally, there is a "create File" button on the page. The goal is for this button to trigger an AJAX POST request and upload the dynamic page created with drag and drops a ...

What could be causing the malfunction of the Facebook iframe like button?

Even though it functions offline, there seems to be an issue with its performance online. Here is the code that was used: <iframe src="http://www.facebook.com/plugins/like.php?app_id=125925834166578&amp;href=http%3A%2F%2Fwww.facebook.com%2FBaradei. ...

The Faux-Dynamic News Feed on a stationary website

As I work on revamping my employer's static website, it has become clear that a news section needs to be integrated. The site is being built using the Bootstrap 3.0 framework. My plan is to implement the following strategy: I aim to have a JavaScrip ...

Ensure that the method is passed a negative number -1 instead of the literal number 1 from an HTML error

This is an example of my HTML code: <button (mousedown)="onMouseDown($event, -1)"></button> Here is the TypeScript code for handling the mouse down event: onMouseDown(e: MouseEvent, direction: 1|-1) { this.compute.emit(direction); ...

Problems Arising with HTML Form Functionality

After creating an HTML form, I encountered an issue where upon submission, it prompts me to open G Mail or Outlook in order to send the email. Although the correct email address is populated, I wish for the email to be sent without having to open any ext ...

What is the reason for the request to accept */* when the browser is seeking a JavaScript file?

The html source appears as follows: <script type="text/javascript" language="JavaScript" src="myscript.js"></script> Upon debugging the http request using Fiddler, it is evident that the browser (Chrome) sends a GET request for myscript.js wi ...

Struggling to get .parent().toggleClass to function properly

Check out this fiddle: https://jsfiddle.net/qxnk05ua/2/ I'm trying to get the background color to change when I click the button, but it's not working. Can you help me figure out why? This is the Javascript code I'm using: $(document).rea ...

Enhance Your List with Icon Decorations

Is it feasible to utilize a sprite image in place of the default bullet for an ul list? Is this achievable? ...

Tips for Changing Background Color Beyond Body Tag

When using my demo below on Safari for iOS and scrolling up and down, you'll notice that you can scroll outside of the body until removing your finger from the touchscreen. The background color outside of the body is white. Is there a way to change th ...

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

I am struggling with making my navbar links the same height and keeping their text vertically centered, especially when they wrap onto multiple lines on a narrow viewport. While I have achieved vertical centering, I am facing difficulties in ensuring that ...

Tips for minimizing padding and margin in a Bootstrap template

I recently downloaded the page from "https://getbootstrap.com/docs/5.3/examples/heroes/", and I've removed all sections in index.html except for the "hero" section and the "sign-up form". However, there is too much white space between these two elemen ...

Guide on utilizing the sName attribute within JQuery DataTables

When receiving data from the server in JSON format, I am struggling to set the "name" attribute on the columns (cells). Is sName the correct property to use for setting the "name" attribute for every Cell? Below is my Datables code: $('#' + se ...

What are the ways to incorporate the width property in @media queries within CSS?

I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried: mat-toolbar { app-toolbar-left { width: 35%; } app-toolbar-right { width: 22%; } } @me ...

Struggling with extracting and transferring data from a span tag to another field within the same form using selenium and python

I am struggling with an issue while running a code using selenium in Python. I am trying to extract values from span tags and store them in variables named "cap1, cap2, and cap3." After saving these values, I need to input them into another field on a web ...

Mantine - Showing search results in a scrollable list that stops at the parent's height and then adds vertical scrolling

I am currently in the process of developing a web application that needs to occupy the entire height and width of the screen using 100vh and 100vw. The main app itself should not have any vertical or horizontal scrolling, but individual components/divs wi ...

Is it a Mozilla Firefox glitch or something else?

After writing the code, I noticed a bug in Firefox and a small bug in Chrome. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...