Форум

Artem_A · #1 (**permalink**) 30.01.2016, 21:27

Прошу прощения за то, что отвлекаю своей, вероятно, несущественной проблемой, но не могу найти ошибку

$(function (){
  var d = $('#galer > div > div');

  if (d.height() < 250) {
    d.css('margin-top', '10%');
  }
});

Artem_A · #2 (**permalink**) 30.01.2016, 21:41

рони,

Там еще вот так

$(function(){
  $('#galer div').hover(
    function(){
    $(this).prepend(
    '<div class="hoverBlock">' +
      '<div>' +
        '<h1>TITLE HERE</h1>' +
        '<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>' +
        '<a class="share1"></a>' +
        '<a class="share2"></a>' +
        '</div>' +
    '</div>');
  }
  function(){
    $(this).find('.hoverBlock').remove();
  }
);
});

<div id="galer">
        <div height="361"><img src="./img/main/portfolio/galery/layer86.jpg" alt="" ></div>
        <div height="229"><img src="./img/main/portfolio/galery/layer87.jpg" alt="" ></div>
        <div height="301"><img src="./img/main/portfolio/galery/layer91.jpg" alt="" ></div>
        <div height="361"><img src="./img/main/portfolio/galery/layer88.jpg" alt="" ></div>
        <div height="344"><img src="./img/main/portfolio/galery/layer95.jpg" alt="" ></div>
        <div height="374"><img src="./img/main/portfolio/galery/layer89.jpg" alt="" ></div>
        <div height="361"><img src="./img/main/portfolio/galery/layer90.jpg" alt="" ></div>
        <div height="269"><img src="./img/main/portfolio/galery/layer93.jpg" alt=""></div>
        <div height="357"><img src="./img/main/portfolio/galery/layer96.jpg" alt="" ></div>
        <div height="301"><img src="./img/main/portfolio/galery/layer97.jpg" alt=""></div>
        <div height="255"><img src="./img/main/portfolio/galery/layer94.jpg" alt=""></div>
        <div height="209"><img src="./img/main/portfolio/galery/layer92.jpg" alt="" ></div>
      </div>

.hoverBlock {
  position: absolute;
  z-index: 0;
  width:100%;
  height: 100%;
  background-color: rgba(0, 0, 0,0.7);
}
.hoverBlock div {
  width: 69%;
  margin: 0 auto;
  margin-top: 30%;
}
.hoverBlock h1 {
  font: 20px 'Source Sans Pro';
  color: #19bd9a;
  letter-spacing: 5px;
}
.hoverBlock p {
  font: 12px 'Open Sans';
  color: #b2b3b3
}

рони · #3 (**permalink**) 30.01.2016, 21:44

Artem_A,
13 строка где запятая?

Artem_A · #4 (**permalink**) 30.01.2016, 21:45

рони,
я просто закоментил эту часть кода пока у себя, поэтому забыл

Artem_A · #5 (**permalink**) 30.01.2016, 21:47

рони,
Он создается здесь

$(function(){
  $('#galer div').hover(
    function(){
    $(this).prepend(
    '<div class="hoverBlock">' +
      '<div>' +
        '<h1>TITLE HERE</h1>' +
        '<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>' +
        '<a class="share1"></a>' +
        '<a class="share2"></a>' +
        '</div>' +
    '</div>');
  }
  function(){
    $(this).find('.hoverBlock').remove();
  }
);
});

рони · #6 (**permalink**) 30.01.2016, 21:48

Artem_A,
где создали там и увеличивайте

Artem_A · #7 (**permalink**) 30.01.2016, 21:49

рони,
не понимаю

Artem_A · #8 (**permalink**) 30.01.2016, 21:49

рони,
Хорошо, спасибо большое

рони · #9 (**permalink**) 30.01.2016, 21:59

Artem_A,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hoverBlock {
  position: absolute;
  z-index: 0;
  width:100%;
  height: 100%;
  background-color: rgba(0, 0, 0,0.7);
}
.hoverBlock div {
  width: 69%;
  margin: 0 auto;
  margin-top: 30%;
}
.hoverBlock h1 {
  font: 20px 'Source Sans Pro';
  color: #19bd9a;
  letter-spacing: 5px;
}
.hoverBlock p {
  font: 12px 'Open Sans';
  color: #b2b3b3
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
  $(function(){
  var d;
  $('#galer div').hover(
    function(){
    d = $('<div class="hoverBlock">' +
      '<div>' +
        '<h1>TITLE HERE</h1>' +
        '<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>' +
        '<a class="share1"></a>' +
        '<a class="share2"></a>' +
        '</div>' +
    '</div>')
    $(this).prepend(d);
    if (d.height() < 250) {
    d.css('margin-top', '10%');
  }
  },
  function(){
    d && d.remove();
  }
);
});

  </script>
</head>

<body>
<div id="galer">
        <div style="height:361px"><img src="./img/main/portfolio/galery/layer86.jpg" alt="" ></div>
        <div style="height:229px"><img src="./img/main/portfolio/galery/layer87.jpg" alt="" ></div>
        <div style="height:301px"><img src="./img/main/portfolio/galery/layer91.jpg" alt="" ></div>
        <div style="height:361px"><img src="./img/main/portfolio/galery/layer88.jpg" alt="" ></div>
        <div style="height:344px"><img src="./img/main/portfolio/galery/layer95.jpg" alt="" ></div>
        <div style="height:374px"><img src="./img/main/portfolio/galery/layer89.jpg" alt="" ></div>
        <div style="height:361px"><img src="./img/main/portfolio/galery/layer90.jpg" alt="" ></div>
        <div style="height:269px"><img src="./img/main/portfolio/galery/layer93.jpg" alt=""></div>
        <div style="height:357px"><img src="./img/main/portfolio/galery/layer96.jpg" alt="" ></div>
        <div style="height:301px"><img src="./img/main/portfolio/galery/layer97.jpg" alt=""></div>
        <div style="height:255px"><img src="./img/main/portfolio/galery/layer94.jpg" alt=""></div>
        <div style="height:209px"><img src="./img/main/portfolio/galery/layer92.jpg" alt="" ></div>
      </div>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript