Even and odd no more working

HTML & CSS
1

I’m working on a timeline from a mysql table, and I wish to get alternate divs (left and right of the vertical line).
I wonder why this code doesn’t work as expected: all the divs are at right of the vertical line.

css

* {
  box-sizing: border-box;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /*transform: translate(0px, -1950px);*/ /*fa sballare il pop-up*/
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: orange;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.modaldivcontainer {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.modaldivcontainer::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 100px;
  border-radius: 50%;
  z-index: 1;
}

/* Add arrows to the left container (pointing right) */
.modaldivcontainer:nth-child(even)::before {
  content: ' ';
  height: 0;
  position: absolute;
  top: 60px;
  width: 0;
  z-index: 1;
  right: -10px;
  border: medium solid orange;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent orange;
}

/* Add arrows to the right container (pointing left) */
.modaldivcontainer:nth-child(odd)::before {
  content: ' ';
  height: 0;
  position: absolute;
  top: 60px;
  width: 0;
  z-index: 1;
  left: -25px;
  border: medium solid orange;
  border-width: 10px 10px 10px 0;
  border-color: transparent orange transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after, .modaldivcontainer:nth-child(odd)::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: snow;
  position: relative;
  border-radius: 6px;
}

.modaldivcontainer:nth-child(odd) {/*right*/
    left: 50%;
}
.modaldivcontainer:nth-child(even) {/*left*/
    left: 0;
}

/* modal div BEGIN */

.modaltextdiv {

  z-index: 5;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  display: none; /* hide initially*/
  justify-content: center;
  align-items: center;
}

/* Modal Content/Box */
.modaldiv-content {
    background-color: #fefefe;
    margin: 10vh auto; /* 15% from the top and centered */
    padding: 2%;
    border: 3px solid orange;
    width: 90%; /* Could be more or less, depending on screen size */
}
@media (min-width: 1366px) {
  .modaldiv-content {

  width: auto;
  height: auto;
  min-width: 50vw;
  min-height: 20vh;
  display: block;
  margin: auto;
  max-height: calc(100vh - 2rem);
  max-width: calc(100% - 2rem);
  object-fit: contain;
  
  border-radius: 8px;
  box-shadow: gray 5px 5px 5px;
    
 }
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

html

<div class="timeline">
                 <?php
                   foreach($result as $row)
                   {
                   ?>
   <div class="button modaldivcontainer" data-modal="<?php echo $row["id"]; ?>" style="top:<?php echo "calc($row[data_inizio_y].$row[data_inizio_m]em - 1950em)"; ?>">  
   <<?php echo $row["level"]; ?>>
    <?php echo $row["titolo"]; ?>
   </<?php echo $row["level"]; ?>>
   <p><?php echo "$row[data_inizio] / $row[data_fine]"; ?></p>
   </div>
   
   <div id="<?php echo $row["id"]; ?>" class="modaltextdiv">
    <div class="modaldiv-content">
     
      <a class="close">&times;</a>
      <p><?php echo $row["descrizione"]; ?><img src="<?php echo $row["imagelink"]; ?>" onclick="onClick(this)"  /></p>
     
    </div>
   </div>
   
                <?php
                  }
                ?>
</div>

javascript

    var modalBtns = [...document.querySelectorAll(".button")];
     modalBtns.forEach(function(btn){
       btn.onclick = function() {
         var modal = btn.getAttribute('data-modal');
         document.getElementById(modal).style.display = "grid";
       }
     });
     
     var closeBtns = [...document.querySelectorAll(".close")];
     closeBtns.forEach(function(btn){
       btn.onclick = function() {
         var modal = btn.closest('.modaltextdiv');
         modal.style.display = "none";
       }
     });
     
     window.onclick = function(event) {
       if (event.target.className === "modaltextdiv") {
         event.target.style.display = "none";
       }
     }
2

You could help people out by posting the resulting HTML rather than the PHP that creates the HTML.

2 Likes
3

You are right, I know, but is my life…
I try now to delete sensitive data, please wait.

4

Here you are (I don’t know if it’s enough)


<div class="button modaldivcontainer" data-modal="3">  
<h1>  [some text]   </h1>
   <p> [a date] / [another date] </p>
   </div>
   
<div id="3" class="modaltextdiv">
 <div class="modaldiv-content">
     
      <a class="close">&times;</a>
      <p>[some text]</p>
     
    </div>
</div>
   
<div class="button modaldivcontainer" data-modal="4">  
   <h2> [some text] </h2>
   <p> [a date] / [another date] </p>
</div>
5

In that structure you have this item as the even element.

  <div id="3" class="modaltextdiv">
    <div class="modaldiv-content">

      <a class="close">&times;</a>
      <p>[some text]</p>

    </div>
  </div>

That means that the two .modaldivcontainer will be odd numbered and thus appear on the right.

:odd and :even mean just means the odd and elements in that context. They could be any elements or classes and will only be selected if they are odd or even elements etc.

This code:

.modaldivcontainer:nth-child(even)::before

The above doesn’t count only the ones with that class applied. It counts all elements in that context but then only applies that rule if that odd/even element has that class. It doesn’t separate .modaldivcontainer into one group as such.

If you remove the <div id="3" class="modaltextdiv"> block then the elements will be placed left and right. As that element is fixed positioned I don’t see why you meed it mixed in there anyway.

1 Like
6

.modaldivcontainer:nth-child() {
left: 0;
}
.modaldivcontainer:nth-child(2n+1) {
right: 50%;
}

1 Like
7

with this code all the divs are no more at right, but at left.

8

yes, you are right.

I need it to get a modal pop-up …

9

That code posted above is not correct and we don’t know what your complete structure is yet?

Are you outputting them as blocks of three or are they pairs. e.g. one modaltextcontainer and one modaldiv ?

Pairs like this?

<div class="button modaldivcontainer" data-modal="3">... etc ...</div>
<div id="" class="modaltextdiv"> ... etc ... </div>

<div class="button modaldivcontainer" data-modal="3">... etc ...</div>
<div id="" class="modaltextdiv"> ... etc ... </div>

<div class="button modaldivcontainer" data-modal="3">... etc ...</div>
<div id="" class="modaltextdiv"> ... etc ... </div>

<div class="button modaldivcontainer" data-modal="3">... etc ...</div>
<div id="" class="modaltextdiv"> ... etc ... </div>

If they are like the above then you;d need something like:

.modaldivcontainer:nth-child(4n-1) {
left: 50%;
}

Or are they in groups of three which would need a different approach?

You can use the nth-child tester at css tricks to help you select the correct items.

1 Like
10

If its a pop up for each item (multiple modals) then you could have the html for the modal inside each modaldivcontainer because you are placing the modal as a fixed positioned element it can virtually go in any container (as long as there are no transforms on the parents as that could confuse things).

1 Like
11

Every div has an individual data-modal value (from mysql ‘id’ column), different from any other.

12

It sounds to me as though you could nest the modal in each container then and then you only have odd and even to worry about.

If you have them in a different sequence then you could use nth_child to work it out. I just tweaked your code to show it working but I haven’t really looked at your code in depth and I would never use relative positioning to move the blocks around.

That’s just very rough as I don;t know what its supposed to look like but you can see the left and right etc. The code needs a good tidy up though :slight_smile:

1 Like
13

Thank you, Paul. Therefore I have to choose either a modal pop-up or odd and even, haven’t I?
If so, probably I will opt for the second one, and instead of a pop-up I will create a expand/collapse code.

14

You should be able to have your modal with either structure but of course you’ll have to refactor a little.

It sounds as though an expand and collapse may be more usable than modals though.

1 Like
15

Yes, I agree. Thank you!

1 Like
16

I know you are well into this but I just remembered I have an old timeline demo which may be of interest as its a bit more logical than your code and works on small screen also.

I’ve updated it a little and posted it in this codepen.

It may or may not be of any use :slight_smile: (It could be adapted to have expand and collapse or modals etc.)

2 Likes
17

Thank you! I will try it.