ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

☕ 7 вечеров с Авалон

Дата: с 17 по 24 февраля;
Тема разговора: администрирование проекта, создание видео и другое творчество;
Присоединяйтесь к обсуждению и подготовьте свои вопросы!

Задать вопрос

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже два года.

Посетить

TVD: FACELESS

В каждой истории есть две стороны.
Я и герой, и злодей.

Посетить

ЭНТЕРОС

Магия и технологии, эпизоды, 18+
ПутеводительХотим видетьРасы

Посетить

🔥 Новинка в портфолио: Адаптивный дизайн по мотивам Звёздных Войн

Платформа: MyBB.ru;
Стоимость: 8 000 рублей;
Автор: бродяга

Оставить отзыв

💰 Продаётся: функционал, упрощающий жизнь админу форума

Ивент-календарь, вкладки и слайдеры в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.
Ультимативный список тем - картинки, описания и иконки для топиков.

Как купить

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
🎨 Голосуйте за лучшие парные аватарки до 29.02! Отдать голос.
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



[Выполнено] (É GRÁTIS) / Кодинг: Category slide

Сообщений 1 страница 10 из 10

1

ОБЩАЯ ИНФОРМАЦИЯ О ЗАКАЗЕ

1. ССЫЛКА НА ФОРУМ/САЙТ:
https://sims3archive.mforum.info/
2. УСЛОВИЯ И БЮДЖЕТ:


Минимальный и максимальный бюджет, условия: 

Предлагаю в обмен:


3. ВАШИ КОНТАКТЫ:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

ТЕХНИЧЕСКОЕ ЗАДАНИЕ

1. ОПИСАНИЕ ЗАКАЗА:
 
Scrolling effect for each category.
The forums in the main are placed on a single line and there is a button to scroll right and left. Auto scrolling is not necessary.
I have a good sense of CSS, so there is no need to invest in design. That is, I need specifically the script or modification / adjustment for this to be done. I can work on the design calmly later.
I'm working on the forum design so the current style is unstable. :)

2. ИСХОДНИКИ И ГРАФИКА:

Я предоставляю выбор исходников дизайнеру
Дизайнер должен использовать ТОЛЬКО мои исходники
Я ПРОТИВ использования в создании готового клипарта, все должно быть нарисовано вручную
It is not necessary. I can edit the style later. Unless this is not possible. But when it comes to coding, anything is possible. :)

3. ДОПОЛНИТЕЛЬНО:

0

2

Hello, MillaSims3. The FD team is ready to help with the solution of your question for donating to the development of our forum. We leave the amount at your discretion. In the coming days, I will write and post the script code in this thread.

+1

3

satsana написал(а):

Hello, MillaSims3. The FD team is ready to help with the solution of your question for donating to the development of our forum. We leave the amount at your discretion. In the coming days, I will write and post the script code in this thread.

Hello! ♥
Thank you for your kindness. I really appreciate this.
I just made a donation. It is not much (you really deserve much more ...), but it is what is within my reach at the moment.
Thank you for your kindness. I look forward to this work. ♥
Have a wonderful week!

+1

4

MillaSims3
Hello! I wrote the code, but I didn't try to install it anywhere, I tested it through the developer's tools. Try to install, if something does not work, we will fix it.

First, we need to put the sections on a single line, make them the same indentation on the sides, and display arrows in the category header. I don't have ready markup, but there are screenshots with an example of how this can be done.

https://i.gyazo.com/6db09886981234b105e430b30573b9cb.png
https://i.gyazo.com/2aa5cb14b06da599d4a810d3a8394aca.png
https://i.gyazo.com/ad4e9862ed3b9952fdd87c60ccbb3598.png

Then in the settings in the html-bottom you need to add the following:

Код:
<!-- Category slider (с) satsana -->
<script language="javascript">
var leftMargin = 40;
var blockWidth = 600;

function moveCateg (e) {
  let c = $(this).parents('.category');
  let start = +c[0].dataset.start + e.data.step;
  start = start < 0 ? 0 : (start > c[0].dataset.num-2 ? c[0].dataset.num-2 : start);
  c[0].dataset.start = start;
  c.find('tbody tr').first().css('margin-left', (e.data.leftMargin - c[0].dataset.start * e.data.blockWidth) + 'px');
}

$('.category').each(function() {
  let num = $(this).find('tbody tr').length;
  $(this).attr('data-num', num);
  $(this).attr('data-start', 0);
});

$('.catleft').on('click', {'step': -1, 'leftMargin': leftMargin, 'blockWidth': blockWidth}, moveCateg);
$('.catright').on('click', {'step': 1, 'leftMargin': leftMargin, 'blockWidth': blockWidth}, moveCateg);
</script>

+2

5

In this variant, the scrolling of the slider stops when it reaches the beginning or the end. To rewind in a circle, the moveCateg function should look like this:

Код:
function moveCateg (e) {
  let c = $(this).parents('.category');
  let start = +c[0].dataset.start + e.data.step;
  start = start < 0 ? c[0].dataset.num-2 : (start > c[0].dataset.num-2 ? 0 : start);
  c[0].dataset.start = start;
  c.find('tbody tr').first().css('margin-left', (e.data.leftMargin - c[0].dataset.start * e.data.blockWidth) + 'px');
}

+1

6

If you want to change the starting position for individual categories, you can add lines like this to the end of the script:

Код:
$('#pun-category2')[0].dataset.start = 1; // The ordinal number of the forum in the category 2, numbering starts from 0.

After them, the script will have to move the sliders to the desired position, this can be done with the following code:

Код:
$('.category').each(function() {
  $(this).find('tbody tr').first().css('margin-left', (leftMargin - $(this)[0].dataset.start * blockWidth) + 'px');
});

+1

7

satsana
Thank you a million times!
Installed as instructed and everything looks perfect!
Exceeded my expectations! Thanks Thanks Thanks! I loved the style of the arrows and the fact that it was scrolled through the title. It's really quite perfect! ♥♥♥
I hope your week is wonderful!

Добавлено спустя 19 минут 25 секунд:
As soon as I finish the design a little more, I will make a page containing information about me. Almost a biography on the internet: D. On this page, which will be visible and accessible to everyone, I will post the credits of everyone who helped me in the construction of the forum design. And it will not be just words, but links to the source. I look forward to spreading the word! ♥

Отредактировано MillaSims3 (28.09.20 17:04)

+3

8

MillaSims3
do you mind if we share the script here?

0

9

Герда написал(а):

MillaSims3
do you mind if we share the script here?

Of course, I don't care. Certainly, just as it was extremely useful for me, it could be for others. Please spread the word about this wonderful script! ♥

+2

10

MillaSims3
the script is awesome! thanks for the idea and that it is not a pity to share with everyone! :jumping:

0