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

Shugich · February 16, 2010

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

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

Edited February 16, 2010 by Shugich

psywalker · February 17, 2010

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

Ну хорошо, а тогда вопрос:

Вот при таких раскладах как же нам расчитать левый отступ Ноды Спан, от Первого контейнера #wrap ?

Ведь во-первых он всегда выравнивается по середине экрана, во-вторых не имеет ни релатива, ни т.д. ?

<!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}
	html,body { height: 100%;}
	body { padding: 50px; border: 1px solid #000;}
	#wrap { 
		width: 300px;
		height: 300px; 
		padding: 50px; 
		border: 1px solid #000;
		margin: 0 auto;

	}
	#wrap2 { margin-left: 100px;border: 1px solid #000; }
	#span { display: block; height: 100%; border: 1px solid #000;}

</style>

</head>

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

var span = document.getElementById('span')


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

	while (prnt && prnt.nodeName.toLowerCase() != 'html') {
		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(span).x0 + '\ny0=' + getBounds(span).y0);
</script>
</body>
</html>

Great Rash · February 17, 2010

А собственно зачем?

А вообще можно изменить функцию, добавив туда еще параметр:

function getBounds(obj, endElem) {
	var x = 0;
	var y = 0;
	var prnt = obj;
	var end = endElem ? endElem : document.body.parentNode;

	while (prnt && prnt != end) {
		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}
}

Если endElem будет указан, то позиция элемента буден находится только в пределах указанной ноды, если не указать endElem, то позиция элемента будет искаться в пределах документа.

UPD: чутка изменил, вместо document.body.parentNode можно написать document.firstChild.nextSibling, уж не знаю как правильней. А может вообще есть иной способ добраться до ноды <html>

s0rr0w · February 17, 2010

Вопрос: почему ссылки вставляются через одну?
Т.е. link 1, link 3, link 5 и т.д. Совсем не понимаю почему так происходит.

Потому что getElementsByTagName возвращает живой список

У тебя есть элементы

[ 0:1, 1:2, 2:3, 3:4 ]

i = 0;

мы берем, и переставляем его в конец

[ 0:2, 1:3, 2:4, 3: 1]

и увеличиваем итератор на 1

i = 1

первый элемент в коллекции = 3

переставляем его в конец

[ 0:2, 1:4, 2:1, 3:3]

увеличиваем итерацию на 1

i = 2

получаем элемент = 1

переставляем его в конец

[ 0:2, 1:4, 2:3, 3:1]

и увеличиваем итератор на 1

i = 3

переставляем в конец

Смысл понятен?

Да, и, кстати, переставление нод по одной - не самая удачная затея

psywalker · February 17, 2010

А собственно зачем?
А вообще можно изменить функцию, добавив туда еще параметр:
function getBounds(obj, endElem) {
	var x = 0;
	var y = 0;
	var prnt = obj;
	var end = endElem ? endElem.nodeName.toLowerCase() : 'html';

	while (prnt && prnt.nodeName.toLowerCase() != end) {
		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}
}
Если endElem будет указан, то позиция элемента буден находится только в пределах указанной ноды, если не указать endElem, то позиция элемента будет искаться в пределах документа.

А мне просто ради интереса, чтобы понять смысл.

А какой параметр? Всё таки объясни плиз ответ

Вопрос:

Вот смотрите, я сделал так и нихрена, всё ровно от БОДИ считает, почему и что заменить?

<!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}
	html,body { height: 100%;}
	body { padding: 50px; border: 1px solid #000;}
	#wrap { 
		width: 300px;
		height: 300px; 
		padding: 50px; 
		border: 1px solid #000;
		margin: 0 auto;

	}
	#wrap2 { margin-left: 100px;border: 1px solid #000; }
	#span { display: block; height: 100%; border: 1px solid #000;}

</style>

</head>

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


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



function getBounds(obj,endElem) {
	var x = 0;
	var y = 0;
	var prnt = obj;
   var end = endElem ? endElem.nodeName.toLowerCase() : 'html'; 
	while (prnt && prnt.nodeName.toLowerCase() != end) {
		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(span,div).x0 + '\ny0=' + getBounds(span,div).y0);
</script>
</body>
</html>

Great Rash · February 17, 2010

2s0rr0w:

1) не понял почему ноды переставляются в конец?

2) но мне же надо назначить каждой ссылке свои координаты, чтобы раскидать их рандомно в пределах элемента, как же тут обойтись без цикла?

