Как установить разные div на одной позиции? - PullRequest
Новая
       10

Как установить разные div на одной позиции?

0 голосов
/ 27 февраля 2020

Я строю горизонтальную шкалу времени. Нажмите на точки, стрелки, они все работают хорошо.

Моя проблема в том, что я хочу, чтобы блок подробностей всегда находился в одном и том же месте и одинакового размера. Если я использую фиксированное положение, сделать его отзывчивым практически невозможно, поскольку блок остается в одной и той же точке экрана. У вас есть какое-нибудь решение здесь? 

$('.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">&nbsp;</span> <span class="point-arrow">&nbsp;</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">&nbsp;</span> <span class="point-arrow">&nbsp;</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">&nbsp;</span> <span class="point-arrow">&nbsp;</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">&nbsp;</span> <span class="point-arrow">&nbsp;</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">&nbsp;</span> <span class="point-arrow">&nbsp;</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>

1 Ответ

1 голос
/ 27 февраля 2020

Не уверен, что это решит вашу проблему, но вы можете создать только один блок подробностей, а затем, используя некоторые javascript и события onclick с цифровых кнопок, изменить содержимое блока подробностей. 

var content1 = "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."
var content2 = "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."
var content3 = "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."
var content4 = "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."
var content5 = "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."


$('.point-text').on('click', function() {
  $('.point-arrow, .point-arrow-shade').css('display', 'none');
  if ($(this).siblings('.point-arrow').css('display') == 'none') {
    console.log("auf");
    $(this).siblings('.point-details').css('display', 'block');
    var selector = $(this).text();
    var binder = "content" + selector;
    $('.point-details').text(eval(binder));
    $(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">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
      <span class="point-details">1</span>
    </li>
    <li class="h-timeline-point">
      <span class="point-text">2</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
    </li>
    <li class="h-timeline-point">
      <span class="point-text">3</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
    </li>
    <li class="h-timeline-point">
      <span class="point-text">4</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
    </li>
    <li class="h-timeline-point">
      <span class="point-text">5</span>
      <span class="point-arrow-shade">&nbsp;</span>
      <span class="point-arrow">&nbsp;</span>
    </li>
  </ol>
</div>

Вот скрипка: https://jsfiddle.net/7dyn2cpb/3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...