Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> 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}
}
PM WWW   Вверх
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];
}

 ?
PM MAIL   Вверх
DRAKON
Дата 9.11.2006, 17:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Не поможет изменение этой функции.
Я же говорю, проблема в том, что style.left отсчитывается от середины экрана.
А должна от левой стороны.
PM WWW   Вверх
Nicholas_S
Дата 9.11.2006, 18:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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


--------------------
...все в мире относительно
PM   Вверх
DRAKON
Дата 9.11.2006, 20:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
http://www.dubki.ru/~drakon/js/DUBKI_CS1.6_SERVER.htm (UTF-8)
PM WWW   Вверх
Nicholas_S
Дата 9.11.2006, 21:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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

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


--------------------
...все в мире относительно
PM   Вверх
DRAKON
Дата 9.11.2006, 22:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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

И ещё вопросик по Firefox: почему курсор не в форме руки? Хотя опять же в IE и Opera всё гуд.
PM WWW   Вверх
12345c
Дата 9.11.2006, 23:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


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

Репутация: 57
Всего: 101
А надо писать cursor:pointer;cursor:hand; в стилях (в таком порядке).
PM WWW   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0820 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.