Apply the CSS property to all divs with a shared class using jQuery

I am facing an issue with applying the CSS property 'z-index:99' to multiple divs that have the same class name. I want this CSS to be applied when clicking on a play button using jQuery. Currently, it only works for the first Play Button and I want it to trigger for all play button clicks.

jQuery(document).ready(function($) {
  $("#playButton").click(function() {
    $(".close_icon").css('display', 'block');
    $(".video-container").css('z-index', '99');
    $(".videoThumbnail").css('z-index', '99');
  });

  $('iframe').load(function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;}  </style>"));
  });
  $(".close_icon").click(function() {
    $(".video-container").css('z-index', '0');
    $(".close_icon").css('display', 'none');
    $("#header").show();

  });
});

function callPlayer(frame_id, func, args) {
  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
  var iframe = document.getElementById(frame_id);
  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
  }
  if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
      "event": "command",
      "func": func,
      "args": args || [],
      "id": frame_id
    }), "*");
  }
}
#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container" id="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" id="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container" id="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" id="playButton">Play button</a>
    </div>
  </div>
</div>

jqueryhtmlcss

Answer №1

Avoid using the same ID for multiple elements such as #video-container and #playButton; instead, consider using classes.

$(".playButton").click(function() {
   $(".close_icon").css('display', 'block');
   $(".video-container").css('z-index', '99');
   $(".videoThumbnail").css('z-index', '99');
});

Answer №2

You have specified multiple elements with identical id. Each id must be unique. Additionally, you need to locate the closest div with the class content and then utilize the find method to apply css changes specifically within that subset of elements.

jQuery(document).ready(function($) {
  $(".playButton").click(function() {
    $(this).closest("div.content").find(".close_icon").css('display', 'block');
    $(this).closest("div.content").find(".video-container").css('z-index', '99');
    $(this).closest("div.content").find(".videoThumbnail").css('z-index', '99');
  });

  $('iframe').load(function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;}  </style>"));
  });
  $(".close_icon").click(function() {
    $(this).closest("div.content").find(".video-container").css('z-index', '0');
    $(this).closest("div.content").find(".close_icon").css('display', 'none');
    $("#header").show();

  });
});

function callPlayer(frame_id, func, args) {
  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
  var iframe = document.getElementById(frame_id);
  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
  }
  if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
      "event": "command",
      "func": func,
      "args": args || [],
      "id": frame_id
    }), "*");
  }
}
#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>

Answer №3

It's recommended to use class="playButton" instead of id="playButton" for the play button element in your HTML code. This is because selecting by ID in jQuery only targets one specific element.

jQuery(document).ready(function($) {
  $(".playButton").click(function() {
    $(".close_icon").css('display', 'block');
    $(".video-container").css('z-index', '99');
    $(".videoThumbnail").css('z-index', '99');
  });

  $('iframe').load(function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;}  </style>"));
  });
  $(".close_icon").click(function() {
    $(".video-container").css('z-index', '0');
    $(".close_icon").css('display', 'none');
    $("#header").show();

  });
});

function callPlayer(frame_id, func, args) {
  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
  var iframe = document.getElementById(frame_id);
  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
  }
  if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
      "event": "command",
      "func": func,
      "args": args || [],
      "id": frame_id
    }), "*");
  }
}
#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container" id="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container" id="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>

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

Tips for marking a textarea as mandatory when a choice is made

I'm creating an .html document for conducting a complete system check and confirming various aspects of its functionality. In this page, there is a table within a form structure where each row represents a step in the system verification process (e.g. ...

javascripthtmltextareaselectionrequired

Dynamic element peeks out from behind parent container

When attempting to create an infinite animation for the rocket similar to the one shown here, I encountered an issue where the rocket does not hide beneath the parent div as demonstrated in the example. Instead, the rocket changes position on the Y-axis an ...

jqueryhtmlcssanimationsvg

Having problems saving data with JQuery.ajax

