Таблица Менделеева...

[Бухалыч]

Интерактивная таблица Менделеева

[ИСН]

Ничо так, зачОтная.
(В IE подтормаживает, ну дак на то и IE; и поведение при клике неочевидное - но мобыть, так и задумано, и вообще, нехрен кликать.)
Upd. Нажал View source в обоих браузерах - остро впечатлился.

[Бухалыч]

Ничо так, зачОтная.
(В IE подтормаживает, ну дак на то и IE; и поведение при клике неочевидное - но мобыть, так и задумано, и вообще, нехрен кликать.)
Upd. Нажал View source в обоих браузерах - остро впечатлился.

На клике там типа зафиксировать элемент, чтоб мона было инфу скопировать

[Marxist]

Ничо так, зачОтная.
(В IE подтормаживает, ну дак на то и IE; и поведение при клике неочевидное - но мобыть, так и задумано, и вообще, нехрен кликать.)
Upd. Нажал View source в обоих браузерах - остро впечатлился.

На клике там типа зафиксировать элемент, чтоб мона было инфу скопировать

Эстетически смотрится неплохо, но данные по неустойчивым элементам устаревшие.

[Бухалыч]

Эстетически смотрится неплохо, но данные по неустойчивым элементам устаревшие.

Проапдейтил вплоть до Рентгения (только что с них толку?)

[Serge]

Интерактивная таблица Менделеева

лучше стили все вынести в отдельный css-файл.

[Бухалыч]

Ну не знаю...
Вся страница (css, html) on-the-fly создается скриптом, вручную что-то не очень хочется писать.
Да и весит так раза в полтора-два меньше.

[Serge]

а CSS разве не статичный?

[Бухалыч]

Я имею ввиду, что, ПМСМ, эстетичней написать

Код: Выделить всё

for (var m= 0; m< 14; m++) {
var lap = m*50-(-30);
var lapb = m*50-(-22);
var mv = m-(-1);
document.write('.gra' + mv + '{position:absolute; left:' + lap + 'px} ' );
document.write('.bgra' + mv + '{position:absolute; left:' + lapb + 'px} ' );
}

, чем

Код: Выделить всё

.gra1{
position:absolute;
left:30px}
.bgra1{
position:absolute;
left:22px}
.gra2{
position:absolute;
left:80px}
.bgra2{
position:absolute;
left:72px}
.gra3{
position:absolute;
left:130px}
.bgra3{
position:absolute;
left:122px}
.gra4{
position:absolute;
left:180px}
.bgra4{
position:absolute;
left:172px}
.gra5{
position:absolute;
left:230px}
.bgra5{
position:absolute;
left:222px}
.gra6{
position:absolute;
left:280px}
.bgra6{
position:absolute;
left:272px}
.gra7{
position:absolute;
left:330px}
.bgra7{
position:absolute;
left:322px}
.gra8{
position:absolute;
left:380px}
.bgra8{
position:absolute;
left:372px}
.gra9{
position:absolute;
left:430px}
.bgra9{
position:absolute;
left:422px}
.gra10{
position:absolute;
left:480px}
.bgra10{
position:absolute;
left:472px}
.gra11{
position:absolute;
left:530px}
.bgra11{
position:absolute;
left:522px}
.gra12{
position:absolute;
left:580px}
.bgra12{
position:absolute;
left:572px}
.gra13{
position:absolute;
left:630px}
.bgra13{
position:absolute;
left:622px}
.gra14{
position:absolute;
left:680px}
.bgra14{
position:absolute;
left:672px}

[Warfarin]

Ничо так, зачОтная.
(В IE подтормаживает, ну дак на то и IE; и поведение при клике неочевидное - но мобыть, так и задумано, и вообще, нехрен кликать.)
Upd. Нажал View source в обоих браузерах - остро впечатлился.

Красиво сделано! В Opera тоже изрядно тормозит на неслабой машинке, но что поделать JavaScript как он есть
Теоретически наверно можно код как-то оптимизировать, чтоб пошустрее было, но подсказать не берусь

[ИСН]

Я имею ввиду, что, ПМСМ, эстетичней написать [...]

"Но в стихах это прекрасно, уверяю вас, просто прекрасно!"
Прочитал код. Да уж! генерить такую прорву контента (сплошь статичного по сути) влёт на клиенте - цинизм, достойный Ломачинского. Круче этого только таблица, построенная на дивах с абсолютным позиционированием.
(Представил: Менделеев такой просыпается и говорит - "Во сне меня осенило, почему не складывается таблица: надо делать на дивах!" )
Ну да это всё лирика, мелочи, вполне извиняемые тем, что "ведь работает же". А что не мелочи - так это зачем внутри функции elselect все эти var elperiod, var elgrsh? К чему это варварство? Все эти здоровенные массивы инициализируются заново при каждой смене выделения - отсюда и тормоза.

[Бухалыч]

... Все эти здоровенные массивы инициализируются заново при каждой смене выделения - отсюда и тормоза.

Я уже тестил разные вариации размещения переменных (глобальные/локальные). По-моему, никакой разницы.
Или Вы её наблюдаете (сейчас залил с глобальными)?

А по поводу дивов - я вот не знаю, как сделать красиво на тейбле. При наведении/увеличении ёё просто перекорёживать будет.

[ИСН]

Хм... Всё-таки IE подтормаживает. Тут нужны серьёзные тесты (скажем, приделать внизу кнопку, по нажатию на которую будет 10 или там 100 раз выделен и тут же развыделен один элемент; засечь время.) Но вынести эти переменные в глобальные всё равно было правильно, чтобы не повторять одно и то же дважды (что Вы, кстати, до сих пор делаете в функции crtab()).
Касательно table, да, это был бы нетривиальный... challenge.

[Бухалыч]

Хм... Всё-таки IE подтормаживает. Тут нужны серьёзные тесты (скажем, приделать внизу кнопку, по нажатию на которую будет 10 или там 100 раз выделен и тут же развыделен один элемент; засечь время.) Но вынести эти переменные в глобальные всё равно было правильно, чтобы не повторять одно и то же дважды (что Вы, кстати, до сих пор делаете в функции crtab()).
Касательно table, да, это был бы нетривиальный... challenge.

Про локальные вары в кртаб():
Думаю, ~1КБ - вполне оправданная жертва в пользу быстроты построения страницы, да и DOMолюбивый Gecko таким макаром ошибок не выдает.
Про challenge:
Думается, скрипт будет намного более громоздким.

Upd: А вот и тесты:

test.rar

(там пробег по всем элементам).
ИСН, Вы правы, с глобальными пошустрей получается, процентов на 15.

[ИСН]

ИСН, Вы правы, с глобальными пошустрей получается, процентов на 15.

Ага!
(Я, правда, был уверен, что на этом выиграем гораздо больше.)
Ну, теперь можно и всё остальное. Я пока не врубился, зачем там под общую информацию висит целый iframe (нельзя было чего-нибудь полегче?), ну и в функции getel() при каждом передёргивании собирается строка динозавровых размеров, это тоже как-то немного не comme il faut.

[Бухалыч]

Попробовал сделать пару tables вместо iframe.
В тесте (он теперь красивше) на Опере и ФФ - однохренственно, а ИЕ - на 10% медленней. Что, ввиду четырнадцатикратного доставанияЭлементаПоАйди, неудивительно.
Даже не знаю, на серваке старую оставить или новую залить.
Да, вот тест:

test_table_vs_iframe.rar

[ИСН]

Да! код всё хорошеет.
(Меня в некоторой степени напрягает парадигма массированного использования document.write (сиречь "аборт") и innerHTML (="кесарево сечение"), но пока что пусть их.)
Теперь: тяжеловесный getel() надо как-то охватить в setTimeout()...clearTimeout(), чтобы дёргать его не всякий раз, как мышь пролетит над клеткой, а когда она соизволит задержаться над ней хотя бы на 0.2 секунды. "И то хлеб."
Далее, многочисленные куски типа

Код: Выделить всё

var t1 = document.getElementById('t1');
t1.style.color = c;

не вижу причин не сократить до

Код: Выделить всё

document.getElementById('t1').style.color = c;

И, similarly,

Код: Выделить всё

var elper = "per" + elperiod[prevenum];
var elem1 = document.getElementById(elper);
elem1.style.color="#666666";

- до

Код: Выделить всё

document.getElementById("per" + elperiod[prevenum]).style.color="#666666";

[amik]

Господа программисты и лично товарищ Бухалыч, у меня картинки элементов закрывают значительную часть открывающегося окна со свойствами выделенного элемента. Я что-то не так делаю

[Бухалыч]

amik, у Вас наверно энтальпия образования в одну строчку не влазила, отсюда и косяки.
Косяки подправил (и внял совету ИСН'а), добавил навигацию с клавиатуры (стрелками; а на вводе - бесплатный бонус )

[amik]

Тов. Бухалыч, кажется я разобрался с проблемой. В настройках винды стоял крупный размер шрифтов(120 pix) у мну завсегда такой, глазки ломать не хоцца; с параметром по умолчанию(96 pix) стало нормально. Кстати изменение размера шрифта в браузерах не оказывает эффекта.
Вообще лучше этот фактор как-то учесть в программе. Знаю многих людей, которые работают с увеличенными системными шрифтами.

ПыСы Вы на товарища не обижаетесь? Перейдем на господина