Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.10.2010, 11:52
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 60

Автоматический скроллинг к центру блока по вертикали
Добрый день.
На странице есть два списка. Как сделать, чтобы при загрузке страницы пункты списков с ID устанавливались по центру видимой части блоков.
Вот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тест скроллинга</title>
<style type="text/css">
.menu {
 list-style:none;
 border: 2px solid black;
 overflow:auto;
 height:100px;
}
</style>
</head>
<body>
 <ul class="menu">
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li id="this_centre1" style="color:red">Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li>
 </ul>

 <ul class="menu">
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li>
  <li id="this_centre2" style="color:red">Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li>
 </ul>
</body>
</html>

Последний раз редактировалось eddin, 12.10.2010 в 00:10. Причина: Поправил ID, они у меня одинаковые были у обоих li
Ответить с цитированием
  #2 (permalink)  
Старый 12.10.2010, 00:15
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 60

Вот, покопался в инете (в том числе и на данном сайте) и сделал сам. Но по-моему код какой-то фиговый получился. Раздутый. Но я JavaScript не силен, поэтому подскажите, может можно как-то попроще все организовать? Заранее благодарю!
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тест скроллинга</title>
<style type="text/css">
.menu {
 list-style:none;
 border: 2px solid black;
 overflow:auto;
 height:100px;
}
</style>
<script type="text/javascript">
function Offset_Top(element) {
var offsetTop = 0;
 do {  
  offsetTop += element.offsetTop;
 } while (element = element.offsetParent);
return offsetTop; 
}

function myscroll(){
var this_centre1=document.getElementById("this_centre1");
var this_centre2=document.getElementById("this_centre2");
if (this_centre1 == null || this_centre2 == null) return true;
var menu1=this_centre1.parentNode;
var menu2=this_centre2.parentNode;
var rasst1=Offset_Top(this_centre1)-Offset_Top(menu1);
var rasst2=Offset_Top(this_centre2)-Offset_Top(menu2);

if (rasst1 < menu1.scrollHeight - (menu1.offsetHeight >> 1))
menu1.scrollTop=rasst1-(menu1.offsetHeight >> 1);
else
menu1.scrollTop=menu1.scrollHeight - menu1.offsetHeight;

if (rasst2 < menu2.scrollHeight - (menu2.offsetHeight >> 1))
menu2.scrollTop=rasst2-(menu2.offsetHeight >> 1);
else
menu2.scrollTop=menu2.scrollHeight - menu2.offsetHeight;
}
window.onload=myscroll;

</script>
</head>
<body>
 <ul class="menu">
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li id="this_centre1" style="color:red">Пункт1</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li>
 </ul>

 <ul class="menu">
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li>
  <li id="this_centre2" style="color:red">Пункт1</li>
  <li>Пункт</li><li>Пункт</li><li>Пункт</li>
  <li>Пункт</li>
 </ul>
</body>
</html>

Последний раз редактировалось eddin, 12.10.2010 в 00:17.
Ответить с цитированием
  #3 (permalink)  
Старый 20.10.2010, 12:58
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
		<title>Тест скроллинга</title>
		<style type="text/css">
			.menu {
				list-style:none;
				padding:0;
				border: 1px solid black;
				overflow:auto;
				height:300px;
				margin:0 0 2em 0;
			}
		</style>

		<script type="text/javascript">
			window.onload = function(){
				var prev = function(elem){
						do{
							elem = elem.previousSibling;
						}while (elem && elem.nodeType != 1);
						return elem;
					},
					
					scrollToElement = function(theElement){
						var selectedPosY = 0,
							menu = theElement.parentNode,
							elH = theElement.offsetHeight;
						
						while(theElement != null){
							selectedPosY += theElement.offsetHeight;
							theElement = prev(theElement);
						}
						menu.scrollTop = selectedPosY - menu.offsetHeight/2 - elH/2;
					};
				
				
				scrollToElement(document.getElementById("this_centre1"));
				scrollToElement(document.getElementById("this_centre2"));
			}
		</script>
	</head>

	<body>
		<ul class="menu">
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li id="this_centre1" style="color:red">Пункт1</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li>
		</ul>

		<ul class="menu">
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li>
			<li id="this_centre2" style="color:red">Пункт1</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li><li>Пункт</li><li>Пункт</li>
			<li>Пункт</li>
		</ul>
	</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2010, 17:38
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 60

Jurasmi, спасибо большое за помощь, все работает. Щас буду разбираться.
Ответить с цитированием
Ответ



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

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