Пытаться сделать все сразу — это значит ничего не сделать.Георга Лихтенберга ©
Новый вид опроса для uCoz от DM
9258 | 
(24) Наконец я доделал форму опроса, нет она и до этого была нечего, но её исполнение очень хромало, а именно, стандартные полоски результата опроса от uCoz, меня вводили в глубокую депрессию. 
Поискав в интернете интересные решения, я не нашёл нужную мне форму опроса, поэтому пришлось взять за основу два готовых решения, скрестить их, добавить свои идеи и получить нужный результат.
TRANE73 & TRAIN
leonP4
Первый вариант - от TRANE73 & TRAIN, в котором установлена функция, процент проголосовавших за тот или иной вариант опроса, а вот изображение полоски результата, слишком широкие.
Второй вариант- от leonP4, схожий код, но только без функции процент проголосовавших, но с нужным видом полоски результата.
Единственный минус двух вариантов, это то, что в результате мы имеем лишь графические изображение полоски результата, только для 5 вариантов ответа, поэтому в моём варианте, я создал 10 графических изображений полоски результата опроса.
Установка:
Админ панель => Дизайн => Опросы => Вид формы опросов
удаляем от туда старый код и устанавливаем новый
HTML-Code
Code
<div class="cell_poll"><div class="cell_poll_title center bold">$QUESTION$</div><div class="cell_poll_variant">$ANSWERS$</div><div class="cell_poll_left text_9"><a style="font-size:7pt;" href="$RESULTS_LINK$">Результат</a></div><div class="cell_poll_right text_9">Всего ответов: <b>$TOTAL_VOTES$</b></div><div class="cell_poll_forum "></div></div>
<script type="text/javascript">
var a = ['http://www.center-dm.ru/site/poloska_1.gif','http://www.center-dm.ru/site/poloska_2.gif','http://www.center-dm.ru/site/poloska_3.gif','http://www.center-dm.ru/site/poloska_4.gif','/site/poloska_5.gif', 'http://www.center-dm.ru/site/poloska_6.gif','http://www.center-dm.ru/site/poloska_7.gif','http://www.center-dm.ru/site/poloska_8.gif','http://www.center-dm.ru/site/poloska_9.gif','http://www.center-dm.ru/site/poloska_10.gif','http://www.center-dm.ru/site/poloska_1.gif','http://www.center-dm.ru/site/poloska_2.gif','http://www.center-dm.ru/site/poloska_3.gif','http://www.center-dm.ru/site/poloska_4.gif','http://www.center-dm.ru/site/poloska_5.gif','http://www.center-dm.ru/site/poloska_6.gif','/site/poloska_7.gif','http://www.center-dm.ru/site/poloska_8.gif','http://www.center-dm.ru/site/poloska_9.gif','http://www.center-dm.ru/site/poloska_10.gif'];
for(var i = 0; i < a.length; i++){$('div.answer div').eq(i).addClass('progress').css({height: '12px'});$('div.answer div div').eq(i).addClass('progress progress_'+a).css({background: 'url(' + a[i] + ')', marginTop: '0px', marginBottom: '0px', height: '12px', backgroundRepeat: 'repeat-x'});}
$('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});
</script>
<script type="text/javascript">
var a = ['http://www.center-dm.ru/site/poloska_1.gif','http://www.center-dm.ru/site/poloska_2.gif','http://www.center-dm.ru/site/poloska_3.gif','http://www.center-dm.ru/site/poloska_4.gif','/site/poloska_5.gif', 'http://www.center-dm.ru/site/poloska_6.gif','http://www.center-dm.ru/site/poloska_7.gif','http://www.center-dm.ru/site/poloska_8.gif','http://www.center-dm.ru/site/poloska_9.gif','http://www.center-dm.ru/site/poloska_10.gif','http://www.center-dm.ru/site/poloska_1.gif','http://www.center-dm.ru/site/poloska_2.gif','http://www.center-dm.ru/site/poloska_3.gif','http://www.center-dm.ru/site/poloska_4.gif','http://www.center-dm.ru/site/poloska_5.gif','http://www.center-dm.ru/site/poloska_6.gif','/site/poloska_7.gif','http://www.center-dm.ru/site/poloska_8.gif','http://www.center-dm.ru/site/poloska_9.gif','http://www.center-dm.ru/site/poloska_10.gif'];
for(var i = 0; i < a.length; i++){$('div.answer div').eq(i).addClass('progress').css({height: '12px'});$('div.answer div div').eq(i).addClass('progress progress_'+a).css({background: 'url(' + a[i] + ')', marginTop: '0px', marginBottom: '0px', height: '12px', backgroundRepeat: 'repeat-x'});}
$('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});
</script>
и добавляем css стили
CSS-Code
Code
/* Ячейка опроса
------------------------------------------*/
.cell_poll_title {
text-align:center;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;
padding: 5px 0px;
}
.cell_poll_left {
float:left;
width:115px;
}
.cell_poll_right {
float:left;
text-align:right;
width:115px;
}
.cell_poll_forum,
.cell_poll_rezultat,
.cell_poll_variant,
.cell_poll_title,
.cell_poll {
float:left;
width:230px;
}
.cell_citation {
font-size:10px;
color:#555;
}
.cell_citation_os {
float:left;
background-color: #fff;
border: 1px solid #B6B6B5;
padding: 5px;
}
.cell_poll_rezultat,
.cell_poll_variant {
padding: 5px 0px;
}
.answer {
padding: 5px 0px 5px 0px;
}
.answer div div {
height: 10px !important;
border: 1px solid #fff;
}
.answer div {
display: block;
position: relative;
padding: 0 !important;
border: 1px solid #B6B6B5;
background: #F4F5F6;
margin: 3px 0px 0px 0px;}
/* -------------------------------------- */
------------------------------------------*/
.cell_poll_title {
text-align:center;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;
padding: 5px 0px;
}
.cell_poll_left {
float:left;
width:115px;
}
.cell_poll_right {
float:left;
text-align:right;
width:115px;
}
.cell_poll_forum,
.cell_poll_rezultat,
.cell_poll_variant,
.cell_poll_title,
.cell_poll {
float:left;
width:230px;
}
.cell_citation {
font-size:10px;
color:#555;
}
.cell_citation_os {
float:left;
background-color: #fff;
border: 1px solid #B6B6B5;
padding: 5px;
}
.cell_poll_rezultat,
.cell_poll_variant {
padding: 5px 0px;
}
.answer {
padding: 5px 0px 5px 0px;
}
.answer div div {
height: 10px !important;
border: 1px solid #fff;
}
.answer div {
display: block;
position: relative;
padding: 0 !important;
border: 1px solid #B6B6B5;
background: #F4F5F6;
margin: 3px 0px 0px 0px;}
/* -------------------------------------- */
P.S. если кто будет изменять графические изображения полоски результатов опроса, то будьте так добры, скиньте ссылку на свой результат, дабы установить ваши изображения, как дополнение к данному варианту формы опроса, разумеется с обратной ссылкой вашего проекта.
- Источник:http://www.center-dm.ru
- Вольный перевод:--------------------
Ваша оценка новости
Теги:
18 | vadim220v пишет: | 05.02.2012 | 00:39 0
а у меня опрос сехал в другой блок, то есть поверх блоков.
http://look-clip.at.ua/opros/error-poll.png - пример
подскажите как исправить.
а всё я нашёл ошибку.
у вас в CSS не прописан клас "cell_poll"
сайт http://look-clip.at.ua/
http://look-clip.at.ua/opros/error-poll.png - пример
подскажите как исправить.
а всё я нашёл ошибку.
у вас в CSS не прописан клас "cell_poll"
сайт http://look-clip.at.ua/
19 | RuleZ-DM пишет: | 05.02.2012 | 00:48 +1
Только что посмотрел в последней версии Опера (Версия: 11.61) и всё отображаеться как надо!
20 | vadim220v пишет: | 05.02.2012 | 00:50 0
я уже исправил
у вас в CSS не прописан клас "cell_poll"
вот здесь надо убрать
и получится
у вас в CSS не прописан клас "cell_poll"
Code
<div class="cell_poll"><div class="cell_poll_title center bold">$QUESTION$</div><div class="cell_poll_variant">$ANSWERS$</div><div class="cell_poll_left text_9"><a style="font-size:7pt;" href="$RESULTS_LINK$">Результат</a></div><div class="cell_poll_right text_9">Всего ответов: <b>$TOTAL_VOTES$</b></div><div class="cell_poll_forum "></div></div>
Code
<div class="cell_poll">
Code
<div class="cell_poll_title center bold">$QUESTION$</div><div class="cell_poll_variant">$ANSWERS$</div><div class="cell_poll_left text_9"><a style="font-size:7pt;" href="$RESULTS_LINK$">Результат</a></div><div class="cell_poll_right text_9">Всего ответов: <b>$TOTAL_VOTES$</b></div><div class="cell_poll_forum "></div>
21 | RuleZ-DM пишет: | 05.02.2012 | 00:57 0
как раз данный класс и прописан cell_poll, но это уже не важно, проблема решена...
22 | vadim220v пишет: | 05.02.2012 | 01:00 0
Code
/* Ячейка опроса
------------------------------------------*/
.cell_poll_title {
text-align:center;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;
padding: 5px 0px;
}
.cell_poll_left {
float:left;
width:115px;
}
.cell_poll_right {
float:left;
text-align:right;
width:115px;
}
.cell_poll_forum,
.cell_poll_rezultat,
.cell_poll_variant,
.cell_poll_title,
.cell_poll {
float:left;
width:230px;
}
.cell_citation {
font-size:10px;
color:#555;
}
.cell_citation_os {
float:left;
background-color: #fff;
border: 1px solid #B6B6B5;
padding: 5px;
}
.cell_poll_rezultat,
.cell_poll_variant {
padding: 5px 0px;
}
.answer {
padding: 5px 0px 5px 0px;
}
.answer div div {
height: 10px !important;
border: 1px solid #fff;
}
.answer div {
display: block;
position: relative;
padding: 0 !important;
border: 1px solid #B6B6B5;
background: #F4F5F6;
margin: 3px 0px 0px 0px;}
/* -------------------------------------- */
------------------------------------------*/
.cell_poll_title {
text-align:center;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;
padding: 5px 0px;
}
.cell_poll_left {
float:left;
width:115px;
}
.cell_poll_right {
float:left;
text-align:right;
width:115px;
}
.cell_poll_forum,
.cell_poll_rezultat,
.cell_poll_variant,
.cell_poll_title,
.cell_poll {
float:left;
width:230px;
}
.cell_citation {
font-size:10px;
color:#555;
}
.cell_citation_os {
float:left;
background-color: #fff;
border: 1px solid #B6B6B5;
padding: 5px;
}
.cell_poll_rezultat,
.cell_poll_variant {
padding: 5px 0px;
}
.answer {
padding: 5px 0px 5px 0px;
}
.answer div div {
height: 10px !important;
border: 1px solid #fff;
}
.answer div {
display: block;
position: relative;
padding: 0 !important;
border: 1px solid #B6B6B5;
background: #F4F5F6;
margin: 3px 0px 0px 0px;}
/* -------------------------------------- */
в принцыпе да проблемарешена
вот правильный код
Code
<div class="cell_poll_title"><b><i>«$QUESTION$»</i></b></div><div class="cell_poll_variant">$ANSWERS$</div><div class="cell_poll_left"><a style="font-size:7pt;" href="$RESULTS_LINK$">Результат</a> | <a style="font-size:7pt;" href="$ARCHIVE_LINK$">Опросы</a></div><div class="cell_poll_righ">Всего ответов: <b>$TOTAL_VOTES$</b></div><div class="cell_poll_forum"></div>
<script type="text/javascript">
var a = ['/opros/poloska_1.gif','/opros/poloska_2.gif','/opros/poloska_3.gif','/opros/poloska_4.gif','/opros/poloska_5.gif', '/opros/poloska_6.gif','/opros/poloska_7.gif','/opros/poloska_8.gif','/opros/poloska_9.gif','/opros/poloska_10.gif','/opros/poloska_1.gif','/opros/poloska_2.gif','/opros/poloska_3.gif','/opros/poloska_4.gif','/opros/poloska_5.gif','/opros/poloska_6.gif','/opros/poloska_7.gif','/opros/poloska_8.gif','/opros/poloska_9.gif','/opros/poloska_10.gif'];
for(var i = 0; i < a.length; i++){$('div.answer div').eq(i).addClass('progress').css({height: '12px'});$('div.answer div div').eq(i).addClass('progress progress_'+a).css({background: 'url(' + a[i] + ')', marginTop: '0px', marginBottom: '0px', height: '12px', backgroundRepeat: 'repeat-x'});}
$('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});
</script>
<script type="text/javascript">
var a = ['/opros/poloska_1.gif','/opros/poloska_2.gif','/opros/poloska_3.gif','/opros/poloska_4.gif','/opros/poloska_5.gif', '/opros/poloska_6.gif','/opros/poloska_7.gif','/opros/poloska_8.gif','/opros/poloska_9.gif','/opros/poloska_10.gif','/opros/poloska_1.gif','/opros/poloska_2.gif','/opros/poloska_3.gif','/opros/poloska_4.gif','/opros/poloska_5.gif','/opros/poloska_6.gif','/opros/poloska_7.gif','/opros/poloska_8.gif','/opros/poloska_9.gif','/opros/poloska_10.gif'];
for(var i = 0; i < a.length; i++){$('div.answer div').eq(i).addClass('progress').css({height: '12px'});$('div.answer div div').eq(i).addClass('progress progress_'+a).css({background: 'url(' + a[i] + ')', marginTop: '0px', marginBottom: '0px', height: '12px', backgroundRepeat: 'repeat-x'});}
$('div.answer span').each(function(){$(this).html($(this).html()+' - <span class="procent">'+$(this).attr('title').split(':')[1]+'</span>')});
</script>
23 | RuleZ-DM пишет: | 05.02.2012 | 01:06 +1
Code
.cell_poll_forum,
.cell_poll_rezultat,
.cell_poll_variant,
.cell_poll_title,
.cell_poll {
float:left;
width:230px;
}
.cell_poll_rezultat,
.cell_poll_variant,
.cell_poll_title,
.cell_poll {
float:left;
width:230px;
}
17 | chernoffo пишет: | 01.02.2012 | 01:21 0
мне не очень нравиться это решение..больше нравиться TRANE73 & TRAIN хоть и короткие полоски..но он цветнее
15 | Sergey пишет: | 11.01.2012 | 02:57 0
Добрый вечер! Два блока скопированы и вставлены на сайт...
Опросник работает, проценты считаются, здорово!
Но внутри прямоугольников области не закрашиваются.....
Вот ссылка http://mali-rus-edu.ucoz.ru/index/0-33 ....
Может быть подскажите ПОЧЕМУ!??
Заранее благодарен.
Опросник работает, проценты считаются, здорово!
Но внутри прямоугольников области не закрашиваются.....
Вот ссылка http://mali-rus-edu.ucoz.ru/index/0-33 ....
Может быть подскажите ПОЧЕМУ!??
Заранее благодарен.
Ответ: Всё работает, попробуй обновить страницу браузера несколько раз...
блин..не то( 11 | wangog пишет: | 01.12.2011 | 02:14 0
http://s017.radikal.ru/i427/1111/94/6bc1449ff0a8.gif
Что то несходится как нада ...
Что то несходится как нада ...
Ответ: Попробуй прописать css стиль:
Code
.cell_poll {
overflow: hidden;
}
overflow: hidden;
}
10 | valishking пишет: | 13.09.2011 | 16:20 0
А можно количество голосов и процент перенести правее линии?
1-10 11-18
.cell_poll_rezultat,
.cell_poll_variant,
.cell_poll_title,
.cell_poll {
float:left;
width:230px;
в этом куске 230px заменил на 100% тогда не ломается таблица и полоски за границу блока не вылазят