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

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения
Внимание! Просьба проголосовать: Идеальный заказчик!

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

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



[Выполнено] (É 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.2020 17:04:06)

+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