VPF::Firefox: element.style.left - Форум программистов

DRAKON

Дата 8.11.2006, 09:41 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 8.11.2006

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

Такая проблема: делаю менюшку, у которой выскакивают подменюшки на DIV-тегах. Ну, короче стандартный вариант.
Так вот: вычисляю, где должна выскачить подменюшка:

Код


function findPos(obj) 
{
    var curleft = curtop = 0;
    
    if (obj.offsetParent) 
    {
        curleft = obj.offsetLeft;
        curtop = obj.offsetTop;
        while (obj = obj.offsetParent) 
        {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        }
    }

    return [curleft, curtop];
}

Тоже стандартный скрипт.. Везде в инете валяется.

А теперь проблема: перемещаю менюшку в нужное место:

Код


var pos = findPos(parent_obj);
obj.style.left = pos[0] + 'px';

Здесь obj - подменюшка, parent_obj - кнопка, на которую навели.

Так вот: в IE и Opera всё пашет изумительно.
В Firefox отступ отсчитывается от середины экрана! Потратил хз скока времени.. Чего тока не пробовал - не помогает smile

Например на www.ag.ru используется почти тот же самый код, но там в Firefox всё гуд... Ничего не понимаю smile

Для наглядности вот немного года:

Стиль менюшки:

Код


DIV.SubMenu
{
    position: absolute;
    visibility: hidden;
    z-index: 10;
    top: 0px;
    left: 0px;
    /* width: 150px; */
    filter: alpha(opacity=100);
    /* display: none; */
}

TABLE.TopMenu TD 
{ 
    background-color: #E3E7E8; 
    cursor: hand; 
    font-size: 11px; 
    letter-spacing: 1px; 
    filter: alpha(opacity=80);
    border: 1px solid #CC0000;
}

TABLE.SubMenu TD
{
    background-color: #E3E7E8; 
    cursor: hand; 
    font-size: 11px; 
    letter-spacing: 1px; 
    filter: alpha(opacity=65);
    border: 1px solid #CC0000;
}

Вот она сама:

Код



<table cellpadding="2" cellspacing="1" border="0" align="center" class="TopMenu">
<tr>
    <td id="menu_1" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Главная</td>
    
    <td id="menu_2" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Ссылки</td>
    
    <td id="menu_3" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Новости</td>
    
    <td id="menu_4" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Статьи</td>
    
    <td id="menu_5" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Файлы</td>
    
    <td id="menu_6" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Правила сервера</td>
    
    <td id="menu_7" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">О сервере</td>
        
    <td id="menu_8" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Сервисы</td>
    
    <td id="menu_9" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Форум</td>
        
    <td id="menu_10" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Статистика CS</td>
</tr>
</table>

<div align="left" class="SubMenu" id="menu_5_sub">
<table cellpadding="2" cellspacing="1"  border="0" align="center" class="SubMenu">

    <tr><td id="menu_11" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Дистрибутив CS 1.6</td></tr>
    
    <tr><td id="menu_12" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Демки сервера</td></tr>
    
    <tr><td id="menu_13" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Архив карт</td></tr>
    
    <tr><td id="menu_14" onmouseover="m_over(this);" 
        onmouseout="m_out(this);" onclick="m_click(this);">Архив видео</td></tr>
    
</table>
</div>

Вот тот самый скрипт с www.ag.ru:

Код


function popup(ev, pa, ch) {
    try {visible.style.visibility = 'hidden';visible.style.display = 'none';}
    catch(f) {}
    try {
        clearTimeout(ti);
        queued.style.visibilty = 'hidden';queued.style.display = 'none';
    }
    catch(f) {}
    ch = document.getElementById(ch);
    var rr = getDim(pa);
    if (isMos != 1) {
        ch.style.pixelLeft = rr.x - 1;
        ch.style.pixelTop = rr.y + pa.offsetHeight;
    }
    else {
        ch.style.left = rr.x - 1 + 'px';
        ch.style.top = (rr.y + pa.offsetHeight) + 'px';
    }
    ch.style.visibility = 'visible';ch.style.display = 'block';
    visible = ch;
}
function getDim(el){
for (var lx=0,ly=0;el!=null;
lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
return {x:lx,y:ly}
}

AKS

Дата 9.11.2006, 09:53 (ссылка)

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

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

DRAKON, вот так функцию переделать пробовали:

Код


function findPos(obj) {
  var curleft = 0, curtop = 0;
  while (obj) {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    obj = obj.offsetParent;
  }
  return [curleft, curtop];
}

DRAKON

Дата 9.11.2006, 17:53 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 8.11.2006

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

Не поможет изменение этой функции.
Я же говорю, проблема в том, что style.left отсчитывается от середины экрана.
А должна от левой стороны.

Nicholas_S

Дата 9.11.2006, 18:56 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 486
Регистрация: 12.10.2006
Где: Санкт-Петербург

Репутация: 5
Всего: 19

DRAKON, проверь, есть ли у какого-то из родительских элементов свойство "margin: auto"...
Если не трудно, кинь полные файлы (html+js), помогу.

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

...все в мире относительно

DRAKON

Дата 9.11.2006, 20:08 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 8.11.2006

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

http://www.dubki.ru/~drakon/js/DUBKI_CS1.6_SERVER.htm (UTF-8)

Nicholas_S

Дата 9.11.2006, 21:02 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 486
Регистрация: 12.10.2006
Где: Санкт-Петербург

Репутация: 5
Всего: 19

DRAKON, все, в принципе, хоккей, единственное, что браузеры на мозилловском движке не так лояльны к размерам блоковых элементов, как, например IE/Opera, поэтому когда ты создаешь слой подменю, указывай для него точные размеры. Сейчас твой слой div.submenu их не имеет, а таблица, расположенная в нем, центрирована, поэтому получется не гуд. Для быстрого решения достаточно хотя бы убрать свойство align у таблицы.

Функцию нахождения координат объекта можно чуть сделать эргономичнее (см. пост AKS)

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

...все в мире относительно

DRAKON

Дата 9.11.2006, 22:18 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 8.11.2006

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

Всё работает. Спасибо. Про функцию - согласен, исправил.

И ещё вопросик по Firefox: почему курсор не в форме руки? Хотя опять же в IE и Opera всё гуд.

12345c

Дата 9.11.2006, 23:22 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

А надо писать cursor:pointer;cursor:hand; в стилях (в таком порядке).

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