Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2016, 13:32
Новичок на форуме
Отправить личное сообщение для Chkolnik Посмотреть профиль Найти все сообщения от Chkolnik
 
Регистрация: 04.07.2016
Сообщений: 1

Помогите отредактировать скрипт.
Приветствую всех кто рад мне помочь.
Столкнулся с проблемой в одном из скриптов, который делает колонки блоков одной высоты. Так вот, в скрипте указаны две переменные, для которых можно задать выравнивание двух блоков. Мне нужно добавить третью, но в конце кода не понимаю одну функцию. Нуждаюсь в вашей помощи:
addLoadListener(equalHeight);

function equalHeight() {

var myLeftColumn = document.getElementById("left_column");
var myRightColumn = document.getElementById("right_column");

var myLeftHeight = myLeftColumn.offsetHeight;
var myRightHeight = myRightColumn.offsetHeight;

var myLeftBorderTopPixels = retrieveComputedStyle(myLeftColumn, "borderTopWidth");
var myLeftBorderBottomPixels = retrieveComputedStyle(myLeftColumn, "borderBottomWidth");
var myLeftPaddingTopPixels = retrieveComputedStyle(myLeftColumn, "paddingTop");
var myLeftPaddingBottomPixels = retrieveComputedStyle(myLeftColumn, "paddingBottom");

var myRightBorderTopPixels = retrieveComputedStyle(myRightColumn, "borderTopWidth");
var myRightBorderBottomPixels = retrieveComputedStyle(myRightColumn, "borderBottomWidth");
var myRightPaddingTopPixels = retrieveComputedStyle(myRightColumn, "paddingTop");
var myRightPaddingBottomPixels = retrieveComputedStyle(myRightColumn, "paddingBottom");

var myLeftBorderNumber = Number(myLeftBorderTopPixels.replace("px", "")) + Number(myLeftBorderBottomPixels.replace("px", ""));
var myLeftPaddingNumber = Number(myLeftPaddingTopPixels.replace("px", "")) + Number(myLeftPaddingBottomPixels.replace("px", ""));
var myLeftExtras = myLeftBorderNumber + myLeftPaddingNumber;

var myRightBorderNumber = Number(myRightBorderTopPixels.replace("px", "")) + Number(myRightBorderBottomPixels.replace("px", ""));
var myRightPaddingNumber = Number(myRightPaddingTopPixels.replace("px", "")) + Number(myRightPaddingBottomPixels.replace("px", ""));
var myRightExtras = myRightBorderNumber + myRightPaddingNumber;

	if (myLeftHeight > myRightHeight) {
		myRightColumn.style.height = (myLeftHeight - myRightExtras) + "px";
	}
	
	else {
		myLeftColumn.style.height = (myRightHeight - myLeftExtras) + "px";
	}
	
}

function retrieveComputedStyle(element, styleProperty)
{
		var computedStyle = null;
		
		if (typeof element.currentStyle != "undefined")
		{
			computedStyle = element.currentStyle;
		}
		else
		{
			computedStyle = document.defaultView.getComputedStyle(element, null);
		}
		return computedStyle[styleProperty];
}

function addLoadListener(fn)
{
	if (typeof window.addEventListener != 'undefined')
	{
	window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
	document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
	window.attachEvent('onload', fn);
}
else
{
	var oldfn = window.onload;
	if (typeof window.onload != 'function')
	{
	window.onload = fn;
	}
	else
	{
	window.onload = function()
	{
	oldfn();
	fn();
	};
	}
	}
}
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2016, 13:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Chkolnik,
может без js ? на одном css решить?
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2016, 14:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

колонки одинаковой высоты на js
Chkolnik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

.hot{
          border: 1px dashed Gray; padding: 5px; height: 200px; width: 100px ;
          background-color: #00BFFF;
          float: left;
           transition: all 3s ease;
     }
.hot:nth-of-type(2)
 {
    height : 300px; background-color: #FF69B4;
}

.hot:nth-of-type(1)
 {
    height : 100px;  background-color: #FFD700;
}

 </style>


  <script>
window.addEventListener("DOMContentLoaded", function() {
    var divs = document.querySelectorAll(".hot"),
        height = [].reduce.call(divs, function(height, div) {
            return div.scrollHeight > height ? div.scrollHeight : height
        }, 0);
    [].forEach.call(divs, function(el) {
        el.style.height = height + "px"
    })
});
  </script>
</head>

<body>

  <div class="hot"></div>
  <div class="hot"></div>
  <div class="hot"></div>
</body>
</html>

Последний раз редактировалось рони, 04.07.2016 в 14:02.
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2016, 16:25
Аватар для Botik21
Аспирант
Отправить личное сообщение для Botik21 Посмотреть профиль Найти все сообщения от Botik21
 
Регистрация: 01.06.2016
Сообщений: 87

рони,
Не подскажите как решить без js и flexbox'a
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2016, 17:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Botik21,
https://habrahabr.ru/post/64173/
http://htmlbook.ru/samlayout/tipovye...nakovoi-vysoty
гугл вам в помощь.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите доработать скрипт Joannes Общие вопросы Javascript 0 08.09.2013 21:21
Помогите отредактировать скрипт roseins Javascript под браузер 1 31.08.2013 17:27
Помогите вставить скрипт на страницу alexsio Работа 7 22.04.2013 18:19
Скрипт if помогите пЕньку NeverLux Общие вопросы Javascript 1 06.01.2011 14:33
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 01:05