Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   изменение ширины он лоад (https://javascript.ru/forum/dom-window/10304-izmenenie-shiriny-load.html)

cristalith 27.06.2010 15:29

изменение ширины он лоад
 
<ul class="level1">
  <li>text</li>
  <li>text <ul class="level2">
               <li>text</li>
               <li>text</li>
             </ul>
    </li>
</ul>


Как с помощью js сделать чтобы width списка "level2" задавалась "level1 - 100px" ? Это должно происходить при открытии страницы.

subzey 27.06.2010 15:36

А зачем тут яваскрипт-то?
<style type="text/css">
	ul.level1,
	ul.level1 ul {
		display: block;
		margin: 0px;
	}
	ul.level1 ul {
		margin-left: 100px;
	}
	ul.level1 li {
		display: block;
		list-style: none outside;
		padding: 0px;
		margin: 3px 0px;

	}
	
	ul.level1 li {background: yellow} ul.level2 li {background: orange} /* для декоративных целей исключительно */
</style>

<ul class="level1"> 
	<li>text</li> 
	<li>text
		<ul class="level2"> 
			<li>text</li> 
			<li>text</li> 
		</ul> 
	</li> 
</ul>

cristalith 27.06.2010 15:50

В моем случае, там списки с закругленными уголками и всякой декоративной ерундой. Этот вопрос с заказчиком решили уже.
Спасибо,
но все же остался интерес, как это сделать на js ?

exec 27.06.2010 15:59

$(window).load(function () {
$('ul.level1').each(function () {
$('ul.level2', this).css('width', $(this).width() - 100);
});
});


Вариант на jQ, на JS многовато писать надо, тем более для примера.

subzey 28.06.2010 11:23

exec,
Только не .load, а .ready, самого иногда так привычка подводит. :)

Кстати, с .ready связан небольшой подводный камень. С какой-то-там версии .ready вызывается не по onload, а по DOMContentLoaded (и его аналогов с readyStateChange). Все скрипты в коде к тому моменту уже отработали, но то, что цсс подгрузился - не факт.

Точнее, это зависит от браузера. Ие и файрфокс задерживают выполнение скрипта на, скажем, .width(), пока стиль не подгрузится.
Хром не ждет, в нем при определенной избирательной тормознутости интернетов .width может вернуть неожиданные результаты.
Опера ждет 3 секунды, после чего продолжает выполнение скрипта.


Часовой пояс GMT +3, время: 09:32.