Is there a way to store data from a Textbox when the Button is clicked? I am currently using JQuery AJAX to accomplish this task, as shown below. Please note that these tags are placed inside the theme function. function theme_user_post_block($vars) { $t ...

jsonjquerydrupaldrupal-7

The issue with Bootstrap 4 modal not closing persists when loading content using the .load() function

Having an issue with my Bootstrap 4 modal, as I'm loading the body content externally using .load(), but it's not closing when I click on the close buttons. Any help would be highly welcomed. JavaScript Code Used: if(status){ $('#cartMe ...

javascriptjqueryajaxtwitter-bootstrap

Eliminate list items with a keyboard stroke

I am currently developing a straightforward todo list application using JavaScript. The main functionality I am trying to implement is the ability to add new items from an input field to a list, as well as the option to remove items from the list. While ...

javascripthtmlcssdomevent-listener

Discover how to combine tables and apply various filters simultaneously using Dapper within an asp.net core mvc framework

I am attempting to query and join two tables with multiple conditions. string sql = "Select l.*, c.FirstName_CompanyName from dbo.Loan l left join Customer c on l.CustId=c.CustId where LoanAccountNo > 0 "; After implementing the above code, I realize ...

jquerysqlsql-serverasp.net-coredapper

The contentType in the AJAX Call for MVC Action was encoded incorrectly

My goal is to initiate an AJAX function to transfer a batch of JSON data (approximately 38Kb in size) which will be mapped onto a List<ModelClass> in the Controller Action for further processing. (Simplified) _oRecords Data Format before AJAX transf ...

jqueryajaxasp.net-mvc

Stopping setTimeout when leaving the current page: Is it possible?

Good evening, I am looking for advice on how to cancel a setTimeout function when a user navigates to other pages (for example, by clicking other links or pressing the back button in the browser, but not by changing tabs). I have attempted to use the windo ...

javascripthtmlcssreactjssettimeout

Tips for limiting the .click function to only the initial image in order to prevent loading all images within the container

I am facing a situation where multiple images are being returned into a specific div, which is working as intended. <div class="go" id="container"></div> Upon clicking on an image, it is loaded into a modal popup. However, instead of capturin ...

javascriptjqueryhtml

Utilizing JavaScript to conceal div elements within a ul container

How can I hide specific div tags inside a ul tag using JavaScript? All div tags are currently getting hidden when I use the id of the ul tag. However, I need only the first div tag to be shown and the rest to be hidden. Here is the HTML code: <ul clas ...

javascriptjqueryhtml

The custom font in my Next.js project is functioning perfectly in the development environment, but when I try to build it locally, the font doesn

Incorporating the Amazon Ember font as a custom font in my application has been a bit of a challenge. I followed the necessary steps of setting up a font.ts file in the lib folder and exporting the font correctly, as guided by various blog posts. Initially ...

cssnext.jsfontsnextjs14

Using jQuery to access the value of the CSS property "margin-left"

I created a JavaScript game with moving divs that have different transition times. The game includes a function that is called every 1/100 seconds, which checks the position of the divs using: $("class1").css("margin-left") Here's the strange part: ...

javascriptjqueryhtmlposition

evaluation is not being executed in javascript

I am struggling to assign a value of 1 to the educationflag variable. I am trying to avoid calling the enableEdit.php file when the flag is set to 1. The issue arises when control reaches the if condition but fails to set the variable to 1. Here is my cod ...

javascriptjqueryajaxeval

Scroll through the div to quickly find the relevant content

I have implemented the following HTML structure: <div style="height:200px;overflow-y:scroll;"> <table>.....</table> </div> By using this setup, I am aiming to replicate the functionality of an expanded <select> control wit ...

javascriptjqueryhtmlcssscrollable

Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code: <svg width='36' height='30'> <defs> <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" s ...

cssfirefoxsvggradientfill

Selecting a checkbox based on the user's previous choice

There is an option on my website for users to opt out of a specific feature. Their decision is stored in the database as either "0" or "1". However, when they return to the site, the checkbox is unchecked even if they had previously selected it. I would l ...

jqueryajaxdatabase

What is the best way to retrieve data from PHP and format it into JSON for use in my jQuery script?

I need help formatting the data returned to jQuery from a query. The specific format I want is: var externalDataRetrievedFromServer = [ { name: 'Bartek', age: 34 }, { name: 'John', age: 27 }, { name: 'Elizabeth', ...

javascriptphpjqueryjson

Hide additional tabs on the page when the width of the tabs exceeds the page width

I am currently working on a Google module tab application. I have successfully added the tab control with drag and drop functionality within a specific area. However, I now need to limit the number of tabs displayed on the page. Regardless of the total cou ...

jqueryhtmlcsstabs

Error with Display of ASCII Character 62 in Superfish Menu

Currently, I have implemented the Superfish menu on my website. In order to indicate sub-menus within my menus, I have opted to utilize the character entity code &#62;, which historically has represented ">". Oddly enough, while viewing my website ...

htmlcssinternet-explorer-8superfish

What is the best way to remove column and row gaps in a Bootstrap grid system?

Despite adjusting padding with the image, div section, and grid gap to 0px in the grid layout, the image still fails to cover the entire cell. I am seeking a solution to eliminate these unwanted paddings that are highlighted in blue. The Bootstrap 5 .g-0 ...

htmlcssbootstrap-5