3) в принципе можно сперва вставить все скопом, а потом бежать по ним циклом, но тогда вопрос как вставить все ссылки сразу?

2psywalker:

во-первых, я изменил функцию (неправильно сперва написал), проверь мой пост еще раз

во-вторых я не тестировал, писал так - на память, может и правда не сработает, ща попробую с твоей тестовой страницей повозиться.

psywalker · February 17, 2010

2psywalker:
во-первых, я изменил функцию (неправильно сперва написал), проверь мой пост еще раз
во-вторых я не тестировал, писал так - на память, может и правда не сработает, ща попробую с твоей тестовой страницей повозиться.

Да, если не сложно, просто очень интересно увидеть рабочий вариантик

s0rr0w · February 17, 2010

2s0rr0w:
1) не понял почему ноды переставляются в конец?

А, точно, ты выбираешь из конкретной ноды.

Тогда тебе другой пример

[ 0:1, 1:2, 2:3, 3: 4 ]

0я итерация

переместить ноду с индексом 0 (1)

[ 0:2, 1:3, 2:4 ]

1я итерация

переместить ноду с индексом 1 (3)

[0:2, 1:4 ]

А тут и массив закончился.

2) но мне же надо назначить каждой ссылке свои координаты, чтобы раскидать их рандомно в пределах элемента, как же тут обойтись без цикла?

В таком случае, да.

3) в принципе можно сперва вставить все скопом, а потом бежать по ним циклом, но тогда вопрос как вставить все ссылки сразу?

var tmpRange = document.createRange();

tmpRange.selectNodeContents( fromNode );

var tmpContext = tmpRange.extractContents();

container.appendChild(tmpContext);

Для ИЕ - innerHTML

psywalker · February 17, 2010

s0rr0w

1) А что значит живой список?

2) Т.е. по твоему примеру выходит:

[ 0:1, 1:2, 2:3, 3:4 ]

Нулевой элемент - это первая ссылка?

Первый элемент - это вторая ссылка?

И т.д. ?

3) i = 0; - означает, что мы обращаемся к первому элементу, т.е. к ссылке 0:1, которая идёт самая первая в коллекции?

4)

мы берем, и переставляем его в конец

[ 0:2, 1:3, 2:4, 3: 1]

А тут выходит, мы взяли первую ссылку 0:1 и забросили её в конец и теперь она стала третьей? А первой стала - вторая?

5)

Great Rash · February 17, 2010

В общем я придумал тупо циклом бежать с конца вот так:

for (var i = lnk.length - 1; i >= 0; i--) {
	head.appendChild(lnk[i]);
}

Только ссылки у меня тогда вставляются наоборот. Это не принципиально, т.к. все равно они рандомно будут раскиданы на странице, но хотелось бы понять нет ли способа развернуть этот массив (т.е. "живой список")? Пробовал писать lnk.reverse(); но такая запись не работает, т.к. lnk это не массив, а объект...

А что значит живой список?

Я точно не знаю, но знаю, что getElementsByTagName('a'); вернет не массив, а объект (это видно если вывести тип переменной алертом - var lnk = getElementsByTagName('a'); alert(typeof lnk);). Т.е. это не набор нод будет, а набор ссылок на них в DOM'е.

psywalker · February 17, 2010

А что если сделать так?

for (var i = lnk.length - 1; i >= 0; i--) {
	var ch = 13-i
	lnk[i].innerHTML = 'link '+ ch
	head.appendChild(lnk[i]);

}

Great Rash · February 17, 2010

Не, таким макаром ты просто в i-той ссылке изменишь текст.

Т. е. если, допустим, вторая ссылка была такая:

<a href="#">Контакты</a>

то она станет такая:

<a href="#">Контакты 1</a>

Тут же не в номерах дело, а в конкретных ссылках.

psywalker · February 17, 2010

Не, таким макаром ты просто в i-той ссылке изменишь текст.
Т. е. если, допустим, вторая ссылка была такая:
<a href="#">Контакты</a>
то она станет такая:
<a href="#">Контакты 1</a>
Тут же не в номерах дело, а в конкретных ссылках.

Согласен, тогда вообще предлагаю забыть об этом, а можно просто тупо написать так

И тогда последняя как раз будет первая

Great Rash · February 17, 2010

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

s0rr0w · February 17, 2010

s0rr0w
1) А что значит живой список?

