Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.12.2016, 05:02
Аватар для Synth
Интересующийся
Отправить личное сообщение для Synth Посмотреть профиль Найти все сообщения от Synth
 
Регистрация: 16.10.2015
Сообщений: 16

Кнопки с одинаковым box.top
Есть 3 блока в ряд, внутри текст и внизу каждого текста кнопка.
Но, т.к. текст везде разной длины, то и кнопки на разной высоте находятся. А хотелось сделать, что бы кнопки были на одинаковой высоте, относительно друг друга ниже текстов. Макет адаптивный, кнопки скачут каждый раз по разному в разном разрешении. Поэтому, прописывать каждой кнопке своё значение положения - бессмысленно, на другом разрешении экрана уже понадобятся другие значения. А прописывать значения для каждого экрана - это же ад.

Я нашёл вариант, узнать положение одной кнопки. И хочу под него подстраивать другие кнопки.

function getCoords() { 
  var box = button1.getBoundingClientRect();
  return box.top;
}


С помощью этой функции, можно узнать положение нужной кнопки button1. Но как мне теперь применить это значение(box.top) к другим кнопкам, к button2 и button3?
Ответить с цитированием
  #2 (permalink)  
Старый 14.12.2016, 08:31
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,218

Synth, пример тестовый сделай - на нем и покажут.
Только полный пример, не огрызок...
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2016, 14:56
Аватар для Synth
Интересующийся
Отправить личное сообщение для Synth Посмотреть профиль Найти все сообщения от Synth
 
Регистрация: 16.10.2015
Сообщений: 16

Да мне всего-то подсказка нужна.

С помощью "button1.getBoundingClientRect();" - я получаю значение top первой кнопки. Как мне теперь сделать, чтобы у второй и третьей кнопки было такое же значение?
Ответить с цитированием
  #4 (permalink)  
Старый 21.12.2016, 15:14
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Synth,
В цикле присвоить всем кнопкам найденное значение
for(var i = 0; i< buttons.length; i++) {
   buttons[i].style.top = getCoords();
}

Последний раз редактировалось Dilettante_Pro, 21.12.2016 в 15:17.
Ответить с цитированием
  #5 (permalink)  
Старый 21.12.2016, 16:04
Аватар для Synth
Интересующийся
Отправить личное сообщение для Synth Посмотреть профиль Найти все сообщения от Synth
 
Регистрация: 16.10.2015
Сообщений: 16

Сообщение от Dilettante_Pro Посмотреть сообщение
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».  Потерянное объявление.
Ответить с цитированием
  #6 (permalink)  
Старый 21.12.2016, 16:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Сообщение от ksa
Synth, пример тестовый сделай - на нем и покажут.
Только полный пример, не огрызок...
html на три дива + css + js
Ответить с цитированием
  #7 (permalink)  
Старый 21.12.2016, 16:46
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<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, 21.12.2016 в 17:04.
Ответить с цитированием
  #8 (permalink)  
Старый 21.12.2016, 17:05
Аватар для Synth
Интересующийся
Отправить личное сообщение для Synth Посмотреть профиль Найти все сообщения от Synth
 
Регистрация: 16.10.2015
Сообщений: 16

Dilettante_Pro, так тоже не работает.

В общем, ok, вот пример: http://codepen.io/anon/pen/XNGGBO

Я хочу, чтобы все button были в один ряд с самой первой button1.

Да, это легко можно сделать вёрсткой, но не в моём случае. У меня там шаблон wordpress, который адаптивный и свёрстан особым образом, где я не могу эти кнопки прибить снизу. Точнее, конечно могу, но придётся править много кода шаблона, так уж он был сделан создателем. Поэтому, хотелось бы сделать костыль через js, подгонять две другие кнопки в одну линию с первой.
Ответить с цитированием
  #9 (permalink)  
Старый 21.12.2016, 17:28
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

А вот так работает.
<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>

Последний раз редактировалось Dilettante_Pro, 21.12.2016 в 18:57.
Ответить с цитированием
  #10 (permalink)  
Старый 21.12.2016, 17:50
Аватар для Synth
Интересующийся
Отправить личное сообщение для Synth Посмотреть профиль Найти все сообщения от Synth
 
Регистрация: 16.10.2015
Сообщений: 16

Да, в примере работает, а на сайте - нет)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
размножить кнопки для сайта Anshag (X)HTML/CSS 3 26.11.2015 06:18
Анимация залипания кнопки SmilingDog Events/DOM/Window 14 22.12.2014 06:35
Сделать кнопки без действенными на время анимации FredIkO Общие вопросы Javascript 3 06.06.2013 13:39
Обновление события кнопки TheHappy Общие вопросы Javascript 0 06.03.2012 10:30
Получение ссылки на объект в обработчике нажатия кнопки pauluss ExtJS 1 22.06.2011 15:27