неужели ни у кого идей нет, критики хотя бы ;)
|
у меня там ещё в 43 строчке ошибка :( (с ней разобрался)
|
all[i].childNodes.length тут?? |
угу. исправил. там заодно и текстовые узлы подсчитывались.
но до сих пор не знаю как функцию gg() поправить |
что она должна делать?
|
оооо....хоть кто-то заинтересовался моим вопросом :dance:
есть многоуровневое меню, некоторые выпадающие подменю очень длинные, и выходят за нижнюю границу страницы. соответственно задумал ограничить списки максимальной высотой и всё лишнее "обрезать" свойством all[i].style.overflowY = 'hidden'; а функция должна вычислить позицию стрелки мышки относительно выпадающего списка, в процентном соотношении (я вроде тоже самое на первой странице топика сказал). то есть если стрелка внизу выпадающего списка, то прокрутить список вверх, что бы показать те элементы которые скрыты внизу, и наоборот, если стрелка рядом с верхней границей то прокрутить вниз, что бы показать что сверху скрыто. не знаю как ещё объяснить :-? тоже самое можно наблюдать если в браузерах (проверял только на FF, Opera, Crome) нажать среднюю кнопку мышки, а потом вводить стрелкой вверх, низ. |
я делал так. но чуть по-другому. называл это скроллом аля 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. размещу на юкозе |
что-то я ничего не вижу на сайте
|
забыл логин и пароль на нем. пофигу :)
вот пример. убунту-стайл. прокрутка по наводке.
<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>
|
универсальность функции turn( el ) понравилась :)
буду разбираться. спасибо за пример. аха, у тебя другой метод. эти кнопки я думал после добавить, но и лучше будет твой вариант более простой и короткий использовать и не заморачиваться. |
| Часовой пояс GMT +3, время: 15:19. |