Полоса рейтинга по состоянию просмотра странице

[Sweet]

Во:

<div style="position: relative; width:200px; height:20px;">
  <div style="position: relative; height:20px; background-color:#0033CC;" id="reit">
    <div style="position: relative; height:20px; width:200px;">Число просмотров.</div>
  </div>
</div>
<script>           
var show = 200;
if (show < 1000 ) {
document.getElementById('reit').style.width = ( show / 1000 ) * 200 + 'px'; 
} else {
document.getElementById('reit').style.width = ( show / 10000) * 200 + 'px';
}                
</script>

[ybiza]

Sweet Огромное спасибо извини что пропал отходил от компьютера поэтому сразу не сказал спасибо. Выручил прям не знаю как! Почему у тебя карма 514 я же по моему ставил + 515 было не могу понять.

Слушай а ты мне ссылку давал на материал там анимация была сюда тоже можно это прикрутить чтобы при загрузки страниц она наполняла блок. Щас вот думаю как это реализовать.

Написал вот так работает но без анимации. Что не так!

<div style="position: relative; width:200px; height:20px;">
<div style="position: relative; height:20px; background-color:#0033CC;" id="reit">
<div style="position: relative; height:20px; width:200px;">Число просмотров.</div>
</div>
</div>
<script>      
var element = document.getElementById("reit");
var from = 0; // Начальная координата X
var to = <?php echo $this->article->hits; ?>; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта

setTimeout(function() {
    var now = (new Date().getTime()) - start; // Текущее время
    var progress = now / duration; // Прогресс анимации

    var result =  ( to / 1000 ) * 200;

    element.style.width = result + "px";

    if (progress < 1) // Если анимация не закончилась, продолжаем
        setTimeout(arguments.callee, 10);
}, 10);


function delta(progress) {
    return Math.pow(progress, 2);
}                
</script>

[ybiza]

Кто нибудь скажите пожалуйста почему скрипт не работает в IE 6 как в остальных IE не знаю.

<div style="position: relative; width:200px; height:20px;">
  <div style="position: relative; height:20px; background-color:#0033CC;" id="reit">
    <div style="position: relative; height:20px; width:200px;">Число просмотров.</div>
  </div>
</div>
<script>           
var show = 200;
if (show < 1000 ) {
document.getElementById('reit').style.width = ( show / 1000 ) * 200 + 'px'; 
} else {
document.getElementById('reit').style.width = ( show / 10000) * 200 + 'px';
}                
</script>

[Sweet]

В IE не работает из-за позиционирования (используй position: absolute).
Что касается анимированного варианта: функция работает, но result-то не меняется и всегда равен конечному результату Но в твоем случае лучше привязываться не ко времени, а к длине. Как-то так:

<div style="position: absolute; width:200px; height:20px;">
  <div style="position: absolute; height:20px; background-color:#0033CC;" id="reit">
    <div style="position: absolute; height:20px; width:200px;">Число просмотров.</div>
  </div>
</div>
<script>      
var element = document.getElementById("reit"),
    now = 0,
    to = 273;
    
(function(){
  if(now < to){
    element.style.width = ( now++ / 1000 ) * 200 + 'px';
    setTimeout(arguments.callee, 1);
  };
}());             
</script>

[ybiza]

Профессор Sweet СПАСИБО ОГРОМНОЕ!!! Сижу сейчас как дурак радуюсь просто супер то что надо. Можно было бы плюсов наставил Карма лопнула. Еще раз огромное спасибо!

[Sweet]

Пожалуйста