powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / проблема с изменением ширины таблицы средствами javascript
14 сообщений из 14, страница 1 из 1
проблема с изменением ширины таблицы средствами javascript
    #34530851
random13
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
проблема в следующим, требуется при наведении на ячейку таблицы она увеличивалась по ширине,

подскажите в чем ошибка или все неверно...

в оттаче файл с тем что не выходит
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34530854
random13
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
наверное не добавил файл
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34531983
for93t
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">

DOMCapable = !!document.getElementById;

var minimum =  200 , maximum =  800 ;

function show(el)
{
	if (DOMCapable)
	{
		minimum = el.offsetWidth;
		while (el.offsetWidth < maximum)
		{
			el.style.width = el.offsetWidth +  2  + 'px';
		}
	}
}

function hide(el)
{
	if (DOMCapable)
	{
		while(el.offsetWidth > minimum)
		{
			el.style.width = el.offsetWidth -  2  + 'px';
		}
	}
}

</script>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="150">
  <tr>
    <td bgcolor="#0099CC" id="a1" onmouseover="show(this);" onmouseout="hide(this);"> </td>
    <td bgcolor="#33CC66" id="a2"> </td>
  </tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34532291
for93t
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ну а вот так совсем кошерно:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">

DOMCapable = !!document.getElementById;

var minimum =  200 , maximum =  800 , int_exp, int_coll, interval =  10 , delta =  5 ;

Function.prototype.delegate = function (obj)
{
	var f = this;
	return function ()
	{
		return f.apply(obj||window);
	};
}

function show(el)
{
	if (DOMCapable)
	{
		minimum = el.offsetWidth;
		
		if (int_exp) clearInterval(int_exp);
		if (int_coll) clearInterval(int_coll);
		
		int_exp = setInterval((function ()
		{
			if (this.offsetWidth < maximum)
			{
				this.style.width = this.offsetWidth + delta + 'px';
			}
			else
			{
				clearInterval(int_exp);
			}
		}).delegate(el), interval);
	}
}

function hide(el)
{
	if (DOMCapable)
	{
		if (int_exp) clearInterval(int_exp);
		if (int_coll) clearInterval(int_coll);
		
		int_coll = setInterval((function ()
		{
			if (this.offsetWidth > minimum)
			{
				this.style.width = (this.offsetWidth - delta) + 'px';
				
				/* Opera bug. It's don't update offsetWidth after style.width has been changed */
				this.style.display = 'none';
				this.style.display = '';
				/* Opera bug. It's don't update offsetWidth after style.width has been changed */
				
			}
			else
			{
				clearInterval(int_coll);
			}
		}).delegate(el), interval);
	}
}

</script>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="150">
  <tr>
    <td bgcolor="#0099CC" id="a1" onmouseover="show(this);" onmouseout="hide(this);"> </td>
    <td bgcolor="#33CC66" id="a2"> </td>
  </tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34534067
random13
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
огромное спасибо, все классно, единственное не очень могу разобраться в самом коде, что то очень много нового, чего не было у меня
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34534503
for93t
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Могу ответить на конкретные вопросы по коду.
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34536342
random13
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
первый вопрос, зачем нужно явно указывать минимум, нельзя ли при наведение его словить,

var minimum = 200, maximum = 800, int_exp, int_coll, interval = 10, delta = 5;


следующее, что означает эта функция Function.prototype.delegate = ....

пока все...
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34536746
random13
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
дополнение к теме, попробовал дописать вызов функции и во второй ячейке и скрипт начинает себя вести не совсем как хотелось бы, возможно как то доработать
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34537063
for93t
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
random13первый вопрос, зачем нужно явно указывать минимум, нельзя ли при наведение его словить,

var minimum = 200, maximum = 800, int_exp, int_coll, interval = 10, delta = 5;


Осталось от вашего кода. Можно (и нужно) не указывать

random13...

следующее, что означает эта функция Function.prototype.delegate = ....

что такое замыкания и prototype в javascript
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34537070
random13
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
спасибо

и все же, возможно вернуться к этому пункту:

дополнение к теме, попробовал дописать вызов функции и во второй ячейке и скрипт начинает себя вести не совсем как хотелось бы, возможно как то доработать
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34537230
for93t
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
random13спасибо

и все же, возможно вернуться к этому пункту:

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

Лень, конечно друг человека, однако иногда ее нужно подавлять ))).
Возьмите firefox+firebug, сделайте вывод отладочных сообщений в консоль, если не поможет, попробуйте пошаговую оладку. Выясните, что и почему некорректно работает и исправьте.
Если будут конкретные вопросы по коду, задавайте здесь.
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34537255
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
наверно нужно следить чтоб show-hide вызывались только чередуясь
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34537313
random13
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
и как это сделать
...
Рейтинг: 0 / 0
проблема с изменением ширины таблицы средствами javascript
    #34537540
for93t
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
LINUXERнаверно нужно следить чтоб show-hide вызывались только чередуясь
не обязательно
random13и как это сделать
можно оформить show-hide в отдельный класс, хендлеры интервалов сделать приватными членами и для каждого элемента создавать новый экземпляр класса
просто у меня сейчас нет времени самому экспериментировать, поэтому звиняйте...
...
Рейтинг: 0 / 0
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / проблема с изменением ширины таблицы средствами javascript
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]