Вопрос к гуру. Title через js. Не выводит title из тега <TR>
Привет всем.
Есть скрипт (написан не мной...потому как я в программировании полный ламоззз). Этот скрипт дает возможность видоизменить выводимую подсказку title. Вроде бы все хорошо работает, НО только не со строками. Вот часть кода: ... <TR title="подсказка"> <TD><A HREF="http://www.worldclass.ru/clubs/triumf_palas/" TARGET="_blank"><B>WC Триумф Палас</B></A></TD> <TD>Сокол, Аэропорт, Октябрьское Поле</TD> <TD>Чапаевский пер., вл. 3</TD> <TD>232-6060</TD> <TD>Год</TD> <TD>91 000р.</TD> <TD>01.03.2009</TD> <TD><B>69 350р.</B></TD> <TD>Полная с 60 дн. Заморозки, карта не открывалась, все входящие услуги (мед тестирование, первичные т ренинги) сохранены. </TD> </TR> ... Вот собственно скрипт:
/*
originally written by paul sowden <paul@idontsmoke.co.uk> | [url]http://idontsmoke.co.uk[/url]
modified and localized by alexander shurkayev <alshur@narod.ru> | [url]http://htmlcoder.visions.ru[/url]
*/
var tooltip = {
/* НАЧАЛО НАСТРОЕК */
options: {
attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута
blank_text: "(откроется в новом окне)", // текст для ссылок с target="_blank"
newline_entity: " ", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность;
//ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки
max_width: 0, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована
delay: 500, // задержка при показе tooltip'а в миллисекундах
skip_tags: ["tr", "img"] // теги, у которых не обрабатываем атрибуты alt и title
},
/* КОНЕЦ НАСТРОЕК */
t: document.createElement("DIV"),
c: null,
g: false,
canvas: null,
m: function(e){
if (tooltip.g){
var x = window.event ? event.clientX + tooltip.canvas.scrollLeft : e.pageX;
var y = window.event ? event.clientY + tooltip.canvas.scrollTop : e.pageY;
tooltip.a(x, y);
}
},
d: function(){
tooltip.canvas = document.getElementsByTagName(document.compatMode && document.compatMode == "CSS1Compat" ? "HTML" : "BODY")[0];
tooltip.t.setAttribute("id", "tooltip");
document.body.appendChild(tooltip.t);
if (tooltip.options.max_width) tooltip.t.style.maxWidth = tooltip.options.max_width + "px"; // all but ie
var a = document.all && !window.opera ? document.all : document.getElementsByTagName("*");
// in opera 9 document.all produces type mismatch error
var l = a.length;
for (var i = 0; i < l; i++){
if (!a[i] || tooltip.options.skip_tags.in_array(a[i].tagName.toLowerCase())) continue;
var tooltip_title = a[i].getAttribute("title"); // returns form object if IE & name="title"; then IE crashes; so...
if (tooltip_title && typeof tooltip_title != "string") tooltip_title = "";
var tooltip_alt = a[i].getAttribute("alt");
var tooltip_blank = a[i].getAttribute("target") && a[i].getAttribute("target") == "_blank" && tooltip.options.blank_text;
if (tooltip_title || tooltip_blank){
a[i].setAttribute(tooltip.options.attr_name, tooltip_blank ? (tooltip_title ? tooltip_title + " " + \
tooltip.options.blank_text : tooltip.options.blank_text) : tooltip_title);
if (a[i].getAttribute(tooltip.options.attr_name)){
a[i].removeAttribute("title");
if (tooltip_alt && a[i].complete) a[i].removeAttribute("alt");
tooltip.l(a[i], "mouseover", tooltip.s);
tooltip.l(a[i], "mouseout", tooltip.h);
}
}else if (tooltip_alt && a[i].complete){
a[i].setAttribute(tooltip.options.attr_name, tooltip_alt);
if (a[i].getAttribute(tooltip.options.attr_name)){
a[i].removeAttribute("alt");
tooltip.l(a[i], "mouseover", tooltip.s);
tooltip.l(a[i], "mouseout", tooltip.h);
}
}
if (!a[i].getAttribute(tooltip.options.attr_name) && tooltip_blank){
//
}
}
document.onmousemove = tooltip.m;
window.onscroll = tooltip.h;
tooltip.a(-99, -99);
},
_: function(s){
s = s.replace(/\&/g,"&");
s = s.replace(/\</g,"<");
s = s.replace(/\>/g,">");
return s;
},
s: function(e){
if (typeof tooltip == "undefined") return;
var d = window.event ? window.event.srcElement : e.target;
if (!d.getAttribute(tooltip.options.attr_name)) return;
var s = d.getAttribute(tooltip.options.attr_name);
if (tooltip.options.newline_entity){
var s = tooltip._(s);
s = s.replace(eval("/" + tooltip._(tooltip.options.newline_entity) + "/g"), "<br />");
tooltip.t.innerHTML = s;
}else{
if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
tooltip.t.appendChild(document.createTextNode(s));
}
tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible'", tooltip.options.delay);
tooltip.g = true;
},
h: function(e){
if (typeof tooltip == "undefined") return;
tooltip.t.style.visibility = "hidden";
if (!tooltip.options.newline_entity && tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
clearTimeout(tooltip.c);
tooltip.g = false;
tooltip.a(-99, -99);
},
l: function(o, e, a){
if (o.addEventListener) o.addEventListener(e, a, false); // was true--Opera 7b workaround!
else if (o.attachEvent) o.attachEvent("on" + e, a);
else return null;
},
a: function(x, y){
var w_width = tooltip.canvas.clientWidth ? tooltip.canvas.clientWidth + tooltip.canvas.scrollLeft : window.innerWidth + window.pageXOffset;
var w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : tooltip.canvas.clientHeight + tooltip.canvas.scrollTop;
// should be vice verca since Opera 7 is crazy!
if (document.all && document.all.item && !window.opera) tooltip.t.style.width = tooltip.options.max_width && tooltip.t.offsetWidth > \
tooltip.options.max_width ? tooltip.options.max_width + "px" : "auto";
var t_width = tooltip.t.offsetWidth;
var t_height = tooltip.t.offsetHeight;
tooltip.t.style.left = x + 8 + "px";
tooltip.t.style.top = y + 8 + "px";
if (x + t_width > w_width) tooltip.t.style.left = w_width - t_width + "px";
if (y + t_height > w_height) tooltip.t.style.top = w_height - t_height + "px";
}
}
Array.prototype.in_array = function(value){
var l = this.length;
for (var i = 0; i < l; i++)
if (this[i] === value) return true;
return false;
};
var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
if (root.addEventListener) root.addEventListener("load", tooltip.d, false);
else if (root.attachEvent) root.attachEvent("onload", tooltip.d);
}
Вот CSS: Код:
#tooltip {background:#317dd3;border:1px solid #b4d6ef;font:normal 12px Tahoma, Verdana, Arial, sans-serif;color:#fff;margin:0px;padding:4px 5px;position:absolute;visibility:;}Как я понял он вытаскивает атрибут title (толи из tr, толи из td), потом удаляет его (чтобы два раза одинаковая инфа не выводилась), НО не показывает при наведедении мышки на строку. Очень прошу помогите плиз чем сможете. P.S. Мне кажется надо как-то атрибут title передать node.title что ли... |
Хмм... Если прописывать атрибут title в тег <td>, то подсказка показывается.
Как блин быть? Надо что бы js понимал, что если ячейка строки становится активной (onmouseover) то и сама строка становится активной. Тогда подсказака будет вылезать на всех ячейках одинаковая. Как это сделать??? |
может быть вызывать из события ячейки onmouseover метод mouseover ее родительского элемента(строчки)?
|
вот еще мысля:
т.к. title пропысываем в <TR>, скрипт будет показывать подстказку для строки. Только это не возможно, потому что есть ячейки в строке. Вывод надо атрибут title из <TR> передать всем дочерним <TD> Вот сопственно как енто сделать.... |
скрипт подробно не разббирал, не то щаз состояние.
но вообще-то у меня в простьейшем случае title для строки всплывает |
Цитата:
Цитата:
|
Во-первых, тег <tr> не является полностью block-элементом. Некоторое его поведение, такое как влияние на события мыши и подобное, не будут работать. Объясняется это еще тем (кроме откровенных необъяснимых глюков), что тег <tr> находится, как бы, "за" тегами <td>, которые расположены внутри него. Из-за этого, <td> перехватывают все события, в т.ч. и событие всплывания подсказки из атрибута title, и не дают им выполнится на элементе <tr>. Поэтому, вам придется присваивать это событие (в данном случае атрибут title) всем элементам <td>, а не <tr>.
Сделать это автоматически вы можете так (пример, возможно не рабочий):
// Находим в DOM элементы <tr>
var tableRows = document.getElementsByTagName("tr");
// Проходим по ним циклом
for(var i in tableRows)
{
var tableRow = tableRows[i];
// Получаем атрибут title (если есть)
var rowTitle = tableRow.getAttribute("title") && tableRow.title && false;
// Если что-то получено, проходим по детям элемента <tr>
if(rowTitle !== false)
{
var tableCell = tableRow.firstChild;
while(tableCell != NULL)
{
if(tableCell.nodeName != 'TD')
continue;
// Если есть внутри элемент TD - ставим title ему
try{
tableCell.setAttribute("title", rowTitle);
} catch(e) {
tableCell.title = rowTitle;
}
tableCell = tableCell.nextSibling;
}
}
}
Не ручаюсь, что код сразу заработает (так в браузере и писал), но пищу для размышлений должен дать - в этом направлении придётся поработать. Кстати, этот скрипт нужно выполнять, когда вся страница загружена в браузер, например по событиям window.onLoad или document.body.onLoad. |
Спасибо за грамотный ответ. Буду ковыряться.
Сейчас изучаю азы php. В js что-то тоже начинаю понимать, хотя пока что совсем мало. Нет ясного понимания. Кстати php может обрабатывать события как js? Т.е. имеет ли смысл потом углубляться в js или ограничиться php? |
гггггггг
уже не раз на форуме обсуждалось(если более точно, то объъяснялось), что это РАЗНЫЕ языки програмирования, и цели-способ у них тоже разные. ДжаваСкрипт - клиентский язык програмирования. он может работать с браузером пользователя, отлавливать события например. ПХП - серверный язык. он работает на СЕРВЕРЕ, и имеет непосредсдвенный доступ только к тому что есть на сервере(Базы данных, файлики, и др.). С пользователем он работает по принципу: пользователья запросил какую-то страницу, ПХП сгенерировал текст(который может быть ХТМЛ-ом, ЦСС-ом, ДжаваСкриптом, и в отдельных случаях даже мкльтемедиа-данными), и вернул его пользователю. Пользовательский браузер получает этот контент, обрабатывет по своему, и вуаля. Эти языки невзимозаменяемые, а взаимодополняющие. ЗЫ Учите оба ЗЫЫ ПХП не может перехватывать события, зато ДжавуСкрипт может обратится к серверу в ответ на событие браузера |
shkur,
Цитата:
|
| Часовой пояс GMT +3, время: 18:23. |