VPF::выпадающее меню через style.top и style.clip

Alx

Дата 26.6.2007, 14:17 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

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

вот здесь и здесь выпадающие списки 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;
        }
    }

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

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

Это сообщение отредактировал(а) Alx - 26.6.2007, 22:55

--------------------

SelenIT

Дата 26.6.2007, 22:01 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

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

По последнему стандарту, координаты области клиппинга должны разделяться запятыми, хотя браузеры обязаны понимать и без запятых. Проверил в FF 2 - он подставляет запятые автоматом. Но вряд ли это сильно на что-то влияет, разве что чуть замедлить может... Но я бы, пожалуй, не колдовал бы со split - join, а каждый раз собирал строку "тупо с нуля" - имхо, так понадежнее.

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Alx

Дата 26.6.2007, 22:46 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

ой, сорри, ссылки локалькины вставил. сейчас исправлю!

с 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;
                }

Это сообщение отредактировал(а) Alx - 26.6.2007, 22:56

--------------------

SelenIT

Дата 26.6.2007, 23:37 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

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

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Alx

Дата 26.6.2007, 23:59 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

Цитата(SelenIT @ 26.6.2007, 23:37

)

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

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

Цитата(SelenIT @ 26.6.2007, 23:37

)

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

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

--------------------

Alx

Дата 9.8.2007, 15:10 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

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

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

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »