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


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

1500
8.6 из 10
Проголосовало: 10






Установка:

В вид опроса:
Код

<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>


В таблицу стилей CSS:
Код

.answer {font-weight: normal;font-style: normal; position:relative; color:#4d4d4d; margin-bottom:10px;height:25px;}  
  .answer span{z-index:2;position:relative;left:-8px;color: #fff;top:8px;text-shadow: 0 -1px 0 rgba(0,0,0,0.25);}  
  .answer div{z-index:1;height:25px!important;position:absolute;top:3px;left:0px;width:100%;}  
  .progress {  
  height: 25px;  
  margin-bottom: 20px;  
  overflow: hidden;  
  background-color: #f7f7f7;  
  background-image: -moz-linear-gradient(top,#f5f5f5,#f9f9f9);  
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));  
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f9f9f9);  
  background-image: -o-linear-gradient(top,#f5f5f5,#f9f9f9);  
  background-image: linear-gradient(to bottom,#f5f5f5,#f9f9f9);  
  background-repeat: repeat-x;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  border-radius: 4px;  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',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);  
  }  
   
  .progress div {height: 25px !important;}  
  .procent {top:0px !important; left:5px !important;}  
  .progress0 {background-color: #fb3c2d !important;}  
  .progress1 {background: rgb(32, 195, 209) !important;}  
  .progress2 {background: rgb(133, 202, 45) !important;}  
  .progress3 {background: rgb(231, 197, 19) !important;}  
  .progress4 {background: rgb(22, 184, 206) !important;}  
  .progress5 {background: rgb(32, 195, 209) !important;}  
  .progress6 {background: rgb(32, 195, 209) !important;}  
   
  .progress0, .progress1, .progress2, .progress3, .progress4, .progress5, .progress6 {  
  background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255, 255, 255, 0)),color-stop(0.25,rgba(0, 0, 0, 0.07)),color-stop(0.5,rgba(0, 0, 0, 0.07)),color-stop(0.5,rgba(255, 255, 255, 0)),color-stop(0.75,rgba(255, 255, 255, 0)),color-stop(0.75,rgba(0, 0, 0, 0.07)),to(rgba(0, 0, 0, 0.07))) !important;  
  -webkit-background-size: 40px 40px !important;  
  -moz-background-size: 40px 40px !important;  
  -o-background-size: 40px 40px !important;  
  background-size: 40px 40px !important;  
  box-sizing: border-box;  
  background-repeat: repeat-x;  
  -webkit-transition: width .6s ease;  
  transition: width .6s ease;  
  }


Установка завершена!
Автор публикации: Загрузка
Загрузка
Winston8885918, это его n материал
Источник: http://by Winston888 переделка http://trane73.ru/load/4-1-0-...
  • Всего комментариев: 7

Deni_Coste
+2
Deni_Coste написал: Написано 14 Октября 2013 в 17:43
Комментарий №7
умник,где $QUESTION$ ?

FalleN
+1
FalleN написал: Написано 12 Июня 2013 в 21:35
Комментарий №4
Зато выглядит лучше

AndreyKlipikov
0
AndreyKlipikov написал: Написано 14 Июня 2013 в 10:00
Комментарий №5
Разговор о коде, а не о виде, вид каждый может настроить, код же каждый не напишет.

AndreyKlipikov
-1
AndreyKlipikov написал: Написано 12 Июня 2013 в 15:14
Комментарий №2
На основе нашего вида сделан:

k43
-1
k43 написал: Написано 12 Июня 2013 в 16:24
Комментарий №3


wacko

AndreyKlipikov
0
AndreyKlipikov написал: Написано 14 Июня 2013 в 10:06
Комментарий №6
Выше 5 коммент читай, речь о коде. Посмотри сам, но я понимаю, что ты лишь копипастер чужих работ, поэтому не сможешь оценить схожесть кода.

К тому же здесь всё равно нет того фикса, которого так не хватает опросам, а именно - растягивания полосы на 100% для блока и соотствествие процентам длине полосы ответов:

BALCETUL
-2
BALCETUL написал: Написано 11 Июня 2013 в 17:01
Комментарий №1
Вид красивый)

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