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

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее

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

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



Оформление результатов опроса

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

1

Оформление результатов опроса
Собственное оформление результатов опроса с анимацией.

http://forumupload.ru/uploads/0007/e3/f7/2617/644212.png

Автор: Romych
Платформа: MyBB

Может быть кому-то скучновато смотреть на то как выглядят результаты опроса, вот как вариант:

Визуальное оформление результатов опроса

в html-низ:

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

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

скрипт присваивает строкам с результатами опроса класс e + номер строки, т.е. e2, e3, e4 и т.д. (кроме e1 потому, что первая строка это сам  вопрос, а уже со второй строки начинаются варианты ответа)
и соответственно можно присвоить каждой строке показывающей результат свой фон
например (тут пример с градиентной заливкой, можно и проще конечно)

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

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

а вот вариант со стилем для трёх строк
в html-верх:

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

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

+ ко всему добавлена анимация появления полосок результата

Отредактировано Герда (19.05.13 21:37)

+1

2

Опрос аля Romych
Еще один вариант оформления результатов опроса
http://uploads.ru/t/G/i/w/Giwt2.png

Автор: Deff
Платформа: MyBB

Cкрипт (В HTML низ)

Код:
    <!--Раскраска Опросов-->
    <div class="style1" style="display:none">
    div.RL div.111,div.RL h1.111{
     background-image:url(9999);
     background-repeat:repeat-x;
     border:none 0 transparent!important;
     background-color:transparent!important;
     background-clip:border-box;
     height:25px!important;
    }
    .punbb .main div.RL h1{
     padding:0 0 0 15px!important;
     margin:0px 0 0 -1px;
     background-position:center right!important;
    }
    div.RL div{
     position:absolute;
     padding:0 0 0 14px;
     margin:-25px 0 0 -14px;
     background-position:center left!important;
    }
    </div>
     
    <script language="javascript">
    var ImgMyArray=new Array(
    "http://uploads.ru/t/n/x/w/nxwy9.png",
    "http://uploads.ru/t/D/J/O/DJOf4.png",
    "http://uploads.ru/t/J/m/d/JmdFo.png",
    "http://uploads.ru/t/W/6/t/W6tLA.png",
    "http://uploads.ru/t/F/I/u/FIuDg.png",
    "http://uploads.ru/t/W/e/f/WefAz.png",
    "http://uploads.ru/t/8/r/Q/8rQkI.png"
    )
    var Z=$("div.style1").html();
    var XX=ImgMyArray.length;
    var j=0; var Zsum='';
     
    $("#poll-special .poll2 td h1").each(function(i){$(this).wrap('<div class=RL></div>');
    $(this).after('<div class=e'+i+'></div>')
    if(j==XX){j=0}; Zsum+=(Z.replace(/111/img,'e'+i+'')).replace(/9999/img,ImgMyArray[j]);//alert(Zsum)
    $(this).addClass('e'+i);
    j++;
    });
    $("div.style1").html('<style>'+Zsum+'</style>')
    $("div.RL h1").each(function() {
    $(this).data('origWidth', $(this).width()).width(0).animate({width: $(this).data('origWidth')}, 1200);
    });
    </script><!--//End /=Раскраска -->
пояснения

1. Картинки-полоски в скрипте - коротковаты (нун длиннее
2. Лучше не меняя высоты картинок(сделать их уже, а для сдержанности - полупрозрачными
3. Можно сделать вообще их маленьким Шариком, тогда итоговый вид полосы будет => http://uploads.ru/i/H/9/3/H93bd.png
Тут вродь с формой можно фантазировать, и вертикальный штрих, и элипс и треугольник...

Заказать пачку картинок(сейчас их 7, хотя можно их сделать больше количеством или меньше) можно тут => Элементы дизайна, графика, арт

Cелекторы элементов (Всего их три)
http://uploads.ru/i/Y/x/r/YxrCF.png


Вариант 2 (с Одной картинкой)
http://uploads.ru/i/R/F/e/RFeLQ.png

Код:
    <!--Раскраска Опросов-->
    <style>
    .punbb .main div.RL h1{
    background-image:url(http://uploads.ru/i/f/R/D/fRDid.png);
    background-repeat:repeat-x;
    border:none 0 transparent!important;
    background-color:transparent!important;
    background-clip:border-box;
    height:20px!important;
    padding:0 0 0 20px!important;
    margin:0;
    background-position:-5px 50%!important;
        border-radius:15px;
        -webkit-border-radius:15px;
        -khtml-border-radius:15px;
        -moz-border-radius:15px;
        -o-border-radius:15px;
    }
    </style>

    <script language="javascript">
    $("#poll-special .poll2 td h1").each(function(i){$(this).wrap('<div class=RL></div>');});
    $("div.RL h1").each(function(){
    $(this).data('origWidth', $(this).width()).width(0).animate({width: $(this).data('origWidth')}, 1200);
    });</script><!--//End /=Раскраска -->

Двух цветный:
http://uploads.ru/i/P/F/D/PFDzb.jpg

Код:
    <!--Раскраска Опросов-->
    <style>
    .punbb .main div.RL.rL0 h1{
     background-image:url(http://uploads.ru/i/I/l/9/Il9S4.png);
    }
    .punbb .main div.RL.rL1 h1{
     background-image:url(http://uploads.ru/i/f/R/D/fRDid.png);
    }
    .punbb .main div.RL h1{
     background-repeat:repeat-x;
     border:none 0 transparent!important;
     background-color:transparent!important;
     background-clip:border-box;
     height:20px!important;
     padding:0 0 0 20px!important;
     margin:0;
     background-position:-175px 50%!important;
        border-radius:15px;
        -webkit-border-radius:15px;
        -khtml-border-radius:15px;
        -moz-border-radius:15px;
        -o-border-radius:15px;
    }
    </style>
     
    <script language="javascript">
    ImgMy='http://uploads.ru/i/F/p/4/Fp47A.png';j=0;
    $("#poll-special .poll2 td h1").each(function(){if(j==2){j=0};$(this).wrap('<div class="RL rL'+j+'"></div>');j++;});
    $("div.RL h1").each(function(){
    $(this).data('origWidth', $(this).width()).width(0).animate({width: $(this).data('origWidth')}, 1200);
    });</script><!--//End /=Раскраска -->

Отредактировано Герда (06.03.18 19:38)

0

3

ruslan_as
на странице с примером работает, следовательно, скрипты рабочие.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

4

у?! Оо

0

5

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

ни один не работает....

я сразу два по глупости вставила и у меня всё работает ОО

0