» »

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


Дизайнер хорошо поработал над видом что Вид опроса для сайта (Стильный) оригинально будит смотреться на любом сайте. Так же можно заметить у каждого опроса свой оттенок цвета и на нем идет опрос в процентов оснований. Больше всего скрипт создан на стиля 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.07.2013 Просмотров: 872 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
diFoglia
diFoglia 18.07.2013 18:071
0
все робит) спасибо!
Сава
Сава 17.08.2013 21:412
0
friends
AiPeR1
AiPeR1 08.09.2015 01:473
0
какой робит не работает
AiPeR1
AiPeR1 08.09.2015 01:474
0
нету кода для вывода опроса
Brung
Brung 08.09.2015 03:575
0
Вид опроса оставляем тот же, по умолчанию, и только придаем ему совершенно другой вид.
Kosten
Kosten 08.09.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.09.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