VPF::шахматный tooltip через javacript - Форум программистов

Sergic

Дата 13.9.2010, 22:54 (ссылка)

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

Загрузка ...

Новичок

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

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

привет.
мне нужно сделать яваскриптовые подсказки(tips) в форме шахматки как на картинке
user posted image

то есть.
элементы (5 или более на строку) в определенной дивке, они одной формы и размеров(размеры фиксированные), выстроены через float left
как вывести тултип возле выбранной картинки, чтоб тот закрыл рядом стоящие квадраты и учитывая что он не может выскочить за пределы дивки(где есть квадраты) - верх низ лево право.
подскажите, пожалуйста, по алгоритму … как и что построить, с чего начать.
спасибо.

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

magelan

Дата 14.9.2010, 03:49 (ссылка)

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

Загрузка ...

потерял xPath

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

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

скрипт не дописан, это только мысли на тему

Код


var a = [];
a[ 'b1' ] = 'текст подсказки';
...

var coord = function ( el )
{
    var l = 0;
    var t = 0;

    while( el )
    {
        l += el.offsetLeft;
        t += el.offsetTop;
        el = el.offsetParent;
    }
    return { "left":l, "top":t };
}
var hint = null;
function createDiv ( t, l, w, text )
{
  hint = document.createElement( 'DIV' );
  hint.style.position = 'absolute';
  hint.style.left = l + 'px';
  hint.style.top = t + 'px';
  hint.style.width = w + 'px';
  hint.style.zIndex = 1000;
  hint.innerHTML = text;
  document.body.appendChild( hint );
}
funcion hideHint()
{
  if( hint != null )
  {
     document.body.removeChild( hint );
     hint = null;
  }
}

funcion showHint( obj )
{
 var c = coord( obj );

 var top = c.top;
 var left = c.left;
 var width = obj.offsetWidth;
 var height = obj.offsetHeight;

/* 
решаешь геометрическую задачку слева или справа его расположить
вычисляешь w - либо сколько есть места слева или справа, либо какая-то константа
l = left - w для хинта слева, либо
l = left + width для хинта справа
*/
   createDiv( top, l, w, a[ obj.id ]);

 var h = hint.offsetHeight;

/*
смотришь, влез ли див с контентом (top+h) если нет, двигаешь его вверх
*/

}
...
<DIV ID="b1" onMouseOver="showHint( this )" onMouseOut=""hideHint()"></DIV>

Sergic

Дата 14.9.2010, 23:09 (ссылка)

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

Загрузка ...

Новичок

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

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

спасибо. интересный подход.
мне тут ешо подсказали оформить все как матрицу через индексы вертикальные и горизонтальные
по ним легче определить в какой части дивки находиться элемент и потом можно очень легко расположить возле него подсказку (справа, слева, сверху, снизу)
отталкиваясь от количества элементов по горизонтали и вертикали

Это сообщение отредактировал(а) Sergic - 14.9.2010, 23:10

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