нужна помощь Вывод Онлайна Через 'progress Bar'

[Serval 21]

Товарищи! И просто добрые люди!

Всех с праздником!

 

Прошу помощи - как реализовать вывод онлайна через 'progress bar' как например на голдворлде или pvp-game.ru (не реклама).

 

Допустим хочу поставить что то в этом роде, что бы было вместо отображения числа онлайна

 

Пример (КЛИК)

[AlexD 36]

на пвпгейм: переменную текущего онлайна из php перекидывают в переменную в js и далее высчитывают сколько полоски показать(ширина div'a):

$(document).ready(function(){
 var pr = 3609; //Сюда количество онлайна

 $('.visibleCount').width(pr * 219 / 10000); //Длина полосы на одного пользователя 0.0146 пикселя
 });

Изменено 30 апреля, 2014 пользователем AlexD

[TpaMjkee 128]

на пвпгейм: переменную текущего онлайна из php перекидывают в переменную в js и далее высчитывают сколько полоски показать(ширина div'a):

$(document).ready(function(){
 var pr = 3609; //Сюда количество онлайна

 $('.visibleCount').width(pr * 219 / 10000); //Длина полосы на одного пользователя 0.0146 пикселя
 });

 

Верно ))

[amatory91 87]

Это если делать фиксированный онлайн, а как сделать импорт чтобы он сам его собирал из файла обвязки отвечающего за онлайн?

[RuleZzz 41]

Это если делать фиксированный онлайн, а как сделать импорт чтобы он сам его собирал из файла обвязки отвечающего за онлайн?

Подставлять онлайн в случае стресса в файле server.tpl:

var pr = {online}; //Сюда количество онлайна

Изменено 1 мая, 2014 пользователем RuleZzz

[Serval 21]

Спасибку тыкнул первому) А можете более подробно написать, что и куда вставить? Желательно пример полный)

 

То что во 2ом посте - это скрипт, а как связать его с остальным?)

[Serval 21]

на пвпгейм: переменную текущего онлайна из php перекидывают в переменную в js и далее высчитывают сколько полоски показать(ширина div'a):

$(document).ready(function(){
var pr = 3609; //Сюда количество онлайна

 $('.visibleCount').width(pr * 219 / 10000); //Длина полосы на одного пользователя 0.0146 пикселя
});

 

var pr = 3609; //Сюда количество онлайна

 

Подставляю вместо выделенного красным цветом числа {online} - не получается, как сделать так, что бы брал число онлайна подскажите пожалуйста

Изменено 1 мая, 2014 пользователем Serval

[AlexD 36]

var pr = 3609; //Сюда количество онлайна

 

Подставляю вместо выделенного красным цветом числа {online} - не получается, как сделать так, что бы брал число онлайна подскажите пожалуйста

просто подставив свое значение у вас ничего не выйдет. Вам нужно добавить в шаблон 2 DIVа, поставить им выравнивание по левой стороне, высоту, ширину и выставить цвет фона :

<div class="max_online">
<div class="cur_online></div>
</div>

( 1 для обозначения макс. онлайна (пусть 200px, 1 для текущего онлайна ).

Далее в JS:

$('.cur_online').width(pr/10); ( 1 пиксель = 10 игроков, макс 2000 игроков(200px))

высчитывается соотношение: кол-во игроков к 1 пикселю и результат назначается как ширина DIVа текущего онлайна( ".cur_online" - класс DIV'а текущего онлайна )

 

 

PS: ну а если вы не знаете html и не понимаете что тут написано, можете воспользоваться прогресс баром из html5:

<progress value="{online}" max="2000"></progress>

Изменено 1 мая, 2014 пользователем AlexD

[Serval 21]

Вот что прописал на странице

 

 

<div class="gamers">

<script type="text/javascript">$(document).ready(function(){

var pr = {online}; //Сюда количество онлайна

 

$('.visibleCount').width(pr * 219 / 10000); //Длина полосы на одного пользователя 0.0146 пикселя

});</script>

<div class="gamersTitle">Текущий онлайн <a href="***">без накрутки!</a></div>

<div class="serverVer">х1200 Interlude **.*.2014</div>

<div class="onlineCount">

<div class="onlineCountLine">

<div class="visibleCount" style="width: 40.4748px;"></div>

</div>

<span>100</span>

<span>MAX</span>

</div>

</div>

 

Вот css

 

 

.gamers {

width: 244px;

height: 102px;

padding: 20px 18px 0;

background: url(../images/gamers.png);

float: left;

margin: 40px 0 0;

font: 700 14px 'Roboto Condensed', sans-serif;

}

.gamersTitle {

text-transform: uppercase;

color: #ca5623;

text-align: center;

}

.gamersTitle a {

color: #ffac29;

border-bottom: 1px dashed #ffac29;

text-decoration: none;

}

.gamersTitle a:hover {

border-color: transparent;

}

.serverVer {

width: 140px;

border-top: 1px solid #818181;

margin: 8px auto 0;

padding: 8px 0 0;

font-weight: 400;

font-size: 12px;

text-transform: uppercase;

color: #fff;

text-align: center;

}

.onlineCount {

width: 221px;

margin: 12px auto 0;

}

.onlineCount span {

color: #c6c6c6;

font-weight: 400;

font-size: 10px;

float: left;

}

.onlineCount span + span {

float: right;

}

.onlineCountLine {

width: 219px;

height: 14px;

border: 1px solid #000;

position: relative;

background: #3f3f3f;

}

.visibleCount {

height: 14px;

background: #f3c903;

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzYzkwMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMzJiMDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(left, #f3c903 0%, #d32b03 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f3c903), color-stop(100%,#d32b03)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left, #f3c903 0%,#d32b03 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left, #f3c903 0%,#d32b03 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(left, #f3c903 0%,#d32b03 100%); /* IE10+ */

background: linear-gradient(to right, #f3c903 0%,#d32b03 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c903', endColorstr='#d32b03',GradientType=1 ); /* IE6-8 */

 

}

 

 

И куда тут подставить {online} что бы работало верно?

[AlexD 36]

 

И куда тут подставить {online} что бы работало верно?

уже поставлен, просто в head добавьте:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

[Serval 21]

Разобрался, спасибо.