Resize and maintain the position of the bloc:absolute



  • There's a block. div.mapCollectives c position:relative and the annexed list ul.collectives>li

    <div class="mapCollectives">
            <img src="img/map.png" alt="">
                <ul class="collectives">
                    <li>
                      <a href="#" class="decorItemText">
                        <p>Декоративно-прикладное творчество</p>
                      </a>
                    </li>
                    <li>
                      <a href="#" class="decorItemText">
                        <p>Этнографический фольклорный</p>
                      </a>
                    </li>
                </ul>
            </div>
    

    Each li Done position:absolute♪ Through JS, changing the size of the browser window, each li new appropriation transform:scale

    $(window).resize(function(){
        var ww = $('.mapCollectives').width()*0.0008630;//Специальные коэффициенты 
        var hh = $('.mapCollectives').height()*0.0014545;//для расчёта пропорций li
        $('.collectives li').css({
            'transform': 'scale('+ww+', '+hh+')'
        });
    });
    

    The problem is, li in style left and topand when the window is reduced, these values shall also be modified so that li retained its location..mapCollectives>img - island map, a li - Island-specific indicators.

    Lower block .mapCollectives - There's a decrease in the picture inside. Less indexes (need to say "right" islands, then- left and top should be reduced.

    Sold to ask left and top percentage, but it didn't work. Probed. transform(ww*N, hh*M)it didn't work either. I think there's got to be some kind of tricky formula to calculate the coordinates. li Depending on the size of the parent window.

    The whole point is two violins:

    The indicator indicates the specific location введите сюда описание изображения

    Change the size of the screen and the indicator is moving

    введите сюда описание изображения

    The size of the index itself changes proportionately to the screen, but the block itself moves down and right, and it needs to point to the same island as the first violin.

    Updating

    http://codepen.io/anon/pen/EPmdvO

    $(document).ready(function() {
      $(window).resize(function() {
        var ww = $('.mapCollectives').width() * 0.0008630;
        var hh = $('.mapCollectives').height() * 0.0014545;
        console.log(ww);
        console.log(hh);
        sscale = $('.mapCollectives').width() / 1976;
        $('.collectives li').css({
          'transform': 'scale(' + ww + ', ' + hh + ')',
          'top': ((212 - (300 * sscale)) * -5) / 8,
          'left': ((95 - (220 * sscale)) * -1) / 0.7
        });
    

    });
    $(window).resize();
    });

    main.container img {
    padding: 0;
    }
    .mapCollectives {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    }
    .container img {
    max-width: 100%;
    }
    .collectives li {
    outline: 1px solid;
    width: 221px;
    text-align: center;
    height: 253px;
    position: absolute;
    }
    .collectives li:first-child {
    background: url(http://5.firepic.org/5/images/2016-01/09/5p09s5ue4l0w.png) no-repeat center 8px, url(http://5.firepic.org/5/images/2016-01/09/zxmx6oq31mqu.png) no-repeat center;
    left: 55px;
    top: -19px;
    }
    .decorItemText {
    position: relative;
    height: 100%;
    display: block;
    }
    .decorItemText p {
    position: absolute;
    bottom: 9px;
    font: bold 15px/16px RobotoCondensed;
    color: #FFF;
    }
    @media (min-width: 1770px) {
    .col-lg-8 {
    width: 65.8%;
    }
    }
    @media (min-width: 1430px) {
    main.container {
    width: 67.2%;
    }
    }
    @media (max-width: 1200px) {
    main.container {
    padding: 0px 14px;
    width: 100%;
    }
    }
    }
    @media (min-width: 1200px) {
    .col-lg-8 {
    width: 59.2%;
    }
    }
    }
    @media (min-width: 992px) and (max-width: 1200px) {
    .col-md-9 {
    width:75% !important;
    }
    }
    <main class="container col-lg-8 col-md-9 col-sm-12">
    <div class="mapCollectives">
    <img src="http://5.firepic.org/5/images/2016-01/09/2owys8ofkcby.png" alt="">
    <ul class="collectives">
    <li>
    <a href="#" class="decorItemText">
    <p>Декоративно-прикладное творчество
    </p>
    </a>
    </li>
    </ul>
    </div>
    </main>



  • Problem solved!

    There's a magic formula for top and left.

    $('.collectives > li:first-child').css({
            'top': ((205-(300*sscale))*-5)/8,
      'left': ((80-(210*sscale))*-1)/0.73
        });
        $('.collectives > li:nth-child(2)').css({
            'top': ((205-(500*sscale))*-5)/8,
      'left': ((80-(395*sscale))*-1)/0.73
        });
        $('.collectives > li:nth-child(3)').css({
            'top': ((205-(300*sscale))*-5)/8,
      'left': ((80-(780*sscale))*-1)/0.73
        });
        $('.collectives > li:nth-child(4)').css({
            'top': ((205-(470*sscale))*-5)/8,
      'left': ((80-(1260*sscale))*-1)/0.73
        });
        $('.collectives > li:nth-child(5)').css({
            'top': ((205-(1200*sscale))*-5)/8,
      'left': ((80-(270*sscale))*-1)/0.73
        });
        $('.collectives > li:nth-child(6)').css({
            'top': ((205-(950*sscale))*-5)/8,
      'left': ((80-(620*sscale))*-1)/0.73
        });
        $('.collectives > li:nth-child(7)').css({
            'top': ((205-(1210*sscale))*-5)/8,
      'left': ((80-(910*sscale))*-1)/0.73
        });
        $('.collectives > li:nth-child(8)').css({
            'top': ((205-(1200*sscale))*-5)/8,
      'left': ((80-(1215*sscale))*-1)/0.73
        });
    

    1215 in the latter case is responsible for the removal of the element -1, 80 and 0.73 - for the change in the size of the component reference. I picked up manual coefficients, so honestly, I don't understand how this formula works.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2