Javascript.RU

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

Позиционирование элемента не зависимо от разметки
Нужно для букмарклета.

При клике на букмарклет в body создается элемент в шапке и вся разметка (независимо от указанных стилей) сдвигается вниз на высоту этого элемента..


Сам я пришел к выводу - невозможно. Но может я ошибаюсь?
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2012, 11:15
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<button style="position: absolute; left: 0px; top: 0px">click</button>
<script>
document.body.children[0].onclick = function () {
	document.body.style.cssText = 'position: absolute; left: 20px; top: 20px;';
	document.body.insertAdjacentHTML('afterBegin', '<button style="position: fixed; left: 0px; top: 0px">button</button>');
}
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2012, 19:00
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

bes,
да, а если в body есть элемент с position fixed?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

            window.onload = function () {

                document.getElementById("dg").onclick = function () {

                document.body.style.cssText = "position: absolute; top: 20px;";
                document.body.insertAdjacentHTML('afterBegin', '<div style="position: fixed; left: 0; right: 0; top: 0; height: 20px; background-color: #000; width: 98%; margin: auto; z-index: 9999999;"></div>');

                };


            };


    </script>
</head>
<body>
<div style="position: fixed; width: 35px; height: 35px; top: 0; right: 0; left: 0; margin: auto; background-color: #f00;"></div>
<a id="dg"  href="#">блок для букмарклета</a>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2012, 19:06
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

тут наверное остаётся только делать выборку всех этих элементов и менять их позицию
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2012, 19:22
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

bes,
это может создать слишком большую нагрузку (ведь надо искать по всему DOM), но даже не в этом проблема.
Когда мы изменяет стили у body, его дочерние элементы могут тоже откреагировать и вообще поломать всю верстку

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">

            window.onload = function () {

                document.getElementById("dg").onclick = function () {

                document.body.style.cssText = "position: absolute; top: 20px; width:98%";
                document.body.insertAdjacentHTML('afterBegin', '<div style="position: fixed; left: 0; right: 0; top: 0; height: 20px; background-color: #000; width: 98%; margin: auto; z-index: 9999999;"></div>');

                };


            };


    </script>
</head>
<body>
<div style="position: absolute; width: 35px; height: 35px; top: 0; right: 0; left: 0; margin: auto; background-color: #f00;"></div>
<a id="dg"  href="#">блок для букмарклета</a>

</body>
</html>

Последний раз редактировалось dmitry111, 14.10.2012 в 23:52.
Ответить с цитированием
  #6 (permalink)  
Старый 14.10.2012, 20:29
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

body схлопывается на содержимом, надо добавить ему width: 98%
Ответить с цитированием
  #7 (permalink)  
Старый 15.10.2012, 00:01
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

bes,
ага, не учел
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как то можно узнать ID HTML элемента вызвавшего JavaScript функцию? Opusel Events/DOM/Window 1 18.12.2011 17:36
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 17:58
помогите "уловить" момент появления элемента Bebarr Swallow Events/DOM/Window 4 18.03.2011 08:16
Абсолютное и относительное позиционирование. JSTalker (X)HTML/CSS 2 27.01.2011 06:19
позиционирование элемента KOLANICH Элементы интерфейса 2 10.10.2010 22:55