Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.07.2012, 18:42
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от bes Посмотреть сообщение
Лично мне больше нравится такой вид

cyber, что нужно будет устанавливать, получив приведённые вами значения width_drag и height_drag?
не совсем понял вопрос...
епт, а о переводе в старых ие я забыл
Ответить с цитированием
  #12 (permalink)  
Старый 05.07.2012, 18:57
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от devote Посмотреть сообщение
<style>
button {padding: 2px}
</style>
 
<button onclick="
    this.style.height = ( this.getBoundingClientRect().bottom - this.getBoundingClientRect().top ) + 'px';
    alert( 'Высота элемента: ' + (this.getBoundingClientRect().bottom - this.getBoundingClientRect().top))
">click</button>
не забывайте уточнить что this.getBoundingClientRect будет работать не правильно при прокрутке=)
Ответить с цитированием
  #13 (permalink)  
Старый 05.07.2012, 19:12
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от cyber
будет работать не правильно при прокрутке=)
причем тут прокрутка? когда я показал пример того как выяснить высоту элемента.. Прокрутка этому не помеха.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #14 (permalink)  
Старый 05.07.2012, 19:13
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от cyber
будет работать не правильно при прокрутке=)
не вижу изменений, как показывало 24 так и показывает.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<style>
button {padding: 2px}
</style>
  
<button onclick="
    this.style.height = ( this.getBoundingClientRect().bottom - this.getBoundingClientRect().top ) + 'px';
    alert( 'Высота элемента: ' + (this.getBoundingClientRect().bottom - this.getBoundingClientRect().top))
">click</button>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #15 (permalink)  
Старый 05.07.2012, 19:57
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Да, наверное это самый точный и простой способ, хотя погрешность есть (в хроме видно), но даже это прокатывает.
<style>
  button {padding: 21px; border: solid 5px;}
</style>

<button style="height: 43px" onclick="
  var h = this.getBoundingClientRect().bottom - this.getBoundingClientRect().top;
  this.nextElementSibling.style.height = h;//не для IE
  alert(h +'; ' + this.style.height);
">
click</button> 
<button disabled>click</button>
Ответить с цитированием
  #16 (permalink)  
Старый 05.07.2012, 19:59
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

хм...
getBoundingClientRect() возвращает результат без учета прокрутки, но в данном случае она и не важна.
короче я затупил , сорри =)
Ответить с цитированием
  #17 (permalink)  
Старый 06.07.2012, 12:31
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

Всем спасибо за ответы
Высоту окна getBoundingClientRect() считает отлично, даже если она не была задана. Значит, то, что мне нужно решить с помощью JavaScript можно. Но не работает условие, которое я пишу. Подскажите, пожалуйста, знающие люди, что не так?
function change_visibility (block_4_close, block_4_open)
{
	document.getElementById(block_4_close).style.display='none';
	document.getElementById(block_4_open).style.display='';
}

var size = document.getElementById("contentMenuPersonal").style.height = ( document.getElementById("contentMenuPersonal").getBoundingClientRect().bottom - document.getElementById("contentMenuPersonal").getBoundingClientRect().top ) + 'px';

var dynSize = document.getElementById("bannerBig1").style.height = ( document.getElementById("bannerBig1").getBoundingClientRect().bottom - document.getElementById("bannerBig1").getBoundingClientRect().top ) + 'px';

if (document.getElementById("r0").style.display == 'none') {dynSize = size;}

Остальной код из 1-го поста остался без изменений:
#contentMenuPersonal
{
	display: block;
	z-index: 10;
	position: relative;
	margin: 80px 10px 30px;
	float: left;
	width: 175px;
}
#bannerBig1
{
	width: 680px;
	z-index: 10;
	position: relative;
	margin: 80px 10px 30px;
	float: left;

}

<div id="contentMenuPersonal">
	<table cellspacing="10px" align="center">
		...текст...
	</table>
