Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.05.2008, 19:37
Интересующийся
Отправить личное сообщение для shkur Посмотреть профиль Найти все сообщения от shkur
 
Регистрация: 22.05.2008
Сообщений: 16

Вопрос к гуру. 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,"&amp;");
		s = s.replace(/\</g,"&lt;");
		s = s.replace(/\>/g,"&gt;");
		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 что ли...
Ответить с цитированием
  #2 (permalink)  
Старый 22.05.2008, 23:41
Интересующийся
Отправить личное сообщение для shkur Посмотреть профиль Найти все сообщения от shkur
 
Регистрация: 22.05.2008
Сообщений: 16

Хмм... Если прописывать атрибут title в тег <td>, то подсказка показывается.

Как блин быть?

Надо что бы js понимал, что если ячейка строки становится активной (onmouseover) то и сама строка становится активной. Тогда подсказака будет вылезать на всех ячейках одинаковая.

Как это сделать???
Ответить с цитированием
  #3 (permalink)  
Старый 22.05.2008, 23:49
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 03.04.2008
Сообщений: 6,234

может быть вызывать из события ячейки onmouseover метод mouseover ее родительского элемента(строчки)?
Ответить с цитированием
  #4 (permalink)  
Старый 23.05.2008, 00:07
Интересующийся
Отправить личное сообщение для shkur Посмотреть профиль Найти все сообщения от shkur
 
Регистрация: 22.05.2008
Сообщений: 16

вот еще мысля:
т.к. title пропысываем в <TR>, скрипт будет показывать подстказку для строки. Только это не возможно, потому что есть ячейки в строке.
Вывод надо атрибут title из <TR> передать всем дочерним <TD>

Вот сопственно как енто сделать....
Ответить с цитированием
  #5 (permalink)  
Старый 23.05.2008, 00:26
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 03.04.2008
Сообщений: 6,234

скрипт подробно не разббирал, не то щаз состояние.
но вообще-то у меня в простьейшем случае title для строки всплывает
Ответить с цитированием
  #6 (permalink)  
Старый 23.05.2008, 01:12
Интересующийся
Отправить личное сообщение для shkur Посмотреть профиль Найти все сообщения от shkur
 
Регистрация: 22.05.2008
Сообщений: 16

Сообщение от Gvozd Посмотреть сообщение
может быть вызывать из события ячейки onmouseover метод mouseover ее родительского элемента(строчки)?
ВО! только вот блин не знаю воопще синтаксис... (((

Цитата:
но вообще-то у меня в простьейшем случае title для строки всплывает
Ну а на этой страничке? (исключая заголовок, там подсказка вылезает из-за совмещения сортировочного sort.js и tooltip.js)

Последний раз редактировалось shkur, 24.05.2008 в 13:38.
Ответить с цитированием
  #7 (permalink)  
Старый 24.05.2008, 00:19
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Во-первых, тег <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.
Ответить с цитированием
  #8 (permalink)  
Старый 24.05.2008, 03:14
Интересующийся
Отправить личное сообщение для shkur Посмотреть профиль Найти все сообщения от shkur
 
Регистрация: 22.05.2008
Сообщений: 16

Спасибо за грамотный ответ. Буду ковыряться.
Сейчас изучаю азы php. В js что-то тоже начинаю понимать, хотя пока что совсем мало. Нет ясного понимания.
Кстати php может обрабатывать события как js? Т.е. имеет ли смысл потом углубляться в js или ограничиться php?
Ответить с цитированием
  #9 (permalink)  
Старый 24.05.2008, 08:46
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 03.04.2008
Сообщений: 6,234

гггггггг
уже не раз на форуме обсуждалось(если более точно, то объъяснялось), что это РАЗНЫЕ языки програмирования, и цели-способ у них тоже разные.
ДжаваСкрипт - клиентский язык програмирования. он может работать с браузером пользователя, отлавливать события например.
ПХП - серверный язык. он работает на СЕРВЕРЕ, и имеет непосредсдвенный доступ только к тому что есть на сервере(Базы данных, файлики, и др.). С пользователем он работает по принципу: пользователья запросил какую-то страницу, ПХП сгенерировал текст(который может быть ХТМЛ-ом, ЦСС-ом, ДжаваСкриптом, и в отдельных случаях даже мкльтемедиа-данными), и вернул его пользователю. Пользовательский браузер получает этот контент, обрабатывет по своему, и вуаля.
Эти языки невзимозаменяемые, а взаимодополняющие.
ЗЫ Учите оба
ЗЫЫ ПХП не может перехватывать события, зато ДжавуСкрипт может обратится к серверу в ответ на событие браузера
Ответить с цитированием
  #10 (permalink)  
Старый 24.05.2008, 15:25
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

shkur,
Цитата:
Кстати php может обрабатывать события как js?
Нет, php не аспектно-ориентирован и не завязан на событиях браузера. Поэтому, эту прослойку динамического взаимодействия клиента с сервером всё-равно надо будет писать на javascript.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск