Разброс тегов по шапке

[Shugich]

Есть вот такая шапка.

Логотип всегда стоит на месте и никуда не движется. Теги же должны быть раскиданы по шапке, не задевая при этом логотип и не вылезая за шапку. Тегов может быть разное количество и всегда они должны быть раскиданы по-разному.

Как такое можно реализовать? о_О

Edited February 16, 2010 by Shugich

[Great Rash]

Ну сейчас то как-то выводятся ссылки?

[psywalker]

А давайте хотябы просто решим эту задачу. Сами придумаем условия, ну вот например скорее всего есть контейнер, можно отталкиватся от этого рисунка http://shugich.ru/head.png, далее мы знаем, что ширина 100%, а высота 171пк, и то, что ссылки не должны заходить за границы и касаться границ логотипа и не должны пересекаться сами по себе.

[Great Rash]

Ок, возьмем абстрактный сайт. Первым делом нам надо получить массив ссылок с которыми мы потом будем работать. Если нет возможности указывать id для каждой конкретной ссылки (да и бред это), то нам нужно всего-лишь получить контейнер в котором все ссылки лежат. Находим его так:

var cont = document.getElementById('container');

затем находим все ссылки внутри этого контейнера:

var links = cont.getElementsByTagName('a');

все, у нас сформирован массив ссылок, с которым мы будем работать.

[psywalker]

Ок, возьмем абстрактный сайт. Первым делом нам надо получить массив ссылок с которыми мы потом будем работать. Если нет возможности указывать id для каждой конкретной ссылки (да и бред это), то нам нужно всего-лишь получить контейнер в котором все ссылки лежат. Находим его так:

var cont = document.getElementById('container');

затем находим все ссылки внутри этого контейнера:

var links = cont.getElementsByTagName('a');

все, у нас сформирован массив ссылок, с которым мы будем работать.

Так, начало отличное, а далее...

[Great Rash]

А далее я предлагаю после того как мы получили все ноды-ссылки и записали их в массив убить контейнер, т.к. он являлся всего-лишь хранилищем для ссылок. Т.е. надо сделать так:

cont.parentNode.removeChild(cont);

Таким образом мы избавимся от, ненужного теперь, контейнера со списком ссылок.

Далее я предлагаю, для начала, забить на логотип и попробовать просто расположить ссылки рандомно в каком-либо диве.

[psywalker]

А далее я предлагаю после того как мы получили все ноды-ссылки и записали их в массив убить контейнер, т.к. он являлся всего-лишь хранилищем для ссылок. Т.е. надо сделать так:

cont.parentNode.removeChild(cont);

Таким образом мы избавимся от, ненужного теперь, контейнера со списком ссылок.

Далее я предлагаю, для начала, забить на логотип и попробовать просто расположить ссылки рандомно в каком-либо диве.

Погоди, т.е. выходит ты сначала его создал, а потом убил?

А нахрена, ведь мы должны в будущем циклом проходится по его ссылкам?

[Great Rash]

Я его не создавал, предполагается, что этот контейнер со ссылками нам выдает сервер в лице CMS.

А убил я его потому что на странице видеть этот контейнер нам (да и юзеру) совершенно не обязательно. А ссылки все у нас теперь хранятся в массиве links.

[psywalker]

Я его не создавал, предполагается, что этот контейнер со ссылками нам выдает сервер в лице CMS.

А убил я его потому что на странице видеть этот контейнер нам (да и юзеру) совершенно не обязательно. А ссылки все у нас теперь хранятся в массиве links.

Ааа, то есть изначально мы присвоили переменной links коллекцию ссылок нашего контейнера и теперь даже при удалении его, мы всё равно будем иметь переменную links, в которой будет коллекция не взирая ни на что?

[Great Rash]

Да, все ноды теперь сохранены в массиве, причем сохранены со всеми своими параметрами (классы, урлы, содержимое и т.п.).

