Кнопки с одинаковым box.top
Есть 3 блока в ряд, внутри текст и внизу каждого текста кнопка.
Но, т.к. текст везде разной длины, то и кнопки на разной высоте находятся. А хотелось сделать, что бы кнопки были на одинаковой высоте, относительно друг друга ниже текстов. Макет адаптивный, кнопки скачут каждый раз по разному в разном разрешении. Поэтому, прописывать каждой кнопке своё значение положения - бессмысленно, на другом разрешении экрана уже понадобятся другие значения. А прописывать значения для каждого экрана - это же ад. Я нашёл вариант, узнать положение одной кнопки. И хочу под него подстраивать другие кнопки.
function getCoords() {
var box = button1.getBoundingClientRect();
return box.top;
}
С помощью этой функции, можно узнать положение нужной кнопки button1. Но как мне теперь применить это значение(box.top) к другим кнопкам, к button2 и button3? |
Synth, пример тестовый сделай - на нем и покажут. ;)
Только полный пример, не огрызок... |
Да мне всего-то подсказка нужна.
С помощью "button1.getBoundingClientRect();" - я получаю значение top первой кнопки. Как мне теперь сделать, чтобы у второй и третьей кнопки было такое же значение? |
Synth,
В цикле присвоить всем кнопкам найденное значение
for(var i = 0; i< buttons.length; i++) {
buttons[i].style.top = getCoords();
}
|
Цитата:
function getCoords() {
var box = button1.getBoundingClientRect();
return box.top;
}
button2.style.top = getCoords();
button3.style.top = getCoords();
Там button1, button2, button3 - это не button в обычном понимании, значение id div. И не получается. Вот что консоль выдаёт: 226.8000030517578 Ошибка при парсинге значения «top». Потерянное объявление. |
Цитата:
|
<div id="button1" style="position:absolute; left:100px;top:70px;">Кнопка 1</div>
<div id="button2" style="position:absolute; left:300px;top:50px;">Кнопка 2</div>
<div id="button3" style="position:absolute; left:500px;top:100px;">Кнопка 3</div>
<button onclick="equalize()">Выровнять</button>
<script>
function getCoords() {
var box = button1.getBoundingClientRect();
return box.top;
}
function equalize() {
button2.style.top = getCoords();
button3.style.top = getCoords();
}</script>
В принципе работает - следовательно, проблемы в деталях реализации. Для нормальной диагностики нужно то, что у вас просили рони и ksa |
Dilettante_Pro, так тоже не работает.
В общем, ok, вот пример: http://codepen.io/anon/pen/XNGGBO Я хочу, чтобы все button были в один ряд с самой первой button1. Да, это легко можно сделать вёрсткой, но не в моём случае. У меня там шаблон wordpress, который адаптивный и свёрстан особым образом, где я не могу эти кнопки прибить снизу. Точнее, конечно могу, но придётся править много кода шаблона, так уж он был сделан создателем. Поэтому, хотелось бы сделать костыль через js, подгонять две другие кнопки в одну линию с первой. |
А вот так работает.
<style>
.block1 {
width: 100%;
}
.blocks {
width: 33%;
border: 3px #000;
background-color: #000;
float: left;
color: #fff;
height: 300px;
}
.hvr-sweep-to-top-border {
color: #ffffff;
}
#button1 {position: relative; border: 4px double white;}
#button2 {position: relative; border: 4px double white;}
#button3 {position: relative; border: 4px double white;}
</style>
<div class="block1">
<div class="blocks">
<h2>Title 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<p>
<a href="#" class="hvr-sweep-to-top-border wow fadeUp animated" style="visibility: visible;">Read More </a>
</div>
<div class="blocks">
<h2>Title 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s<p>
<a href="#" class="hvr-sweep-to-top-border wow fadeUp animated" style="visibility: visible;">Give Love </a>
</div>
<div class="blocks">
<h2>Title 3</h2>
<p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s<p>
<a href="#" class="hvr-sweep-to-top-border wow fadeUp animated" style="visibility: visible;">Buy Now </a>
</div>
</div>
<script>
var buttons = document.querySelectorAll(".hvr-sweep-to-top-border");
function getCoords() {
var box = buttons[0].getBoundingClientRect();
return box.top;
}
buttons[1].style.position = "absolute";
buttons[2].style.position = "absolute";
buttons[1].style.top = getCoords();
buttons[2].style.top = getCoords();
</script>
|
Да, в примере работает, а на сайте - нет)
|
Я не знаю, можно ли тут давать ссылки или нет. Надеюсь меня не забанят.
Вот тема wordpress: http://safreen.imonthemes.com/demo1/ Там под шапкой 3 блока WE DELIVER, WE FOCUS, WE`RE CREATIVE. В демо шаблона, текста в блоках имеют одинаковое количество строк, поэтому кнопки одинаково расположены. Но если в каком-то из блоков будет больше(или меньше) текста, кнопка снизу станет ниже(или выше) и соответственно кнопки уже не будут в одну линию. В примере всё работает, но когда пытаюсь применить пример в этой теме - не срабатывает. |
Synth,
Но на сайте у этих ссылок (которые кнопки) нет id. Как вы их ищете в DOM? Посмотрите измененный Пост#9 |
Synth,
перед </head> добавить
<style type="text/css">
.divider-single {
flex: 1;
}
.inner{
height: 100%;
display: flex;
flex-direction: column;
}
.hvr-sweep-to-top-border {
width: 160px;
text-align: center;
}
</style>
</head>
|
Цитата:
Попробовал код из изменённого поста. Они сдвигаются, но все равно не срабатывает. Цитата:
|
Цитата:
|
Цитата:
Можно взять Firefox DevTools или Chrome DevTools, добавить ещё одну строку текста в первый блок, чтобы кнопка была ниже остальных. Потом добавить перед </head> ваш код css. |
Цитата:
|
|
Когда в теме в head вставляю:
.divider-single {
flex: 1;
}
.inner{
height: 100%;
display: flex;
flex-direction: column;
}
.hvr-sweep-to-top-border {
width: 180px;
text-align: center;
}
Не срабатывает. Не понимаю, почему через codepen работает. |
Synth,
видимо на выходе вашего шаблона этого css нет или вставлено неправильно |
Когда на демо сайте через DevTools вставляю, тоже не работает.
|
| Часовой пояс GMT +3, время: 16:24. |