PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Непредсказуемое изменение ширины таблицы после removeClass

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

Инсеин	Отправлено: 21 Февраля, 2013 - 14:52:22
Новичок Покинул форум Сообщений всего: 61 Дата рег-ции: Авг. 2011 Помог: 0 раз(а)	Доброе время суток! Возникла такая проблема и хуже всего, что не то, что не могу решить её, а даже не могу понять в какую сторону смотреть. Но ближе к делу... Есть обычная таблица CODE (html): скопировать код в буфер обмена <table id="tabl"> <tr> <td><div></div></td> <td><div></div></td> <td><div></div></td> <td><div></div></td> <td><div></div></td> <td><div></div></td> <td><div></div></td> </tr> <tr class="non"><td class="non" colspan="7"></td></tr> <tr> <td><div></div></td> <td><div></div></td> <td><div></div></td> <td><div></div></td> <td><div></div></td> <td><div></div></td> <td><div></div></td> </tr> </table> При наведении курсора присваивается первому и последнему "tr" класс (просто надо изменить фон и border). Соответственно после того как курсор уходит в сторону, класс удаляеться. Сделал это через hover в jQuery. CODE (javascript): скопировать код в буфер обмена $('#tabl tr:not(.non)').hover(function(){ $('#tabl tr:not(.non)').addClass('tabDec'); },function(){ $('#tabl tr:not(.non)').removeClass('tabDec'); }); И всё казалось бы хорошо, но... после каждого наведения последнии ячейки начинают расти в ширину. Посмотрел через alert изменения ширины, то изначально имеем 90px после наведения становится уже 93px и в последствии после того как убрать курсор новая ширина таблицы уже 91px. Откуда и почему появляеться этот лишний 1px так и не смог понять. Попытки получать начальную ширину и потом после всего присваивать таблице, ничего не изменило ----- Судя по ходу мыслей, вас постоянно преследуют глупости.

Zuldek	Отправлено: 21 Февраля, 2013 - 15:23:35
Постоянный участник Покинул форум Сообщений всего: 2122 Дата рег-ции: Июнь 2010 Помог: 50 раз(а)	Смотрите вызовы этого элемента Doma и свои классы. Никаких увеличений, кроме как на длину границ, прописанную в классе, быть не должно. Спойлер (Отобразить) CODE (htmlphp): скопировать код в буфер обмена <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Форумы портала PHP.SU :: Непредсказуемое изменение ширины таблицы после removeClass</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script type="text/javascript" src="http://www.somesite.ru/jquery.js"></script> </head> <body> <style> .tabdec { display: block; border: 1px solid red; } </style> <div id="123">1123</div> <br/><br/> <table id="tabl"> <tr> <td><div>1123</div></td> <td><div>21123</div></td> <td><div>31123</div></td> <td><div>41123</div></td> <td><div>51123</div></td> <td><div>61123</div></td> <td><div>71123</div></td> </tr> <tr class="non"><td class="non" colspan="7"></td></tr> <tr> <td><div>81123</div></td> <td><div>91123</div></td> <td><div>01123</div></td> <td><div>11123</div></td> <td><div>21123</div></td> <td><div>31123</div></td> <td><div>41123</div></td> </tr> </table> <script> $('#tabl tr:not(.non)').hover(function(){ $('#tabl tr:not(.non)').addClass('tabdec'); },function(){ $('#tabl tr:not(.non)').removeClass('tabdec'); }); $('#123').hover(function(){ $('#123').addClass('tabdec'); },function(){ $('#123').removeClass('tabdec'); }); </script> </body> </html> (Отредактировано автором: 21 Февраля, 2013 - 15:25:34)

SAD	Отправлено: 21 Февраля, 2013 - 15:26:02
Постоянный участник Покинул форум Сообщений всего: 2508 Дата рег-ции: Май 2009 Откуда: Днепропетровск, Украина Помог: 75 раз(а)	ширина таблицы видимо скачет из-за новой ширины border строк

Инсеин	Отправлено: 21 Февраля, 2013 - 15:32:09
Новичок Покинул форум Сообщений всего: 61 Дата рег-ции: Авг. 2011 Помог: 0 раз(а)	Спасибо, что откликнулись. Проблема решена. Правда не думал, что достаточно просто добавить display: block; )) SAD, да-да ... изначально border 1px, а в новом классе 2px, но всё же по идеи новый класс удалялся и не должно было прыгать. ----- Судя по ходу мыслей, вас постоянно преследуют глупости.

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.