Т.е. links - это у нас массив объектов. А объекты эти являются в данном случае ссылками. По этому контейнер с ссылками нам больше не нужен и его можно спокойно удалять.

[psywalker]

Да, все ноды теперь сохранены в массиве, причем сохранены со всеми своими параметрами (классы, урлы, содержимое и т.п.).

Т.е. links - это у нас массив объектов. А объекты эти являются в данном случае ссылками. По этому контейнер с ссылками нам больше не нужен и его можно спокойно удалять.

Понял, прикольно, тогда продолжай дружище...

[Great Rash]

Продолжаю. Теперь надо написать функцию которая нам будет возвращать габариты объекта.

Я тут написал более-менее универсальную (она конечно требует доработок, но пока и такая сойдет):

function getBounds(obj) {
	var x = 0;
	var y = 0;
	var prnt = obj;

	while (prnt && prnt.nodeName.toLowerCase() != 'body') {
		x += prnt.offsetLeft;
		y += prnt.offsetTop;
		prnt = prnt.offsetParent;
	}

	var x1 = x + obj.offsetWidth;
	var y1 = y + obj.offsetHeight;

	return {'x0': x, 'y0': y, 'x1': x1, 'y1': y1, 'w': obj.offsetWidth, 'h': obj.offsetHeight}
}

// использовать так
alert('x0=' + getBounds(links[0]).x0 + '\ny0=' + getBounds(links[0]).y0); // выдаст координаты верхнего левого угла элемента

links[0] для примера взял, выдаст нули, т.к. нода удалена и на странице ее нет пока.

[psywalker]

Стой дружище, а что всё это значит, вопросы:

1) (prnt && prnt.nodeName.toLowerCase() != 'body') - вот это чё значит всё?

2) И вообще весь пример объясни плиз

[Great Rash]

1) while (prnt && prnt.nodeName.toLowerCase() != 'body') - вот это чё значит всё?

Перевожу с компьютерного на русский: пока есть парент и парент не равен <body>.

Т.е. мы в цикле бежим от элемента вверх по его родителям пока не доберемся до боди (мало ли какая вложенность может быть у элементов) и складываем офсеты всех этих элементов, чтобы узнать где на странице стоит нужный нам элемент.

[psywalker]

А что такое:

1) offsetParent; ?

[Great Rash]

Ага! Кто там в гугль всех отправляет?

https://developer.mozilla.org/en/DOM/element.offsetParent

Грубо говоря, это тоже самое, что parentNode только с учетом офсета.

[psywalker]

Ага! Кто там в гугль всех отправляет?

https://developer.mozilla.org/en/DOM/element.offsetParent

Грубо говоря, это тоже самое, что parentNode только с учетом офсета.

Хаа,да не вопрос, но я не могу всё таки понять

.offsetParent вот эта тема ссылается на родителя, но не содержит же в себе никакиех координат, ни размеров? Почему бы просто не написать так .parentNode.offsetHeight ,вот также ведь мы вычисляем высоту родителя?

[Great Rash]

Нас интересует не высота родителя, а офсет. Т.е. offsetParent дает нам смещение потомка относительно родителя. Попробуй заменить в моем коде offsetParent, на parentNode и ты увидишь, что координата элемента будет находится неверно.

[psywalker]

Погоди, а вот отдельный вопрос

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	body { padding: 50px; border: 1px solid #000;}
	#wrap { width: 300px; height: 300px; padding: 50px; border: 1px solid #000;}
	#span { display: block; height: 100%; border: 1px solid #000;}

</style>

</head>

<body>
<div id="wrap">
	<span id="span">Span</span>
</div>
<script>

var div = document.getElementById('wrap')
var span = document.getElementById('span')

var span = span.offsetLeft

alert(span)

</script>
</body>
</html>

Почему результат алерта 101пк, ведь мы же по-идее должны отсчитывать левый отступ от родителя, а это Див, и он 50пк, а получается что отступ расчитывается от БОДИ, почему так?

[s0rr0w]

	
	while (prnt && prnt.nodeName.toLowerCase() != 'body') {

У бади может быть оффсет свой. Например html { padding: 10px; }

[Great Rash]

Ну тогда можно просто:

while (prnt) { тра-ля-ля }

[psywalker]

Ребят, а на мой вопрос ответьте пожалуйста.

Почему результат алерта 101пк, ведь мы же по-идее должны отсчитывать левый отступ от родителя, а это Див, и он 50пк, а получается что отступ расчитывается от БОДИ, почему так?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	body { padding: 50px; border: 1px solid #000;}
	#wrap { width: 300px; height: 300px; padding: 50px; border: 1px solid #000;}
	#span { display: block; height: 100%; border: 1px solid #000;}

</style>

</head>

<body>
<div id="wrap">
	<span id="span">Span</span>
</div>
<script>

var div = document.getElementById('wrap')
var span = document.getElementById('span')

var y = span.offsetLeft

alert(y)

</script>
</body>
</html>

[s0rr0w]

Ребят, а на мой вопрос ответьте пожалуйста.

Почему результат алерта 101пк, ведь мы же по-идее должны отсчитывать левый отступ от родителя, а это Див, и он 50пк, а получается что отступ расчитывается от БОДИ, почему так?

Потому что офсет высчитывается не от родителя, а от того элемента, который формирует локальную точку отсчета координат

#wrap добавь position: relative, и увидишь разницу

[shvv]

offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the root element (html in standards compliant mode; body in quirks rendering mode) is the offsetParent. offsetParent returns null when the element has style.display set to "none".

Если элемент не позиционирован, возвращается ссылка на корневой элемент - html или body.

Попробуй позиционировать wrap.

UPD. Писал одновременно с s0rr0w, честное слово )

Edited February 16, 2010 by shvv

[psywalker]

Т.е. выходит, что если родителю не заданы position: relative; или position: absolute; или position: fixed;, то точка отсчёта идёт от БОДИ?

А если заданы position: relative; или position: absolute; или position: fixed;, то точка отсчёта идёт от родителей?

[Great Rash]

Да. По этому и нужен цикл, чтобы эту ситуацию предусмотреть.

2s0rr0w:

У меня тут проблемка возникла, не понимаю почему так происходит. Есть вот такой код:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Фильтр</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		#header {
			position: relative;
			height: 98px;
			border: 1px solid;
		}
	</style>

	<script type="text/javascript">
		function test() {
			var cont = document.getElementById('links');
			var head = document.getElementById('header');
			var lnk = cont.getElementsByTagName('a');

			cont.parentNode.removeChild(cont);

			for (var i = 0; i < lnk.length; i++) {
				head.appendChild(lnk[i]);
			}
		}

		function getBounds(obj) {
			var x = 0;
			var y = 0;
			var prnt = obj;

			while (prnt) {
				x += prnt.offsetLeft;
				y += prnt.offsetTop;
				prnt = prnt.offsetParent;
			}

			var x1 = x + obj.offsetWidth;
			var y1 = y + obj.offsetHeight;

			return {'x0': x, 'y0': y, 'x1': x1, 'y1': y1, 'w': obj.offsetWidth, 'h': obj.offsetHeight}
		}

		window.onload = function() {
			test();
		}
	</script>

</head>

<body>

	<div id="links">
		<a href="#">link 1</a>
		<a href="#">link 2</a>
		<a href="#">link 3</a>
		<a href="#">link 4</a>
		<a href="#">link 5</a>
		<a href="#">link 6</a>
		<a href="#">link 7</a>
		<a href="#">link 8</a>
		<a href="#">link 9</a>
		<a href="#">link 10</a>
		<a href="#">link 11</a>
		<a href="#">link 12</a>
		<a href="#">link 13</a>
	</div>

	<div id="header">

	</div>

</body>
</html>

Вопрос: почему ссылки вставляются через одну?

Т.е. link 1, link 3, link 5 и т.д. Совсем не понимаю почему так происходит.