Прогресс-бар для Firefox.

[mshdn]

Прогресс-бар для Firefox.

Нужен Графический прогресс-бар, т.е. Прогресс-бар построен на принципе добавления прямоугольников
<div class="one"></div>
.class{background:url(images/one.png)}
с задержкой settimeout (или вычислительный цикл 50000 повторений)
Опера отображает правильно, последовательно добавляя по одному прямоуг.
а Firefox накапливает( в Буфере- ?) , а затем выдает 100%.
Как обмануть браузер?

 

[Adelf]

Как обмануть браузер?

Не стоит этим заниматься. Браузер всегда может отомстить

З.Ы. Мы чо тут телепаты шоле? Кода нет, html и css - какойто бред, а желание обманывать браузеры есть.

Глянь какойнибудь plugins.jquery.com и найди там решение...

 

[Alexandre]

тяни ширину в диве.

может стоит перенести "Ищу готовое решение"

 

[mshdn]

З.Ы. Мы чо тут телепаты шоле? Кода нет, html и css - какойто бред, а желание обманывать браузеры есть.

Посмотрите код:
<script Language="JavaScript"><!--
function fpopup3(n)
{
var x=n; var popup; var i;
popup='';
for(i=1;i<=x;i++)
{
popup+="<div class='one'></div>";
}
return popup;
}

function generate() // эту функцию вызывает форма
{
offerbar=document.getElementById('bar');
offerbar.style.display="block";

var n;
offer=document.getElementById('bar1');
for(n=1;n<=44;n++)
{
p1="<div class='first'></div>";
p1=p1+fpopup3(n);
p1=p1+"<div class='last_load'></div>";
t=n*2;
if(n==44){t=100};
p1=p1+"<span>"+t+"% выполнено</span>";
offer.innerHTML = p1;
k=0;for(j=0;j<400000;j++) k=k+j; // задержка
}
}
//--></script>

<STYLE type=text/css>
.shadows{width:100%;height:100%;position:fixed;top:0;left:0;background:#747775;z-index:10000;opacity:0.6;}
.loader{width:712px;height:44px;background: url(../images/bgr/loader.png) no-repeat left top;position:fixed;top:50%;margin-
top:-80px;left:50%;margin-left:-356px;z-index:100001}
.loader p{text-align:center;font:bold 20px "arial";text-align:center;color:#000;margin:-37px 0 0 0;position:relative;z-
index:10;float:left;background:#fff;padding:0 1px;margin-left:110px}
.loader img{position:absolute;left:270px}
.loading{height:25px;width:700px;position:relative;left:5px;top:2px}
.one{background: url(../images/bgr/one.png) no-repeat left top;float:left;width:13px;height:38px;margin-right:2px}
.first{background: url(../images/bgr/first.png) no-repeat left top;float:left;width:15px;height:38px;margin-right:2px}
.last_load{background: url(../images/bgr/last.png) no-repeat left top;float:left;width:15px;height:38px}
</style>
<!--
здесь - shadows - затетение
loader.png - полоса для бара
first_load.png - начальный прямоуг.
last_load.png - конечный
one.png - средний
-->

<div id="bar" style="display:none">
<div class="shadows"></div>
<div class="loader">
<p>Генерация идей подарков! пожалуйста подождите</p>
<div class="loading" id ="bar1">
<div class="first"></div>
<span>00% выполнено</span>
</div>
</div>
</div> <!-- bar -->

 

[Adelf]

Лучше уж на хостинг куданибудь... Это же не php. Вживую гораздо удобнее смотреть...

Главная ошибка - это прогресс-бар с помощью кучи дивов. Обычно их делают двумя дивами. Один в другом.. Внутреннему просто изменяют ширину...

Как-то так:

<div style="border: 1px solid rgb(0, 0, 0); background-color: rgb(255, 0, 0); width: 100%; text-align: left;">
    <div style="background-color: rgb(0, 0, 255); width: 20%;">&nbsp;</div>
</div>

 

[A1x]

или img точечный и ему ширину изменять

 

[mshdn]

В том то и проблема - нужно сделать через добавление
прямоугольников, а не через изменение ширины. Вопрос в том что под Оперой работает, а
в Firefox не происходит постепенного отображения, т.е. прячет в буфер, а потом выдает полный бар.Как отменить буферизацию в Firefox?

 

[varan]

Ты же не передаешь управление браузеру из javascript. Задержка очень интересно реализована, через какой-то странный цикл.
Короче, сделай таймер через setInterval, и в нём делай время от времени обновление прогрессбара.
А вообще, мне почему-то кажется, что задача какая-то извращенская слегка

p.s. Opera многопоточная теперь что ли?