Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Стилизация раскрывающегося списка

Предыдущая тема Следующая тема Перейти вниз

Стилизация раскрывающегося списка

Сообщение автор Зверобой в Пн 19 Май - 0:03

На ум пришло запастись на будущее удобной технологией. Чтобы пользователям не искать необходимые темы среди откровенного шлака, полезные для изучения можно впихнуть в раскрывающийся список:


Для реализации сего списка я использовал HTML-код, найденный на этом же форуме:
Код:
<form><select onchange="location.href=(form.select.options[form.select.selectedIndex].value)" class="forminput" name="select">
<option>Список лекций:</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 1</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 2</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 3</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 5</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 6</option>
<option value="http://dunkelheit.forum.st/t1-topic">Лекция 7</option>
</select>
</form>

Просто вставлял его в описание нужного форума в нужной категории, и всё. Единственное, что меня не устраивает - синие строчки и рамка. Оформление выполнено в чёрно-красных тонах. Можно ли и здесь подкорректировать? Чтобы при наведении строчки "Лекция 1,2 и.т.п" загорались другим цветом? И другая обводка была. Не синяя.

Зверобой
Новичок

Сообщения : 11
Возраст : 23
Регистрация : 2014-05-18
Благодарности : 0

Без предупреждений

http://dunkelheit.forum2x2.com/

Вернуться к началу Перейти вниз

Re: Стилизация раскрывающегося списка

Сообщение автор Зверобой в Пн 19 Май - 10:53

Нашёл на просторах форума вот такой вот код:
Код:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#requestytopic .listin").load("/f1-forum div.topictitle");

jQuery('#requestytopic .top').click(function(){
      jQuery(this).parent().children('div.listin').slideToggle("fast");
      return false;
    });

jQuery(document).click(function(event) {
    if (jQuery(event.target).closest(".listin").length) return;
    jQuery(".listin").hide();
    event.stopPropagation();
  });

});
</script>

<div id="requestytopic">
<div class="top">Принятые заявки: </div>
<div class="listin"></div>
</div>

В котором, похоже, создаётся список через JS. И загружаются все темы из конкретного форума. А можно сделать, чтобы вместо загрузки абсолютно всех тем, просто забить туда список необходимых ссылок? Пригодятся просто оба варианта, но наиболее полезен с выборочным добавлением.

Зверобой
Новичок

Сообщения : 11
Возраст : 23
Регистрация : 2014-05-18
Благодарности : 0

Без предупреждений

http://dunkelheit.forum2x2.com/

Вернуться к началу Перейти вниз

Re: Стилизация раскрывающегося списка

Сообщение автор Сказочник Зазеркалья в Пн 19 Май - 10:59

Здравствуй.  pardon 

Глянь эту тему, может она окажется более полезной.

http://help.forum2x2.ru/t22651-topic

 good 

Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3547
Возраст : 25
Место обитания : Морг.
Регистрация : 2012-11-16
Благодарности : 687

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Стилизация раскрывающегося списка

Сообщение автор Зверобой в Пн 19 Май - 13:36

Сказочник Зазеркалья,  good 
Благодарю за подсказку) Вот что получилось у меня в итоге:


Это по сути всё ставится в описание форума опять же, чуть корректируется через CSS. Всего один остался вопрос. Можно как-либо сделать, чтобы при наведении на картинку, она заменялась другой? Т.е. так просто одна картинка, а при наведении - с другой цветовой гаммой. Типо "активизировалась". Вторую картинку нарисовать то не проблема, а вот как её во весь этот адский механизм приладить и привязать к наведению - я ещё не понял.

Зверобой
Новичок

Сообщения : 11
Возраст : 23
Регистрация : 2014-05-18
Благодарности : 0

Без предупреждений

http://dunkelheit.forum2x2.com/

Вернуться к началу Перейти вниз

Re: Стилизация раскрывающегося списка

Сообщение автор Сказочник Зазеркалья в Пн 19 Май - 13:39

Посмотри эту тему:

http://help.forum2x2.ru/t26406-topic

 22 

Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3547
Возраст : 25
Место обитания : Морг.
Регистрация : 2012-11-16
Благодарности : 687

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Стилизация раскрывающегося списка

Сообщение автор Зверобой в Пн 19 Май - 18:18

Сказочник Зазеркалья,  13    good good good


Не зря говорят, мол лучшее - враг хорошего. Я позарился на горизонтальный скролл. Дабы оставить окошко прокрутки маленьким. Кому надо - тот прочитает то, что дальше - посчитал я. Но вот проблема в том, что там работает очень, очень и очень странный перенос по словам. Установлены параметры так, что при пересечении границы - оставшийся текст прячется под горизонтальный скролл. В теории всё должно быть правильно, а вот что можно наблюдать на практике:


И вся забава то в том, что всё работает. Но программа помещает под скролл лишь цельные слова:


Частично исправляет проблему подчёркнутый проблел, так же наверно можно ставить ссылки с изображениями, их-то не перенесёт. Но мало ли, может быть есть менее извращенский способ заставить всё корректно работать?

Зверобой
Новичок

Сообщения : 11
Возраст : 23
Регистрация : 2014-05-18
Благодарности : 0

Без предупреждений

http://dunkelheit.forum2x2.com/

Вернуться к началу Перейти вниз

Re: Стилизация раскрывающегося списка

Сообщение автор Зверобой в Пн 19 Май - 18:54

Ещё раз большое спасибо)
Проблема решилась сама собой. Просто, вместо пробела следует вводить код:
Код:
&nbsp

Результат:


Тема к закрытию подготовлена  22

Зверобой
Новичок

Сообщения : 11
Возраст : 23
Регистрация : 2014-05-18
Благодарности : 0

Без предупреждений

http://dunkelheit.forum2x2.com/

Вернуться к началу Перейти вниз

Re: Стилизация раскрывающегося списка

Сообщение автор Сказочник Зазеркалья в Пн 19 Май - 19:13

@Зверобой пишет:Сказочник Зазеркалья,  13    good good good
Рад что смог тебе помочь.  smile 

Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3547
Возраст : 25
Место обитания : Морг.
Регистрация : 2012-11-16
Благодарности : 687

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Стилизация раскрывающегося списка

Сообщение автор Зверобой в Пн 19 Май - 23:30

Раз уж тема упорно не хочет закрываться... Допишу, что сделал себе все скроллы, даже смог стилизовать. Небольшая проблемка из прошлого возникла.

Про две картинки, где одна сменяет другую, я понял. А что нужно там дописать, чтобы одна другую сменила, но пока нажата кнопка, чтобы обратной трансформации не происходило?

Т.е. чтобы обратное преобразование действовало только тогда, когда список раскрылся и закрылся нажатием кнопки.
Я думал даже какое-нибудь ожидание в 100 сек прописать. Ведь, по идее, по нажатию повторному всё переобновится и время ожидания уберётся. Но не смог это реализовать нормально.

Вот что по двум картинкам забито в CSS:

Код:
.image.first,.image.second {
border:2px solid transparent;
margin:0;
padding:0;
}

.image.first {
opacity:1px;
display:block;
position:absolute;
z-index:100;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}

.image.first:hover {
opacity:0.00;
}

div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}

Эта часть достаточно рабочая. Я старался добавить что-то вроде этого:
Код:
.image.second:active {
transition-duration: 99s;
Менял active и hover, просто убирал эти приставки - ничего. Видимо допускаю грубую ошибку.

Зверобой
Новичок

Сообщения : 11
Возраст : 23
Регистрация : 2014-05-18
Благодарности : 0

Без предупреждений

http://dunkelheit.forum2x2.com/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения