X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> bootstrap progressbar
ikeacatalogue
ikeacatalogue
Topic Starter сообщение 6.5.2013, 21:56; Ответить: ikeacatalogue
Сообщение #1


Привет.
Есть скрипт, который загружает автоматически прогресс бар с течением времени. Вот он в действии: http://jsfiddle.net/vacNJ/
JS:
[JS] <script type="text/javascript">
setTimeout(function () {
$('.progress .bar').each(function () {
var me = $(this);
var perc = me.attr("data-percentage");
var current_perc = 0;
var progress = setInterval(function () {
if (current_perc >= perc) {
clearInterval(progress);
} else {
current_perc += 1;
me.css('width', (current_perc) + '%');
}
me.text((current_perc) + '%');
}, 50);
});
}, 300);
</script>[/JS]

HTML:
<div class="progress progress-striped active">
<div class="bar" data-percentage="100" style="width: 0%; "></div>
</div>

Как запускать его по клику?
Как сделать его многоразовым, чтобы прогрессбар загружался каждый раз при клике?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alekslv
alekslv
сообщение 10.5.2013, 16:11; Ответить: alekslv
Сообщение #2


<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script >
function add()
{ setTimeout(function () {/* ....ваш код.....*/} ,300 )

}
window.onload=function()
{ document.getElementById('button').onclick=add;
}
</script>
</head>
<body>
<div class="progress progress-striped active">
<div class="bar" data-percentage="100" style="width: 0%; "></div>
</div>
<button id="button">
</button>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ikeacatalogue
ikeacatalogue
Topic Starter сообщение 10.5.2013, 21:18; Ответить: ikeacatalogue
Сообщение #3


(alekslv @ 10.5.2013, 19:11) *
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script >
function add()
{ setTimeout(function () {/* ....ваш код.....*/} ,300 )

}
window.onload=function()
{ document.getElementById('button').onclick=add;
}
</script>
</head>
<body>
<div class="progress progress-striped active">
<div class="bar" data-percentage="100" style="width: 0%; "></div>
</div>
<button id="button">
</button>
</body>
</html>

Большое спасибо. Правда есть один нюанс, при первом клике все ок, при втором- прогресс бар сначала откатывается назад со 100 до начала, а потом как и нужно с нуля до ста. Как бы это побороть, в смысле убрать анимацию обратного отката, и оставить с нуля до 100.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alekslv
alekslv
сообщение 11.5.2013, 15:21; Ответить: alekslv
Сообщение #4


я не местый на этом форуме..правила особо не читал...но мне кажется то что Вы хотите
(ikeacatalogue @ 11.5.2013, 00:18) *
Как бы это побороть, в смысле убрать анимацию обратного отката, и оставить с нуля до 100.

...это как бы робота...Вы просто ставите задание...а что Вы сделали что б исправить проблему

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыWeb-разработка (C++/PHP/SQL/JS/Bootstrap). HighLoad проекты.
0 DF™ 1420 28.7.2020, 13:24
автор: DF™
Открытая тема (нет новых ответов) Ишем верстальшика - bootstrap
с опытом работы в bootstrap
18 AWARO 6354 13.8.2018, 0:34
автор: kalm
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыИзменить шаблон, сместить элементы bootstrap
1 Nemo 3242 16.4.2018, 23:30
автор: gruz333
Открытая тема (нет новых ответов) Недорогие услуги - php/js/mysql/jquery/bootstrap
2 vlads 3796 25.12.2017, 21:18
автор: xetedata
Открытая тема (нет новых ответов) Бесплатная верстка html,css,bootstrap. Подгоню на вордпресс.
0 archer88 1505 15.8.2017, 8:26
автор: -archer88-


 



RSS Текстовая версия Сейчас: 29.3.2024, 17:40
Дизайн