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р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения

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

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



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

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

1

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

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

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

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

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

в html-низ:

Код:
<script language="javascript">
Min=10;
for (p=1;p<=Min;p++) {$('#poll-special tr:nth-child('+p+') td:not(".tac")').addClass('e'+p+''); }
$('div#poll-special td[class^="e"] h1').each(function() {
$(this).data('origWidth', $(this).width()).width(0).animate({width: $(this).data('origWidth')}, 1200);
});
</script>

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

div#poll-special td[class^="e"] h1{-moz-border-radius: 25px;-webkit-border-radius: 25px;border-radius: 25px;} /* закругляем углы у полоски результата */
div#poll-special td.e2 h1 {background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));

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

Код:
<style type="text/css">
div#poll-special td[class^="e"] h1{-moz-border-radius: 25px;-webkit-border-radius: 25px;border-radius: 25px;}
div#poll-special td.e2 h1 {background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
background-image: -o-linear-gradient(top, #f0a3a3, #f42323);
}
div#poll-special td.e3 h1 {background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
}
div#poll-special td.e4 h1 {background-color: rgb(43,194,83);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(43,194,83)),color-stop(1, rgb(84,240,84)));
background-image: -moz-linear-gradient(center bottom,rgb(43,194,83) 37%,rgb(84,240,84) 69%);
background-image: -o-linear-gradient(bottom,rgb(43,194,83),rgb(84,240,84));
}
</style>

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

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

+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.2018 19:38:22)

0

3

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

0

4

у?! Оо

0

5

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

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

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

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."