Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > выпадающее меню через style.top и style.clip


Автор: Alx 26.6.2007, 14:17
привожу пример сразу на сайте, чтобы не создавать отдельной странички, если будет непонятно, скажите, сделаю только менюшку отдельно.

вот http://alx.vingrad.ru/fwc/ru/smartselect#doc-intro и http://alx.vingrad.ru/fwc/ru/smartselect#examples выпадающие списки smartselect.
почему-то как-то глючит раскрытие списка. как будто неправильно работает свойство clip, часть выпадающего слоя мелькает над тем местом, где она должна быть невидима.. только в Firefox, в IE и Opera всё ок.

приведу код с комментариями:

Код

// функция API
FWC_sSelect.prototype.showOptions = function(noanim)
{   this.optionsDiv.style.visibility = 'visible'; // сперва делаем слой видимым, может в этом проблема?
    var maxh = this.maxheight || 100; // задаём высоту div`а
    this.optionsDiv.style.height = 'auto';
    this.optionsDiv.style.height = ((this.optionsDiv.offsetHeight > maxh) && (maxh != 0)) ? maxh : 'auto';
    var _height = this.optionsDiv.offsetHeight;

    if(this.showspeed !== 0 && !noanim) // условия анимированного открытия
    {   var t = this;
        if(FWC.hides[this.id]) // проверка не идет ли в этот момент _скрытие_ этого слоя
        {   clearInterval(FWC.hides[this.id]); // и отменяет его
            FWC.hides[this.id] = false;
        }
        else // иначе задает свойства clip и top как для скрытого, невидимого списка
        {   this.optionsDiv.style.clip = "rect("+_height+"px "+this.optionsDiv.offsetWidth+"px "+_height+"px 0px)";
            this.optionsDiv.style.top = this.top - _height + 'px';
        }
        // и создает таймаут функции FWC.show, передавая ей ссылку на слой, шаг сдвига и необходимое конечное значение (оно всегда задано в свойстве top объекта)
        FWC.shows[this.id] = setInterval(function() {FWC.show(t.optionsDiv,15,t.top)},this.showspeed);
    }
}    

////////............////////////

    show : function(obj,step,max)
    {   if(obj.offsetTop < max) // если позиция слоя меньше максимальной
        {   step = (step+obj.offsetTop <= max ? step : max-obj.offsetTop); // сокращаем шаг сдвига, если мы близки к максимуму
        
            obj.style.top = obj.offsetTop + step + 'px'; // сдвиг
            // следующие 3 строки меняют свойство clip. правильно ли я это делаю?
            var clip = obj.style.clip.split(" ");
            clip[0] = "rect("+(parseInt(clip[0].substring(5,clip[0].length-2))-step)+"px";
            obj.style.clip = clip.join(" ");
        }
        else // если достигли максимума - удаляем таймаут
        {   clearInterval(FWC.shows[obj.id.replace("_options","")]);
            FWC.shows[obj.id.replace("_options","")] = false;
        }
    }


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

не понимаю, что делаю не так..
надеюсь на помощь, спасибо!

Автор: SelenIT 26.6.2007, 22:01
Почему-то ссылки не открываются, даже если меняю первые слеши на точки... в адресе ничего не пропущено?

По http://www.w3.org/TR/CSS21/visufx.html#propdef-clip, координаты области клиппинга должны разделяться запятыми, хотя браузеры обязаны понимать и без запятых. Проверил в FF 2 - он подставляет запятые автоматом. Но вряд ли это сильно на что-то влияет, разве что чуть замедлить может... Но я бы, пожалуй, не колдовал бы со split - join, а каждый раз собирал строку "тупо с нуля" - имхо, так понадежнее.

А так ошибок не вижу... Кстати, а overflow у этого слоя какой?

Автор: Alx 26.6.2007, 22:46
ой, сорри, ссылки локалькины вставил. сейчас исправлю!

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

<div class="{$skin}_OptionsDiv" style="visibility:hidden;overflow:auto;height:auto;overflow-y:auto;overflow-x:hidden;">

описание класса:
Код

.ss_winxp_OptionsDiv {
                -moz-user-select:none;
                cursor:default;
                position:absolute;
                left:0px;top:22px;
                text-align:left;
                color:black;
                font-family:'Arial Unicode MS';
                font-size:14px;
                background:white;
                border:1px solid black;
                padding:0px;
                }

он содержит набор таких конструкций:
Код

<span class="{$skin}_Option_Free_Out"><nobr>Option content</nobr></span>

описание класса:
Код

.ss_winxp_Option_Free_Out {
                display:block;
                overflow:hidden;
                font-family:'Microsoft Sans Serif';
                font-size:10pt;
                color:black;
                cursor:default;
                line-height:16px;
                padding-left:2px;
                }

Автор: SelenIT 26.6.2007, 23:37
У меня есть опасения, что с overflow<-y>:auto клиппинг может и не работать. Я бы ставил жесткие размеры и железный overflow:hidden. А если нужна прокрутка списка опций - делал бы ее в дополнительном вложенном контейнере 100%-й высоты...

Кстати, а почему бы не менять от нуля до заданного предела саму высоту слоя - разве это не проще, чем обуздание клиппинга?

Автор: Alx 26.6.2007, 23:59
Цитата(SelenIT @  26.6.2007,  23:37 Найти цитируемый пост)
У меня есть опасения, что с overflow<-y>:auto клиппинг может и не работать. Я бы ставил жесткие размеры и железный overflow:hidden. А если нужна прокрутка списка опций - делал бы ее в дополнительном вложенном контейнере 100%-й высоты...

сэнькс, и тут покапаю.

Цитата(SelenIT @  26.6.2007,  23:37 Найти цитируемый пост)
Кстати, а почему бы не менять от нуля до заданного предела саму высоту слоя - разве это не проще, чем обуздание клиппинга? 

ну визуальный эффект совсем другой будет..

Автор: Alx 9.8.2007, 15:10
SelenIT, ты был прав, при задании overflow:hidden глюки прошли, но как только я создал внутри ещё один div style="width:100%;height:100%;overflow-x:hidden;overflow-y:auto" снова начало рябить..
есть идеи?

Добавлено через 14 минут и 17 секунд
в общем я включаю overflow после раскрытия и выключаю перед закрытием, SelenIT +1!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)