Форум

eddin · #1 (**permalink**) 11.10.2010, 11:52

Добрый день.
На странице есть два списка. Как сделать, чтобы при загрузке страницы пункты списков с 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 · #2 (**permalink**) 12.10.2010, 00:15

Вот, покопался в инете (в том числе и на данном сайте) и сделал сам. Но по-моему код какой-то фиговый получился. Раздутый. Но я 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>

Jurasmi · #3 (**permalink**) 20.10.2010, 12:58

<!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>

eddin · #4 (**permalink**) 21.10.2010, 17:38

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

Форум

Справочник

Discord чат

Курсы javascript