Вообщем есть некий прайс, сделан таблицей раскрашенной зеброй. И есть отдельные страницы которые ведут на прайс. Как можно сделать чтобы человек нажимая на ссылку, попадал в прайс именно на то место в таблице, цену чего он хотел узнать и при этом чтобы эта строчка была выделена (подсвечена, раскрашена и тд и тп) В каком направлении копнуть тут можно? Можно было бы якорями уставить, но якорь это все дело в самый верх страницы отбрасывает. И + не работает раскрашивание, потому что таблица в стилях раскрашена в зебру.
Заранее спасибо :)
Выделение строки таблицы при переходе с определенной ссылки.
(Ответов: 7, Просмотров: 1090)
- 22.12.2014 11:07
- 22.12.2014 14:03
цвет строки можно менять при помощи :hover или делать это на js/jquery.
по поводу якоря, не совсем понятно
не срабатывает якорь или строку таблицы в начало страницы переносит или необходимая строка показывается в самом верху страницы? если крайний вариант, то это нормальная работа якоря.
а так смотрите опять же js/jquery, готовых либ со всевозможными скроллами полно. - 22.12.2014 15:02
- Регистрация: 15.12.2014
- Сообщений: 11
- Репутация: 0
komrad_sl, якорь нужен каждой строке, тогда будет именно к нужной "отбрасывать".
Но это не айс, имхо, когда нужная строка в самом верху странички - лучше скроллом ставить ее по центру экрана и так же подсвечивать.
Можешь в урл дать откуда и куда надо светить? - 22.12.2014 16:56
Просто с одной страницы на другую когда пользователь переходит, в зависимости от того с какой он перешел подсвечивается определенная строка. Про якорь все правильно поняли. Желательно посредине страницы чтобы помещался.
- 22.12.2014 17:14
- Регистрация: 15.12.2014
- Сообщений: 11
- Репутация: 0
komrad_sl, сейчас как реализовано, код можно увидеть?
- 23.12.2014 01:09
- Регистрация: 29.11.2009
- Сообщений: 131
- Репутация: 32
Если в общем - то надо делать на якорях.
Якорь не должен быть у строки, чтобы к ней не переносило. Существуют плагины типа $.scrollTo - позволяют прокручивать к определнному элементу/на определенную величину.
В якоре кодируйте строку (например #30, а у строки сделайте id="td30"). Вычисляйте ее положение, исходя из разрешения пользователя и скрольте на (положение строки - высота/2). Добавьте какой-нибудь класс строке, чтобы она подсвечивалась. - 23.12.2014 08:23
Весёлый химик,А подсвечивать ее через :target ? Тогда нужно как то на нее ссылаться.
- 23.12.2014 10:30
- Регистрация: 29.11.2009
- Сообщений: 131
- Репутация: 32
komrad_sl, нет. Вам надо добавить класс в css для строки (типа tr.highlight), который будет выделять строку и назначать ей этот класс.
Если ударяться в дебри, то как правило зебру в таблице делают добавлением класса к самой таблице. А если назначить класс именно строке, то он будет спецефичнее и иметь больший приоритет.
Т.е. допустим у васКод:Это касательно подсветки.var hash = document.location.hash; //hash == '#30'; hash = hash.replace('#','',hash);//hash=30; $('#td'+hash+).addClass('highlighted');
Со скроллом надо поиграться, айди строки вы уже умеете получать - поищите как определить отступ этого лемента от верха страницы и скрольте экран так, чтобы элемент оказался посередине.Спасибо сказали:
komrad_sl(23.12.2014),
Тэги топика:
Похожие темы
Темы | Раздел | Ответов | Последний пост |
---|---|---|---|
Выделение строки и столбца в таблице html | Web программирование | 14 | 04.11.2013 16:23 |
Выделение текущей ссылки в меню на WordPress | WordPress | 2 | 20.05.2013 20:02 |
Ищу софтину для посещения определенной ссылки | Софт, скрипты, сервисы | 1 | 02.01.2013 16:10 |
Ищу софтину для посещения определенной ссылки | Оффтоп и свободные темы | 0 | 24.12.2012 10:15 |
Выделение [b][/b] как на Вебмастерс. | Web программирование | 10 | 19.08.2012 15:29 |