What is the best way to create a mirror effect on one div by clicking another div?

Question

What is the best way to create a mirror effect on one div by clicking another div?

I have created a schedule grid and I am looking for a way to allow users to click on the UK hour and then have the corresponding U.S time highlighted. Is there a CSS solution for this? The functionality I need is to be able to select multiple hours. I have found some examples but they only work with one div.

https://i.sstatic.net/XlZGm.png

The grid was built using tables, so my code resembles something like this:

<table>
    <tr class="booked">
      <th><a href="">00 am</a></th>
      <th><a href="">01 am</a></th>
      <th><a href="">02 am</a></th>
      <th><a href="">03 am</a></th>
      <th><a href="">04 am</a></th>
      <th><a href="">05 am</a></th>
      <th><a href="">06 am</a></th>
      <th><a href="">07 am</a></th>
      <th><a href="">08 am</a></th>
      <th><a href="">09 am</a></th>
      <th><a href="">10 am</a></th>
      <th><a href="">11 am</a></th>
    </tr>
    <tr class="booked_active">
      <th>4 pm</th>
      <th>5 pm</th>
      <th>6 pm</th>
      <th>7 pm</th>
      <th>8 pm</th>
      <th>9 pm</th>
      <th>10 pm</th>
      <th>11 pm</th>
      <th>12 am</th>
      <th>1 am</th>
      <th>2 am</th>
      <th>3 am</th>
    </tr>
  </table>

Please note: There will be a total of 7 grids, one for each day of the week.

javascript jquery html css

Answer 1

Answer №1

If you need to select individual elements in CSS, you can target one at a time. To target multiple elements, JavaScript is required.

To achieve this with CSS, utilize the :target selector:

The :target pseudo-class selects the unique element that matches an id matching the anchor of the document's URI.

To implement this functionality, assign an id to each element you want to highlight, link it using a hash and the id text, and define a CSS rule for each element:

<th><a href="#cell1">00 am</a>
</th>

<th id="cell1">4 pm</th>

#cell1:target {
  color: red;
}

#cell1:target {
  color: red;
}
#cell2:target {
  color: red;
}
#cell3:target {
  color: red;
}
#cell4:target {
  color: red;
}
#cell5:target {
  color: red;
}
#cell6:target {
  color: red;
}
#cell7:target {
  color: red;
}
#cell8:target {
  color: red;
}
#cell9:target {
  color: red;
}
#cell10:target {
  color: red;
}
#cell11:target {
  color: red;
}
#cell12:target {
  color: red;
}

<table>
  <tr class="booked">
    <th><a href="#cell1">00 am</a>
    </th>
    <th><a href="#cell2">01 am</a>
    </th>
    <th><a href="#cell3">02 am</a>
    </th>
    <th><a href="#cell4">03 am</a>
    </th>
    <th><a href="#cell5">04 am</a>
    </th>
    <th><a href="#cell6">05 am</a>
    </th>
    <th><a href="#cell7">06 am</a>
    </th>
    <th><a href="#cell8">07 am</a>
    </th>
    <th><a href="#cell9">08 am</a>
    </th>
    <th><a href="#cell10">09 am</a>
    </th>
    <th><a href="#cell11">10 am</a>
    </th>
    <th><a href="#cell12">11 am</a>
    </th>
  </tr>
  <tr class="booked_active">
    <th id="cell1">4 pm</th>
    <th id="cell2">5 pm</th>
    <th id="cell3">6 pm</th>
    <th id="cell4">7 pm</th>
    <th id="cell5">8 pm</th>
    <th id="cell6">9 pm</th>
    <th id="cell7">10 pm</th>
    <th id="cell8">11 pm</th>
    <th id="cell9">12 am</th>
    <th id="cell10">1 am</th>
    <th id="cell11">2 am</th>
    <th id="cell12">3 am</th>
  </tr>
</table>

Answer 2

If you need to select individual elements in CSS, you can target one at a time. To target multiple elements, JavaScript is required.

To achieve this with CSS, utilize the :target selector:

The :target pseudo-class selects the unique element that matches an id matching the anchor of the document's URI.

To implement this functionality, assign an id to each element you want to highlight, link it using a hash and the id text, and define a CSS rule for each element:

<th><a href="#cell1">00 am</a>
</th>

<th id="cell1">4 pm</th>

#cell1:target {
  color: red;
}

#cell1:target {
  color: red;
}
#cell2:target {
  color: red;
}
#cell3:target {
  color: red;
}
#cell4:target {
  color: red;
}
#cell5:target {
  color: red;
}
#cell6:target {
  color: red;
}
#cell7:target {
  color: red;
}
#cell8:target {
  color: red;
}
#cell9:target {
  color: red;
}
#cell10:target {
  color: red;
}
#cell11:target {
  color: red;
}
#cell12:target {
  color: red;
}

