web148
19 octobre 2023, 15h58
1
Je travaille sur une chronologie à partir d’une table MySQL et je souhaite obtenir des divs alternatifs (à gauche et à droite de la ligne verticale).
Je me demande pourquoi ce code ne fonctionne pas comme prévu : tous les divs sont à droite de la ligne verticale.
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="https://www.sitepoint.com/community/t/even-and-odd-no-more-working/429840/<?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="https://www.sitepoint.com/community/t/even-and-odd-no-more-working/429840/<?php echo $row["id"]; ?>" class="modaltextdiv">
<div class="modaldiv-content">
<a class="close">×</a>
<p><?php echo $row["descrizione"]; ?><img src="https://www.sitepoint.com/community/t/even-and-odd-no-more-working/429840/<?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";
}
}
19 octobre 2023, 16h47
2
HTML
Vous pouvez aider les gens en publiant le HTML résultant plutôt que le PHP qui crée le HTML.
1 J’aime
web148
19 octobre 2023, 16h50
3
Tu as raison, je sais, mais c’est ma vie…
J’essaie maintenant de supprimer les données sensibles, veuillez patienter.
web148
19 octobre 2023, 16h54
4
Voilà (je ne sais pas si c’est suffisant)
<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">×</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>
PaulOB
19 octobre 2023, 17h09
5
Voilà (je ne sais pas si c’est suffisant)
Dans cette structure, vous avez cet élément comme élément pair.
<div id="3" class="modaltextdiv">
<div class="modaldiv-content">
<a class="close">×</a>
<p>[some text]</p>
</div>
</div>
Cela veut dire que les deux .modaldivcontainer sera numéroté impair et apparaîtra donc à droite.
:odd et :even signifient simplement les impairs et les éléments dans ce contexte. Il peut s’agir de n’importe quel élément ou classe et ne sera sélectionné que s’il s’agit d’éléments pairs ou impairs, etc.
Ce code :
.modaldivcontainer:nth-child(even)::before
Ce qui précède ne compte pas uniquement ceux pour lesquels cette classe est appliquée. Il compte tous les éléments dans ce contexte mais n’applique cette règle que si cet élément impair/pair a cette classe. Il ne sépare pas .modaldivcontainer en un seul groupe en tant que tel.
Si vous supprimez le <div id="3" class="modaltextdiv"> bloquer alors les éléments seront placés à gauche et à droite. Comme cet élément est positionné de manière fixe, je ne vois pas pourquoi vous l’avez mélangé de toute façon.
to www.sitepoint.com
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931
Jeu de briques
Snake
Pacman
Bubble