</div>
<div id="bannerBig1" style="padding: 15px;">
	<div id="r0">
		...текст...
		<a href="javascript:change_visibility ('r0', 'r1')">Читать далее &rarr;</a>
	</div>
	<div id="r1" style="display: none;">
		...текст...
		<a href="javascript:change_visibility ('r1', 'r0')">&larr; скрыть текст</a>
	</div>
</div>
Ответить с цитированием
  #18 (permalink)  
Старый 06.07.2012, 13:47
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

В данном примере способ почему-то не отрабатывает
<style>
#content {
  margin: 80px 10px 30px;
  float: left;
  width: 100px;
  background: green;
}
#banner {
  width: 200px;
  margin: 80px 10px 30px;
  float: left;
  background: lightgreen;
}
</style>

<div id="content">
  <table cellspacing="10px" align="center">
    ...текст...
  </table>
</div>

<div id="banner" style="padding: 15px;">
  <div id="r0">
    ...текст...
    <a href="#">Читать далее &rarr;</a>
  </div>
  <div id="r1" style="display: none;">
    ...текст...<br>    ...текст...<br>    ...текст...
    <a href="#">&larr; скрыть текст</a>
  </div>
</div>

<script>
window.onload = function () {
  var banner = document.getElementById('banner');
  var content = document.getElementById('content');

  banner.onclick = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;

    if (target.tagName == 'A') {
      if (target.parentNode == banner.children[0]) {
        banner.children[1].style.display = 'block';
        banner.style.height = '';
      } else {
        banner.children[1].style.display = 'none';
        banner.style.height = (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top) + 'px';
        alert('content: ' + (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top));
        alert('banner: ' + (banner.getBoundingClientRect().bottom - banner.getBoundingClientRect().top));
      }
    }
  }

}
</script>

Последний раз редактировалось bes, 06.07.2012 в 13:59.
Ответить с цитированием
  #19 (permalink)  
Старый 07.07.2012, 14:45
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

devote, как быть в этой ситуации, padding - явная проблема (хотя в примере с кнопкой прокатило), получается всё-таки getBoundingClientRect() - не лучшее решение.

Упрощённый пример
<div id="content" style="background: green;">
  text
</div>

<div id="banner" style="background: lightgreen; padding: 5px; overflow: hidden">
  <div>
   click
  </div>
  <div>
    click
  </div>
</div>

<script>
var banner = document.getElementById('banner');
var content = document.getElementById('content');

banner.onclick = function (e) {
  banner.style.height = (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top) + 'px';
  alert('content: ' + (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top));
  alert('banner: ' + (banner.getBoundingClientRect().bottom - banner.getBoundingClientRect().top));
}
</script>
Ответить с цитированием
  #20 (permalink)  
Старый 10.07.2012, 12:49
Аватар для Squirr
Интересующийся
Отправить личное сообщение для Squirr Посмотреть профиль Найти все сообщения от Squirr
 
Регистрация: 11.03.2012
Сообщений: 18

Реакция на код в браузере появилась после того, как я скрипт переместил в сам div, который он должен изменять. На отдельно вынесенный js почему-то реакции не было. Но с getBoundingClientRect() всё равно не вышло: в разных браузерах высота разная, и ни в одном не та, которая нужна. Пресловутый padding всё портит, как мастера тут сказали.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение вычисленного значения css свойства FanAizu jQuery 2 12.03.2014 19:30
Как узнать о поддержке браузером CSS свойства? estoesyo Элементы интерфейса 3 18.10.2010 22:12
Использование css свойства display для подменю Lex4e Общие вопросы Javascript 7 07.01.2010 22:02
Запретить свойства из CSS SunnyDay Общие вопросы Javascript 11 29.09.2008 14:30
Изменение имиджа по таймеру с помощью CSS и JavaScript Aimless Общие вопросы Javascript 10 15.08.2008 18:09