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

Как можно реализовать. Предположим у нас есть количество просмотров страниц переменная $show в php.
Как сделать так чтобы полоса заполнялось синем цветом пока количество просмотров не станет равна 1000 после этого меняла цвет на желтый и начинало заново заполнять поле до 10 000 и тд.

Я если честно не могу это написать на javascript творение может кто найдет минутку поможет в этом деле. С меня плюсы всем кто откликнется))
зы Если есть что то подобное киньте ссылку!

Альтруизмом не страдаю.

Понятно на это я и не рассчитывал!) Скажи хотя бы логику этого действа что можно использовать в качестве блоков и.тд. Альтруизмом не страдающей ты наш!

Логики хочешь? Пожалуйста (из расчета 200px - максимальная длина полоски (100%), до 1000 просмотров):
длина полоски = ( количество просмотров / 1000 ) * 200 + 'px';
Вот и вся логика. С цветом вообще не логика, а подстановка в зависимости от результата:)

UPD: Блок - это <div> обычно:)

Вот клево т.е. нужно к определенному элементу предположением div c id прибавлять значение width на ( количество просмотров / 1000 ) * 200 + 'px'; Я правильно понял!? Слушай а чем лучше сделать у меня пока в мыслях так

<div style="z-index:1; position: relative; width:200px; height:20px;">
                          <div style="z-index:2; position: relative; height:20px; background-color:#0033CC; width:Получаемое число при вычислении px;">
                                <div style="z-index:3; position: relative; height:20px; width:200px;">
                                Число просмотров.
                               </div>
                          </div>
                </div>

Может есть конструкция по лучше. И еще я где то на сайте видел функцию которая при клике уменьшает кнопку где ее найти и вроде что то похожее на то что мне надо, ото столько раз натыкался а теперь найти не могу)

Что?:)
Нормальная конструкция получилась.
Вот посмотри

Слушай поправь почему то не работает хотя по моей задумке должно) если не трудно конечно. то что ты посоветовал конечно интересно но пока не для меня я в этом слабак)
Вот конструктор:

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

Только не смейся) Сильно если что не так!

Помести скрипт под дивы, либо используй window.onload, потому что ты пытаешься обратиться к элементу (getElementById), когда его еще нет в DOM'е

Да, и еще:

getElementById(reit)

переменной reit нет. Нужно же

getElementById('reit')

Чет вообще не помогает! все перепробовал.

Во:

<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 Огромное спасибо извини что пропал отходил от компьютера поэтому сразу не сказал спасибо. Выручил прям не знаю как! Почему у тебя карма 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>

Кто нибудь скажите пожалуйста почему скрипт не работает в 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>

В 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>

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

Пожалуйста:)