<table>
  <tr class="booked">
    <th><a href="#cell1">00 am</a>
    </th>
    <th><a href="#cell2">01 am</a>
    </th>
    <th><a href="#cell3">02 am</a>
    </th>
    <th><a href="#cell4">03 am</a>
    </th>
    <th><a href="#cell5">04 am</a>
    </th>
    <th><a href="#cell6">05 am</a>
    </th>
    <th><a href="#cell7">06 am</a>
    </th>
    <th><a href="#cell8">07 am</a>
    </th>
    <th><a href="#cell9">08 am</a>
    </th>
    <th><a href="#cell10">09 am</a>
    </th>
    <th><a href="#cell11">10 am</a>
    </th>
    <th><a href="#cell12">11 am</a>
    </th>
  </tr>
  <tr class="booked_active">
    <th id="cell1">4 pm</th>
    <th id="cell2">5 pm</th>
    <th id="cell3">6 pm</th>
    <th id="cell4">7 pm</th>
    <th id="cell5">8 pm</th>
    <th id="cell6">9 pm</th>
    <th id="cell7">10 pm</th>
    <th id="cell8">11 pm</th>
    <th id="cell9">12 am</th>
    <th id="cell10">1 am</th>
    <th id="cell11">2 am</th>
    <th id="cell12">3 am</th>
  </tr>
</table>

Answer 3

Answer №2

For those utilizing jQuery, achieving this task is quite simple.

Moreover, functionality exists for users to click from the top or bottom as well.

It should be noted that specific jQuery selectors were not styled in this solution. If conflicts arise with other code on the page, selector adjustments may be necessary.

To customize different colors, simply adjust the CSS accordingly.

$('th').on('click',selectTimes)

function selectTimes(){
 $('[hour="'+$(this).attr('hour')+'"]').toggleClass('selected');
}

th {
  height: 20px;
  width: 20px;
}
.booked .selected {
  background-color: yellow;
}
.booked_active .selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="booked">
    <th hour="1">00 am</th>
    <th hour="2">01 am</th>
    <th hour="3">02 am</th>
    <th hour="4">03 am</th>
    <th hour="5">04 am</th>
    <th hour="6">05 am</th>
    <th hour="7">06 am</th>
    <th  hour="8">07 am</th>
    <th hour="9">08 am</th>
    <th hour="10">09 am</th>
    <th hour="11">10 am</th>
    <th hour="12">11 am</th>
  </tr>
  <tr class="booked_active">
    <th hour="1">4 pm</th>
    <th hour="2">5 pm</th>
    <th hour="3">6 pm</th>
    <th hour="4">7 pm</th>
    <th hour="5">8 pm</th>
    <th hour="6">9 pm</th>
    <th hour="7">10 pm</th>
    <th hour="8">11 pm</th>
    <th hour="9">12 am</th>
    <th hour="10">1 am</th>
    <th hour="11">2 am</th>
    <th hour="12">3 am</th>
  </tr>
</table>

Answer 4

For those utilizing jQuery, achieving this task is quite simple.

Moreover, functionality exists for users to click from the top or bottom as well.

It should be noted that specific jQuery selectors were not styled in this solution. If conflicts arise with other code on the page, selector adjustments may be necessary.

To customize different colors, simply adjust the CSS accordingly.

$('th').on('click',selectTimes)

function selectTimes(){
 $('[hour="'+$(this).attr('hour')+'"]').toggleClass('selected');
}

th {
  height: 20px;
  width: 20px;
}
.booked .selected {
  background-color: yellow;
}
.booked_active .selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="booked">
    <th hour="1">00 am</th>
    <th hour="2">01 am</th>
    <th hour="3">02 am</th>
    <th hour="4">03 am</th>
    <th hour="5">04 am</th>
    <th hour="6">05 am</th>
    <th hour="7">06 am</th>
    <th  hour="8">07 am</th>
    <th hour="9">08 am</th>
    <th hour="10">09 am</th>
    <th hour="11">10 am</th>
    <th hour="12">11 am</th>
  </tr>
  <tr class="booked_active">
    <th hour="1">4 pm</th>
    <th hour="2">5 pm</th>
    <th hour="3">6 pm</th>
    <th hour="4">7 pm</th>
    <th hour="5">8 pm</th>
    <th hour="6">9 pm</th>
    <th hour="7">10 pm</th>
    <th hour="8">11 pm</th>
    <th hour="9">12 am</th>
    <th hour="10">1 am</th>
    <th hour="11">2 am</th>
    <th hour="12">3 am</th>
  </tr>
</table>

What is the best way to create a mirror effect on one div by clicking another div?

Answer №1

Answer №2

Similar questions

Say goodbye to <!DOCTYPE html> when using htmlAgilityPack

What is the best way to generate this arc using CSS3?

Tips for ensuring uniform button height across all cards

Strategies for integrating user data into Vue components within Laravel

Exporting JSON blend files in Three.js is causing an error that says "Cannot read property 'type' of undefined."

Creating a scrollable card layout specifically for small screens in HTML

What is the best way to dynamically showcase options in a React application?

The interaction between Vue components causing changes in each other's data

Experimenting with an rxjs service to perform a GET request within the component

The right-aligned navigation bar elegantly shifts downward when it exceeds the screen width

What is the best way to manage the browser tab close event specifically in Angular, without it affecting a refresh?

Place the two buttons in position

Discovering the most recently selected element in jQuery

"Troubleshooting the non-functional :before pseudo-element in a Select-Box

The issue with jquery slideToggle is that it mistakenly opens all divs instead of just the specific div that should

Disable the 'bouncy scrolling' feature for mobile devices

Is it possible to bind to a service variable in a controller without using $scope and utilizing the

Encountering a NPM error when trying to launch the server using ng serve

What is the reason for the successful insertion into the database without including "http://" but encountering errors when including "http

Firestore data displaying as null values