Это значит, что если удалить элемент из этого списка, то уменьшится длина списка и элементы получат новые индексы.

И т.д. ?

Да

3) i = 0; - означает, что мы обращаемся к первому элементу, т.е. к ссылке 0:1, которая идёт самая первая в коллекции?

Да

А тут выходит, мы взяли первую ссылку 0:1 и забросили её в конец и теперь она стала третьей? А первой стала - вторая?
5)

Да

В общем я придумал тупо циклом бежать с конца вот так:
for (var i = lnk.length - 1; i >= 0; i--) {
	head.appendChild(lnk[i]);
}

А на самом деле достаточно было

while ( lnk.length ) {

head.appendChild(lnk.item(0));

}

Edited February 17, 2010 by s0rr0w

psywalker · February 17, 2010

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

А тогда и не важно дружище, они всё равно же будут разбросаны в хаотическом порядке по периметру шапки.

И отдельный вопрос

http://forum.htmlbook.ru/index.php?s=&...st&p=139572

s0rr0w

1) А что значит живой список?
Это значит, что если удалить элемент из этого списка, то уменьшится длина списка и элементы получат новые индексы.

Но секудну, этим действием мы же ничего не удаляем и не переносим из этой коллекции var lnk = cont.getElementsByTagName('a'); ?

while ( lnk.length ) {

head.appendChild(lnk.item(0));

}

Мы просто же копируем первый элемент и вставляем его в контейнер head? А элемент в коллекции var lnk всё равно остаётся же на месте?

s0rr0w · February 17, 2010

Мы просто же копируем первый элемент и вставляем его в контейнер head? А элемент в коллекции var lnk всё равно остаётся же на месте?

Нода переносится. Для копирования нужно сначала сделать клон, а потом клон перемещать.

psywalker · February 17, 2010

Нода переносится. Для копирования нужно сначала сделать клон, а потом клон перемещать.

Ну я имел ввиду не копирование, а именно то, что нода то переноситься, но коллекция в переменной ведь так и остаётся 13 элементов, как и была?

s0rr0w · February 17, 2010

Ну я имел ввиду не копирование, а именно то, что нода то переноситься, но коллекция в переменной ведь так и остаётся 13 элементов, как и была?

Нет, из коллекции эта нода пропадает.

У тебя две корзины, одна пустая, другая с яблоками (15 штук)

Один человек носит по одному яблоку из второй корзины яблоки себе на стол, а ты в это время перекладываешь из второй корзины в первую.

Сколько яблок сможет перенести человек? 15?

psywalker · February 17, 2010

Нет, из коллекции эта нода пропадает.
У тебя две корзины, одна пустая, другая с яблоками (15 штук)
Один человек носит по одному яблоку из второй корзины яблоки себе на стол, а ты в это время перекладываешь из второй корзины в первую.
Сколько яблок сможет перенести человек? 15?

Аа, т.е. вот этим действием мы перекладываем первый элемент из коллекции в контейнер?

while ( lnk.length ) {
head.appendChild(lnk.item(0));

И при каждом перекладывании коллекция уменьшается на первый элемент?

Great Rash · February 17, 2010

А на самом деле достаточно было
while ( lnk.length ) {
head.appendChild(lnk.item(0));
}

О! Спасибо!

psywalker · February 17, 2010

Great Rash

Извини, а что поделать

http://forum.htmlbook.ru/index.php?s=&...st&p=139572

Great Rash · February 17, 2010

Что-то ссылку обрезало, запихни в тег url

psywalker · February 17, 2010

<!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}
	html,body { height: 100%;}
	body { padding: 50px; border: 1px solid #000;}
	#wrap {
		width: 300px;
		height: 300px;
		padding: 50px;
		border: 1px solid #000;
		margin: 0 auto;

	}
	#wrap2 { margin-left: 100px;border: 1px solid #000; }
	#span { display: block; height: 100%; border: 1px solid #000;}

</style>

</head>

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


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



function getBounds(obj,endElem) {
	var x = 0;
	var y = 0;
	var prnt = obj;
   var end = endElem ? endElem.nodeName.toLowerCase() : 'html';
	while (prnt && prnt.nodeName.toLowerCase() != end) {
		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(span,div).x0 + '\ny0=' + getBounds(span,div).y0);
</script>
</body>
</html>

psywalker · February 18, 2010

Ребят, простите, а я думал, мы только начали

Great Rash · February 18, 2010

Эх времени совсем нет.

Sign In

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

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

76 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information