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

Shugich · February 16, 2010

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

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

Edited February 16, 2010 by Shugich

psywalker · February 16, 2010

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

Думаю нужно воспользоваться объектом Math для случайной генерации координат в пределах шапки, но не задевая логотип. И с каждым обновлением страницы он будет генерировать разные координаты.

Shugich · February 16, 2010

Благодарствую... Сейчас изучать буду :lol:

psywalker · February 16, 2010

Благодарствую... Сейчас изучать буду

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

Great Rash · February 16, 2010

Я бы еще создавал временный <div> в который помещал бы текст ссылки перед генерацией, чтобы узнавать ширину этого текста и, таким образом, узнать не вылезет ли ссылка из контейнера справа или снизу.

Shugich · February 16, 2010

> Я бы еще создавал временный <div> в который помещал бы текст ссылки перед генерацией

А вот с этим проблема... Ссылки нельзя обработать никак. У них автоматом задн класс и все. А запихать их в конетейнер нельзя (ну только все вместе).

Great Rash · February 16, 2010

Все можно, в яваскрипте широкие возможности для работы с DOM. И сделать копию ноды не составляет труда.

psywalker · February 16, 2010

Great Rash

А покажи плиз свой вариант.

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

Я сделал набросок, но меня не устраивает очень многое.

1) Как мне например сказать, что если:

	if(left>255){
		if(left<610){
			То мы генерируем координаты заново, пока не будет нужных?
		}
	}

2) Как же всё таки расчитать размер текста внутри ссылки?

Сам набросок: Просто понажимайте f5, всё увидите.

<!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>Head-Math</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { padding-top: 50px; }
	#head { 
		width: 919px; 
		height: 171px; 
		background: #4e5453;
		position: relative;
		margin: 0 auto;
		overflow: hidden;
	}
		#logo { 
			width: 356px; 
			height: 74px; 
			border: 1px solid #000;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -178px;
			margin-top: -37px;
		}
			#logo img { display: block; border: none;}

		a { 
			color: #fff; 
			border: 1px solid #0F0;
			position: absolute;
		}



</style>

</head>

<body>

	<div id="head">
		<a href="#" id="logo"><img src="logo.jpg" alt="Андрей Пронин"></a>
		<a href="#" id="desing">Дизайн</a>
	</div>

<script type="text/javascript">

	var head = document.getElementById('head')
	var desing = document.getElementById('desing')

	var top = 0;
	var left = 0;
	left = Math.round(Math.random()*919)
	top = Math.round(Math.random()*171)

	if(left>255){
		if(left<610){

		}
	}
			desing.style.top = top+'px'
			desing.style.left = left+'px'

</script>

</body>
</html>

Great Rash · February 16, 2010

А покажи плиз свой вариант.

Ох ща времени в обрез, но задача интересная. Сделаем как время появится...

psywalker · February 16, 2010

Ох ща времени в обрез, но задача интересная. Сделаем как время появится...

Да, очень интересная, хотелось бы увидеть решение или хотябы для начала ответить на мои вопросы в пред.посте, чтобы лёд у меня тронулся. :lol:

Great Rash · February 16, 2010

1) if (left > 255 && left < 610) { тра-ля-ля }

2) слишком обширный ответ надо писать, вкратце надо создавать яваскриптом временный див, в него загонять текст ссылки, мерить ширину и высоту дива и убивать временный див. ну или не убивать а пусть себе висит где-нить с left: -9999px; и position: absolute;, чтоб к DOM лишний раз не обращаться.

psywalker · February 16, 2010

1) if (left > 255 && left < 610) { тра-ля-ля }
2) слишком обширный ответ надо писать, вкратце надо создавать яваскриптом временный див, в него загонять текст ссылки, мерить ширину и высоту дива и убивать временный див. ну или не убивать а пусть себе висит где-нить с left: -9999px; и position: absolute;, чтоб к DOM лишний раз не обращаться.

1) В том то и дело, что я не знаю, что писать вместо тра-ля-ля , мне нужно, чтобы ссылки меняли координаты до тех пор, пока не выдут из диапозона (left > 255 && left < 610)

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

Great Rash · February 16, 2010

В том то и дело, что я не знаю, что писать вместо тра-ля-ля , мне нужно, чтобы ссылки меняли координаты до тех пор, пока не выдут из диапозона (left > 255 && left < 610)

ааа, допер.

var links = [link1, link2, link3, link4]; // массив нод-ссылок (<a>)

for (var i = 0; i < links.length; i++) {
	while (true) {
		 var randX = Math.floor( Math.random( ) * (1000+1) ); // рандомное число от 0 до 1000 включительно
		 if (randX > 255 && randX < 610) {
			 link1.style.left = randX + 'px';
			 break;
		 }
	}
}

