Я строю горизонтальную шкалу времени. Нажмите на точки, стрелки, они все работают хорошо.
Моя проблема в том, что я хочу, чтобы блок подробностей всегда находился в одном и том же месте и одного размера. Если я использую фиксированное положение, сделать его отзывчивым практически невозможно, поскольку блок остается в одной и той же точке экрана. У вас есть какое-нибудь решение здесь?
$('.point-text').on('click',function(){
$('.point-details, .point-arrow, .point-arrow-shade').css('display', 'none');
if ($(this).siblings('.point-details').css('display') == 'none'){
console.log("auf");
$(this).siblings('.point-details').css('display', 'block');
$(this).siblings('.point-arrow').css('display', 'block');
$(this).siblings('.point-arrow-shade').css('display', 'block');
}
});
$('.point-text').first().click();
.h-timeline-container{
min-height:300px;
margin-top:70px;
}
ol.h-timeline-wrap {
position: relative;
margin: 0;
justify-content: space-around;
display: flex;
height: 1px;
background: #d4d4d4;
}
ol.h-timeline-wrap::before {
left: -5px;
}
ol.h-timeline-wrap::after {
right: -10px;
border: 10px solid transparent;
border-right: 0;
border-left: 20px solid #9b2;
border-radius: 3px;
}
/* ---- Timeline elements ---- */
li.h-timeline-point {
position: relative;
top: -10px;
display: block;
float: left;
width: 150px;
font: bold 14px arial;
}
li.h-timeline-point::before {
content: "";
position: relative;
top: -10px;
left: -4px;
display: block;
width: 40px;
height: 40px;
z-index: 0;
border: 4px solid #009FDA;
border-radius: 50%;
background: #009FDA;
}
.point-text {
right: -11px;
z-index: 2;
font-size: 25px;
top: -48px;
position: relative;
font-weight: normal;
color: white;
}
/* ---- Details ---- */
.point-details {
display:none;
position: relative;
right: 50px;
top: -11px;
padding: 16px;
border-radius: 3px;
border: 1px solid #002776;
font-size: 16px;
background: #fff;
color: black;
font-weight: normal;
width: 950px;
}
/* ---- Hover effects ---- */
.point-text:hover .h-timeline-point {
color: #28e;
}
.point-text:hover{
cursor: pointer;
}
.point-arrow {
content: "";
position: absolute;
left: 0px;
top: 46px;
display: none;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #002776;
}
.point-arrow-shade{
display: block;
top: 48px;
border-bottom: 20px solid #ffffff;
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 0;
height: 0;
left: 0px;
content: "";
z-index: 2;
}
.h-timeline-point:hover::before {
background-color: #002776;
border-color: #002776;
}
@media only screen and (max-width: 1200px) {
.point-details {
width:800px;
}
li.h-timeline-point {
width:100px;
}
}
@media only screen and (max-width: 800px) {
li.h-timeline-point {
width:75px;
}
.point-details {
width:700px;
}
}
@media only screen and (max-width: 500px) {
li.h-timeline-point {
width:25px;
}
.point-details {
width:400px;
}
}
@media only screen and (max-width: 450px) {
.point-details {
width:350px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="h-timeline-container">
<ol class="h-timeline-wrap">
<li class="h-timeline-point"><span class="point-text">1</span><span class="point-arrow-shade"> </span> <span class="point-arrow"> </span> <span class="point-details">1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
<li class="h-timeline-point"><span class="point-text">2</span><span class="point-arrow-shade"> </span> <span class="point-arrow"> </span> <span class="point-details">2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
<li class="h-timeline-point"><span class="point-text">3</span><span class="point-arrow-shade"> </span> <span class="point-arrow"> </span> <span class="point-details">3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
<li class="h-timeline-point"><span class="point-text">4</span><span class="point-arrow-shade"> </span> <span class="point-arrow"> </span> <span class="point-details">4 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
<li class="h-timeline-point"><span class="point-text">5</span><span class="point-arrow-shade"> </span> <span class="point-arrow"> </span> <span class="point-details">5 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </span></li>
</ol>