ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вид опроса для сайта (Стильный)

Вид опроса для сайта (Стильный)

Вид опроса для сайта (Стильный)
Дизайнер хорошо поработал над видом что Вид опроса для сайта (Стильный) оригинально будит смотреться на любом сайте. Так же можно заметить у каждого опроса свой оттенок цвета и на нем идет опрос в процентов оснований. Больше всего скрипт создан на стиля CSS, что он выглядит шикарно. Что на светлом сайте и на темном портале.
Установка опроса:
Этот код надо вставить в вид опроса.
Код
<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;   
   }
05 Июля 2013 Просмотров: 2067 Комментариев: (7)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 7
diFoglia
diFoglia 18 Июля 2013 18:071
0
все робит) спасибо!
Сава
Сава 17 Августа 2013 21:412
0
friends
AiPeR1
AiPeR1 08 Сентября 2015 01:473
0
какой робит не работает
AiPeR1
AiPeR1 08 Сентября 2015 01:474
0
нету кода для вывода опроса
Kolinkor
Kolinkor 08 Сентября 2015 03:575
0
Вид опроса оставляем тот же, по умолчанию, и только придаем ему совершенно другой вид.
Kosten
Kosten 08 Сентября 2015 04:056
0
AiPeR1, почти чисто на стилях сделано, могу предложить немного другой по своему дизайну.



Замена стандартного опроса и делаем его немного красивей и оригинальней.

В вид формы опросов:

Код
<div class="pollBlock">  
<div class="titles" style="text-align: center;">$QUESTION$</div>  
<div class="pollAns">$ANSWERS$</div>  
<center>  
<a id="arch" class="button_poll arhiv_rez_poll" href="$ARCHIVE_LINK$">Архив</a>  
<a id="resLink" class="button_poll arhiv_rez_poll" href="$RESULTS_LINK$">Результат</a>  
</center>  
<div class="pollTot">Всего ответов: <b>$TOTAL_VOTES$</b></div>  
</div>  

<script type="text/javascript">  
var a = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'];  
for(var i = 0; i < a.length; i++){$('div.answer div').eq(i).addClass('progress');$('div.answer div div').eq(i).addClass('progress-'+[i]);}  
$('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});  
</script>  
<script>  
  $(function () {  
if($('.pollBut').size() > 0) {  
$('#arch, #resLink').hide();  
}  
})  
</script>


В css:

Код
.progress {  
  height: 15px;  
  overflow: hidden;  
  margin: 5px 0px 5px 0px;  
  height: 15px!important;  
  background: #F4F8F9!important;  
}  

.progress-0,  
.progress-1,  
.progress-2,  
.progress-3,  
.progress-4,  
.progress-5,  
.progress-6,  
.progress-7,  
.progress-8,  
.progress-9,  
.progress-10,  
.progress-11,  
.progress-12,  
.progress-13,  
.progress-14 {  
  height: 18px!important;  
  display: block!important;  
  overflow: hidden!important;  
  margin-top: -3px;  
}  

.progress-0 {background: #5D9AD3!important;}  
.progress-1 {background: #E96465!important;}  
.progress-2 {background: #F6954E!important;}  
.progress-3 {background: #dd8cd2!important;}  
.progress-4 {background: #75D0ED!important;}  
.progress-5 {background: #5BC254!important;}  
.progress-6 {background: #CFC72D!important;}  
.progress-7 {background: #DD3344!important;}  
.progress-8 {background: #FE9B6F!important;}  
.progress-9 {background: #8CC84B!important;}  
.progress-10 {background: #DD8CD2!important;}  
.progress-11 {background: #e9eb5b!important;}  
.progress-12 {background: #E96465!important;}  
.progress-13 {background: #75D0ED!important;}  
.progress-14 {background: #5D9AD3!important;}  
  .answer {  
color: black;  
background-image: none;  
background-repeat: no-repeat;  
background-position: bottom left;  
line-height: 22px;  
display: block;  
text-align: left;  
font-size: 11px;  
}  
  .pollAns {margin: 0 3px 4px 3px;padding: 5px;text-align: center!important;}  
  .titles {display: block;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px; border-radius: 3px;background: #22A5DC;color: white;text-shadow: 0 1px 0 #22A5DC;padding: 4px 5px 5px 5px;font-size: 13px;  
}  

.button_poll {  
  cursor:pointer;  
  text-decoration:none!important;  
  display:inline-block;  
  font-size: 13px;  
  margin:0 10px 20px 0;  
  padding: 7px 11px 7px;  
  position:relative;  
  outline:none;  
  border:none;  
  
  -webkit-transition:all 0.2s linear;  
  -moz-transition:all 0.2s linear;  
  -o-transition:all 0.2s linear;  
  transition:all 0.2s linear;  
}  
.arhiv_rez_poll {  
  background:#3C75CE;  
  color: #fff;  
}  
.arhiv_rez_poll:hover {  
  background:#2859A3;  
  color:#fff;  
}  
.pollTot {  
border: 0;  
background:#006EEE;  
color: #fff;  
font-size: 13px;  
padding: 5px 10px;  
margin-top: 0px;  
text-align:center;  
}
kredit-oformi
kredit-oformi 08 Сентября 2015 08:237
0
в общем пришлось в вид опроса вставлять это так как не было возможности просмотреть результаты по выхлопу.
Код
<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>
Войдите:
avatar