прокручивающееся подменю

[evgh]

неужели ни у кого идей нет, критики хотя бы

[evgh]

у меня там ещё в 43 строчке ошибка (с ней разобрался)

[melky]

all[i].childNodes.length

тут??

[evgh]

угу. исправил. там заодно и текстовые узлы подсчитывались.

но до сих пор не знаю как функцию gg() поправить

[melky]

что она должна делать?

[evgh]

оооо....хоть кто-то заинтересовался моим вопросом

есть многоуровневое меню, некоторые выпадающие подменю очень длинные, и выходят за нижнюю границу страницы. соответственно задумал ограничить списки максимальной высотой и всё лишнее "обрезать" свойством all[i].style.overflowY = 'hidden';

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

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

не знаю как ещё объяснить

тоже самое можно наблюдать если в браузерах (проверял только на FF, Opera, Crome) нажать среднюю кнопку мышки, а потом вводить стрелкой вверх, низ.

[melky]

я делал так. но чуть по-другому. называл это скроллом аля Iphone

только у меня было горизонтально.

http://mazktest.ucoz.ru/shabla/

осталось только тут (меню сверху). делал на скорую руку, на JQuery

структура у списка была такой

<!-- для позиционирования ВСЕГО списка -->
<div id="wrapper">

  <!-- стрелка  влево. -->
  <a class="ltr"> <- </a>

       <!-- сам список -->
       <ul>

                 <!-- обертка для LI -->
                 <span>
                              <li>LOREM IPSUM</li>
                 </span>
      </ul>

  <!-- стрелка  вправо. -->
  <a class="rtr"> -> </a>

</div>

для UL в стилях прописал overflow:hidden, потому что у меня он горизонтальный, поэтому прокрутка только по X. Чтобы убрать их переносимость и сохранить выравнивание, поставил white-space: nowrap;. ( если поставить display:inline-block, будут проблемы с вертикальным выравниванием. я давно это делал, не помню, в каком браузере)

у стрелок float:left и они сдвинуты в сторону. чтобы они не перемещались вместе со скроллом, поставлены рядом со списком

у самих LI стоит просто display:inline-block

попробую сделать пример для такого списка, но вертикального

<style>
#wrapper {

     height : 100px;
     width: 200px;
     
}
#wrapper a {

    margin : 10px 0;

}
#wrapper ul {

   border: 1px red dashed;
   height : 100%;
   overflow-y: scroll;

}



</style>


<div id="wrapper">

  
  <a class="ltr">ВВЕРХ</a>

      
       <ul>

                 
                 <span>
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>             
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>       
                              <li>LOREM IPSUM</li>
                              <li>LOREM IPSUM</li>                
                 </span>
      </ul>

  
  <a class="rtr"> ВНИЗ </a>

</div>

сижу с FF4.01, отображается нормально.

напишем код.попробую без JQuery.

размещу на юкозе

[evgh]

что-то я ничего не вижу на сайте

[melky]

забыл логин и пароль на нем. пофигу

вот пример. убунту-стайл. прокрутка по наводке.

<style>
#wrapper {

     height : 100px;
     width: 200px;
     
}
#wrapper a {

    margin : 0;
    display:block;
    background-color: #555555;
    padding: 5px;

}
#wrapper ul {

   border: 1px red dashed;
   height : 100%;
   overflow-y: hidden;
   margin:0;

}



</style>


<div id="wrapper">

  
  <a class="up">UP</a>

      
       <ul>

                 
                 <span>
                              <li>1</li>
                              <li>2</li>
                              <li>3</li>
                              <li>4</li>             
                              <li>5</li>
                              <li>6</li>       
                              <li>7</li>
                              <li>8</li>       
                              <li>9</li>
                              <li>10</li>       
                              <li>11</li>
                              <li>12</li>       
                              <li>13</li>
                              <li>14</li>       
                              <li>15</li>
                              <li>16</li>       
                              <li>17</li>
                              <li>18</li>                
                 </span>
      </ul>

  
  <a class="down"> DOWN </a>

</div>

<script>
		
// элементы скролла	
var wrapper = document.getElementById('wrapper'),
    as		= document.getElementsByTagName( 'a' ),	// 0 - UP, 1 - DOWN
    ul 		= document.querySelector( 'ul' ),
    span 	= document.querySelector( 'span' ),

    need = (span.offsetHeight||span.scrollHeight) >  ul.offsetHeight, // если скролл есть, то true;

	val = 10; // будет прокручивать по 10 пикселей


//универсальная ф-я для стрелок.
function turn( el ){
	
	//вверх или вниз?
	var up = el.className==='up';

	ul.scrollTop = (up ? (ul.scrollTop - val) : (ul.scrollTop + val) ) 

	
}

// обработчик для стрелок
for(var i=0;i<2;i++)

 (function(i){
    
    // при наведении на стрелку будет прокрутка, с интервалом.
	as[i].onmouseover = function(){
		
		as[i].setAttribute('scid',setInterval( function(a){ turn(a); },50,as[i] ))
		
	}
	
	// когда уводят мышь со стрелки, прокрутка убирается
	as[i].onmouseout  = function(){
		
		clearInterval(as[i].getAttribute('scid'));as[i].removeAttribute('scid');
		
	}
	
})(i)


</script>

[evgh]

универсальность функции turn( el ) понравилась
буду разбираться. спасибо за пример.

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