как-то так

psywalker · February 16, 2010

С подачи Great Rash лёд тронулся. Но также появилось ряд вопросов.

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

Поэтому код таков.

<!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>Head-Math</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { padding-top: 50px; }
	#head { 
		width: 919px; 
		height: 171px; 
		background: #4e5453;
		position: relative;
		margin: 0 auto;
		overflow: hidden;

	}
	.wrap {
			position: relative;

			height: 100%;
		}
		#logo { 
			width: 356px; 
			height: 74px; 
			border: 1px solid #000;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -178px;
			margin-top: -37px;
		}
			#logo img { display: block; border: none;}

		a { 
			color: #fff; 
			border: 1px solid #0F0;
			position: absolute;
			font-size: 13px;
		}



</style>

</head>

<body>

	<div id="head"><div class="wrap">
		<a href="#" id="logo"><img src="logo.jpg" alt="Андрей Пронин"></a>
		<a href="#" id="desing">Дизайн</a>
	</div></div>

<script type="text/javascript">

	var head = document.getElementById('head')
	var desing = document.getElementById('desing')

	var topA = 0;
	var leftA = 0;



	cikl: while (true) {
		 var leftA = Math.round(Math.random()*919)
		 var topA = Math.round(Math.random()*146)
		 if (leftA < 250 ) {
			 desing.style.left = leftA + 'px';
			 	 while (true) {
					var topA = Math.round(Math.random()*146)
					if (topA < 146 ) {
						desing.style.top = topA + 'px';
						break cikl;
					}
				}
		}
		 if (leftA > 250 && leftA < 650) {
			 desing.style.left = leftA + 'px';
			 	 while (true) {
					var topA = Math.round(Math.random()*146)
					if (topA < 35 ) {
						desing.style.top = topA + 'px';
						break cikl;
					}
					if (topA > 125 ) {
						desing.style.top = topA + 'px';
						break cikl;
					}
				}
		}
		 if (leftA > 650 ) {
			 desing.style.left = leftA + 'px';
			 	 while (true) {
					var topA = Math.round(Math.random()*171)
					if (topA < 171 ) {
						desing.style.top = topA + 'px';
						break cikl;
					}
				}
		}
	}



</script>

</body>
</html>

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

Вопросы:

1) Как наладить отступы у ссылки так, чтобы она всё же не попадала за границы шапки и не попадала в граничные пределы логотипа?

2) Какие ещё будут идеи, уважаемые камрады? Если можно, с наглядными примерами :lol:

Shugich · February 16, 2010

Возникла еще одна проблема. Ссылка иногда заскакивает за пределы шапки...

Шапка, кстати, на 100% по ширине...

еще такой момент, у ссылки нет id и задать его невозможно :lol:

psywalker · February 16, 2010

Шапка, кстати, на 100% по ширине...

Вот это уже меняет дело, тогда вопросы ещё имеются

3) Что делать, как мне задавать тада координаты, если сумма ширины 100%?

4)

еще такой момент, у ссылки нет id и задать его невозможно sad.gif

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

Как поступить в данном случае?

Shugich · February 16, 2010

у ссылок есть только класс... на все ссылки он один :lol:

Great Rash · February 16, 2010

Давайте тогда по порядку. Откуда у вас приходят ссылки? Это какой-то массив или что?

psywalker · February 16, 2010

у ссылок есть только класс... на все ссылки он один

да уж, задачка не из лёгких, для меня уж тем-более, но подождём экспертов, наверное варианты будут

Shugich · February 16, 2010

Облако тегов системы uCoz.

Пример тут можно глянуть: http://shugich.ru/index/about/0-15

psywalker · February 16, 2010

Давайте тогда по порядку. Откуда у вас приходят ссылки? Это какой-то массив или что?

А можно кстати массив сделать, ага. Но тогда вопрос, как то нужно каждую ссылку по отдельному диапазону кидать, мало того, чтобы они ещё и не пересикались сами по себе

Облако тегов системы uCoz.
Пример тут можно глянуть: http://shugich.ru/index/about/0-15

А где пример?

Shugich · February 16, 2010

А где пример?

Под заголовком "Какую музыку я слушаю:"

Great Rash · February 16, 2010

Ну и? Причем тут это? Вы то откуда ссылки берете?

Shugich · February 16, 2010

Ссылки...

Хм, при добавлении материалов на сайт я прописываю теги. Ссылки CMS сама создает...

Great Rash · February 16, 2010

Ок, у них есть какой нибуть контейнер? Ну куда эта CMS кидает ссылки когда их создает?

Shugich · February 16, 2010

Эм... Я не знаю как она работает... Вообще никто кроме разработчиков не знает как она работает... :lol:

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