Новый вид опроса by Winston888


Новый вид опроса by Winston888

3454
9 из 10
Проголосовало: 16






Увидел вид опроса на дле сайте и оч захотелось сделать для Ucoz и вот что получилось.

Весь вид опроса на css.

В вид опроса:

Code
<div class="pollBlock" style="font-family:Tahoma,Arial;">
<div class="titles">$QUESTION$ ?</div>
<div class="pollAns" style="font-size:8pt;text-align:left;">$ANSWERS$</div>
<center><button class="fbutton" href="$RESULTS_LINK$">Результаты</button>  
<button class="fbutton" href="$ARCHIVE_LINK$">Архив опросов</button></center>
</div>

<script type="text/javascript">  
  var a = ['1','2','3','4','5','6','1','2','3','4','5','6'];  
  for(var i = 0; i < a.length; i++){$('div.answer div').eq(i).addClass('progress');$('div.answer div div').eq(i).addClass('progress'+[i]).css({marginTop: '-3px', marginBottom: '-3px',backgroundRepeat: 'repeat-x'});}  
  $('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});  
  </script>


Если у вас в опросе (например) 7 полей ответа то в строке

Code

  var a = ['1','2','3','4','5','6','1','2','3','4','5','6'];  


Допишите после 6 через запятую 7 и в конце тоже 7

В таблицу стилей

Code
  
  .progress {
overflow: hidden;
height: 15px;
margin-bottom: 5px;
background-color: #F7F7F7;
background-image: -moz-linear-gradient(top, whiteSmoke, #F9F9F9);
background-image: -ms-linear-gradient(top, whiteSmoke, #F9F9F9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(whiteSmoke), to(#F9F9F9));
background-image: -webkit-linear-gradient(top, whiteSmoke, #F9F9F9);
background-image: -o-linear-gradient(top, whiteSmoke, #F9F9F9);
background-image: linear-gradient(top, whiteSmoke, #F9F9F9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
  .progress0 {
color: white;
text-align: center!important;
text-indent: -2000em!important;
height: 15px!important;
display: block!important;
overflow: hidden!important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;
background: #0E90D2!important;
background-image: -moz-linear-gradient(top, #149BDF, #0480BE)!important;
background-image: -ms-linear-gradient(top, #149BDF, #0480BE)!important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149BDF), to(#0480BE))!important;
background-image: -webkit-linear-gradient(top, #149BDF, #0480BE)!important;
background-image: -o-linear-gradient(top, #149BDF, #0480BE)!important;
background-image: linear-gradient(top, #149BDF, #0480BE)!important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0)!important;
}
  .progress1 {
color: white;
text-align: center!important;
text-indent: -2000em!important;
height: 15px!important;
display: block!important;
overflow: hidden!important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;  
background-color: #DD514C!important;
background-image: -moz-linear-gradient(top, #EE5F5B, #C43C35)!important;
background-image: -ms-linear-gradient(top, #EE5F5B, #C43C35)!important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EE5F5B), to(#C43C35))!important;
background-image: -webkit-linear-gradient(top, #EE5F5B, #C43C35)!important;
background-image: -o-linear-gradient(top, #EE5F5B, #C43C35)!important;
background-image: linear-gradient(top, #EE5F5B, #C43C35)!important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0)!important;
}
  .progress2 {
color: white;
text-align: center!important;
text-indent: -2000em!important;
height: 15px!important;
display: block!important;
overflow: hidden!important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;  
background-color: #5EB95E!important;
background-image: -moz-linear-gradient(top, #62C462, #57A957)!important;
background-image: -ms-linear-gradient(top, #62C462, #57A957)!important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62C462), to(#57A957))!important;
background-image: -webkit-linear-gradient(top, #62C462, #57A957)!important;
background-image: -o-linear-gradient(top, #62C462, #57A957)!important;
background-image: linear-gradient(top, #62C462, #57A957)!important;
background-repeat: repeat-x!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0)!important;
}
  .progress3 {
color: white;
text-align: center!important;
text-indent: -2000em!important;
height: 15px!important;
display: block!important;
overflow: hidden!important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;  
background-color: #4BB1CF!important;
background-image: -moz-linear-gradient(top, #5BC0DE, #339BB9)!important;
background-image: -ms-linear-gradient(top, #5BC0DE, #339BB9)!important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5BC0DE), to(#339BB9))!important;
background-image: -webkit-linear-gradient(top, #5BC0DE, #339BB9)!important;
background-image: -o-linear-gradient(top, #5BC0DE, #339BB9)!important;
background-image: linear-gradient(top, #5BC0DE, #339BB9)!important;
background-repeat: repeat-x!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0)!important;
}
  .progress4 {
color: white;
text-align: center!important;
text-indent: -2000em!important;
height: 15px!important;
display: block!important;
overflow: hidden!important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;  
background-color: #FAA732!important;
background-image: -moz-linear-gradient(top, #FBB450, #F89406)!important;
background-image: -ms-linear-gradient(top, #FBB450, #F89406)!important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FBB450), to(#F89406))!important;
background-image: -webkit-linear-gradient(top, #FBB450, #F89406)!important;
background-image: -o-linear-gradient(top, #FBB450, #F89406)!important;
background-image: linear-gradient(top, #FBB450, #F89406)!important;
background-repeat: repeat-x!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0)!important;
}
   
.progress5 {
color: white;
text-align: center!important;
text-indent: -2000em!important;
height: 15px!important;
display: block!important;
overflow: hidden!important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;
background: #0E90D2!important;
background-image: -moz-linear-gradient(top, #149BDF, #0480BE)!important;
background-image: -ms-linear-gradient(top, #149BDF, #0480BE)!important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149BDF), to(#0480BE))!important;
background-image: -webkit-linear-gradient(top, #149BDF, #0480BE)!important;
background-image: -o-linear-gradient(top, #149BDF, #0480BE)!important;
background-image: linear-gradient(top, #149BDF, #0480BE)!important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0)!important;
}  
  .answer {
color: black;
background-image: none;
background-repeat: no-repeat;
background-position: bottom left;
line-height: 22px;
display: block;
}
  .pollAns {padding: 5px;text-align: center!important;}
  .titles {margin: 0 3px 4px 3px;display: block;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;padding: 4px 5px 5px 5px; border-radius: 3px;background: #FF6161;color: white;text-shadow: 0 1px 0 #BA4747;}

Автор публикации: Загрузка
Загрузка
Winston888, это его n материал
  • Всего комментариев: 4

Winston888
0
Winston888 написал: Написано 11 Ноября 2012 в 18:55
Комментарий №3
Этот вид опроса можно увидеть на моём сайте

Lacr1mosa
+1
Lacr1mosa написал: Написано 11 Ноября 2012 в 23:41
Комментарий №4
да всем на..плевать biggrin

BLAzER
0
BLAzER написал: Написано 11 Ноября 2012 в 18:53
Комментарий №1
Класс!

Winston888
+4
Winston888 написал: Написано 11 Ноября 2012 в 18:54
Комментарий №2
Спасибо )

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 4
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: