ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выделять пункт оглавления при просмотре соответствующей части текста?
10 сообщений из 10, страница 1 из 1
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977497
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Видел на каком-то сайте слева оглавление а справа контент - при скроллировании текста справа - соответствующие пункты оглавления выделялись
Все это было реализовано средствами CSS
Помогите вспомнить, а то не знаю как :)
...
Рейтинг: 0 / 0
30.09.2012, 17:30:29
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977531
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Хм ... очень-очень сомневаюсь, что на чистом CSS такое можно реализовать. Наверняка без поддержки скриптом не сделать. А с ним уже и помощь не особо понадобится.
...
Рейтинг: 0 / 0
30.09.2012, 18:23:58
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977565
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
IDVsbruckХм ... очень-очень сомневаюсь, что на чистом CSS такое можно реализовать.Пожалуйста:
Код: html
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.
<!DOCTYPE HTML>
<html>
<head>
  <style>    
    #content {
      border: solid #000 1px;
      height: 400px;
      padding-left: 200px;
      overflow-y: scroll;
      width: 400px;
    }
      
    #content h4 {
      position: absolute;
      left: 12px;
    }
     
    #content div:hover h4 {
      color: red;
    }
  </style>
</head>
<body>
  <div id="content">
    <div>
      <h3>Что такое Lorem Ipsum?</h3>
      <h4 style="top:8px">Что такое Lorem Ipsum?</h4>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
    <div>
      <h3>Откуда он появился?</h3>
      <h4 style="top:24px">Откуда он появился?</h4>
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32
    </div>
    <div>
      <h3>Почему он используется?</h3>
      <h4 style="top:40px">Почему он используется?</h4>
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
    </div>
  </div>
</body>
</html>
...
Рейтинг: 0 / 0
30.09.2012, 19:13:42
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977568
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Лучше так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
  <style>    
    #content {
      border: solid #000 1px;
      height: 400px;
      overflow-y: scroll;
      width: 600px;
    }
      
    #content h4 {
      position: absolute;
      left: 12px;
    }
    
    #content div {      
      padding-left: 200px;
    }
     
    #content div:hover h4 {
      color: red;
    }
  </style>

Скроллировать колёсиком мыши :)
...
Рейтинг: 0 / 0
30.09.2012, 19:20:10
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977578
Фотография Ифреймов Вася
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ифреймов Вася
Участник
skyANA,

Думаю - если нужна поддержка ie старых - то такой скрипт не подойдет
div:hover там не будет работать
Но если пренебречь стандартами и запихнуть div в anchor - то будет работать во всех браузерах(за оперу не совсем уверен)
Но это очень некрасиво, просто ужастно
...
Рейтинг: 0 / 0
30.09.2012, 19:51:05
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977658
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Ифреймов Вася, да сия фигня - шняга на коленке писаная :)
...
Рейтинг: 0 / 0
30.09.2012, 22:12:26
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977764
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
А, блин, то, что ты описал и то, что сделал - две большие разницы. Может, кто-то так и понял, но я точно ТЗ воспринял иначе: одним из ключевых слов было "при скроллировании", но само скроллирование имеет очень отдаленное применение - только для подведения определенного текста под мышку. При больших габаритах контейнера, когда скролла нет, смысл имеет исключительно подвод мыши к тексту.

Но если это то, что планировалось, рад, что нашел решение.
...
Рейтинг: 0 / 0
01.10.2012, 02:11:48
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977827
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
skyANA,

спасибо большое! то что надо!
...
Рейтинг: 0 / 0
01.10.2012, 08:42:46
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37977976
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
IDVsbruckА, блин, то, что ты описал и то, что сделал - две большие разницы. Может, кто-то так и понял, но я точно ТЗ воспринял иначе: одним из ключевых слов было "при скроллировании", но само скроллирование имеет очень отдаленное применение - только для подведения определенного текста под мышку. При больших габаритах контейнера, когда скролла нет, смысл имеет исключительно подвод мыши к тексту.

Но если это то, что планировалось, рад, что нашел решение.Описал товарищ sp, а сделал я :) Вы будто нас за одного человека считаете.

P.S.: ничего кстати не искал, эта шняга писалась мной минут 15-20 в ожидании такси. Даже удивлён, что это то, что надо :)
...
Рейтинг: 0 / 0
01.10.2012, 10:24:08
| Ответить | Цитировать | Написать  
Как выделять пункт оглавления при просмотре соответствующей части текста?
    #37978565
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
skyANAОписал товарищ sp, а сделал я :) Вы будто нас за одного человека считаете.

P.S.: ничего кстати не искал, эта шняга писалась мной минут 15-20 в ожидании такси. Даже удивлён, что это то, что надо :)
Да, сорри, перепутал.
...
Рейтинг: 0 / 0
01.10.2012, 14:20:39
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выделять пункт оглавления при просмотре соответствующей части текста?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=37977497&tid=1449288]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 208ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 53ms
get tp. blocked users:
 1ms
others: 231ms
total:  539ms
созд. / загр.: 539ms
x
x
Закрыть


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