[Tut] Pasek postępu.

[bnmbb]

Poprawiona Wersja :

 

 

A więc jak otrzymać ciekawy pasek postępu.

 

Potrzbne :

2 grafiki - Każda o TYCH SAMYCH wymiarach ,a jeśli znajduje się gdzieś napis to musi być w TYCH SAMYCH MIEJSCACH NA OBU GRAFIKACH.

HTML

CSS

Moje grafiki :

 

Okej jak już posiadamy grafikę to tworzymy CSS :

.load {
position: absolute;
left: 0px;
top: 0px;
background-image: url('test_1.png');
width: 500px;
height: 30px;
}
.load_progress {
position: absolute;
left: 0px;
top: 0px;
background-image: url('test_2.png');
height: 30px;
}

Okej no to mamy zdefiniowany CSS. Teraz wpis w HTML :

<div class="load">
<div class="load_progress" style="width: 250px;">
</div>
</div>

Efekt :

Taki prosty, troche bardziej efektywny, "zaawansowany" pasek postępu.

 

 

 

Pierwsza Wersja :

 

 

Witam ! Dziś pokażę jak zrobić pasek postępu.

 

Do czego może on służyć ? :

- Do naliczania poziomów (np. poziom 1 z 99 lub 100 xp z 10000 xp)

- i różnych innych rzeczy ,które niemuszą być stale odświeżane czyli np. postęp w uploadzie pliku czy czymś takim.

 

Czego potrzebujemy ?

- PHP

- CSS

- 2 grafiki

 

A więc co to mają być za grafiki :

Jedna musi być tłem czyli tak jakby obrazkiem ,który widać gdy jeszcze "nie napełniono" tej części

 

Można pobrać moje dwie grafiki (załączniki).

 

Co wtedy może to dać ? :

To wygląd do mojej gry. Na pasku pokazuje aktualną erę i jak dużo już jej się "przeszło" ;p.

 

Jak duże te grafiki mają być ? :

A więc tło musi mieć taką wysokość jak 1 plan paska. Szerokość jest dowolna.

1 plan może być równy szerokości. To nic nieprzeszkadza lecz u siebie zrobiłem szerokość 5px .

 

Okej mamy ?

To teraz w pliku stylu strony trzeba umieścić mniej więcej taki kod :

.nowa_era {
position: relative;
left: 40px;
background-image: url('img/progress_down.jpg');
width: 150px; /* Tu podałem normalne wymiary obrazka. Możecie dawać jakie chcecie  */
height:30px;
}
.era_zdobyte {
background-image: url('img/progress_up.jpg');
height: 30px; /*ZWRÓĆ UWAGĘ ,ŻE PODAŁEM TYLKO WYSOKOŚĆ !*/
}

Co trzeba zrobić jeszcze ? Ano w CSS dopisać pozycję absolutną tego paska bo inaczej napiszemy tylko jedno słowo

 

Potem kod. Dam go z mojej gry byście zobaczyli co i jak :

<div class="nowa_era">
<?php
if(($uzytkownik['Punkty_1'] > 300000) && ($uzytkownik['Punkty_1'] < 1000000)) {

$zapelnienie = $uzytkownik['Punkty_1'] / 1000000; //Dzielę aktualne punkty przez te do kolejnej ery
$doery = $zapelnienie * 100; // Mnoże razy 100 by wyszło mi ile procent już tego jest 
}


if($uzytkownik['Punkty_1'] > 1000000) {

$doery= 100;
}
$zapelnienie = number_format($doery, 0);
?>

<div class="era_zdobyte" style="width: <?php echo $zapelnienie;?>%;"> <!-- $doery jest to już wynik podany w procentach -->

<?php
if(($uzytkownik['Punkty_1'] > 300000) && ($uzytkownik['Punkty_1'] < 1000000)) {
echo"<center><b>Czasy współczesne</b></center>";

}
if($uzytkownik['Punkty_1'] > 1000000) {
echo"<center><b>Przyszłość</b></center>";

}
?>
</div>
</div>

 

Jeśli czegoś nierozumiesz - pisz to wytłumaczę.

Mam nadzieję ,że komuś się przyda. Chyba jest bez błędów. Zapomniałem zmienić jedną zmienną która odpowiada za wyświetlenie dokładnie całości zaokrąglonej w górę.

 

[KDKJ]

Ładne wykonanie. Czytelnie

Później zobaczę czy nie ma błędów, ale z tego co patrzałem "na szybko" to jest wszystko ok.

[bnmbb]

@ref

- Dodano nową, lepszą wersję

[save404]

Działa ! fajny motyw z tym a samemu mi sie nie chciało robić dzięki :P

[bnmbb]

Hehe, thx. To jest chyba jeden z pierwszych jak nie Pierwszy mój poradnik jaki napisałem.

[Gość]

Ładnie wykonany poradnik .

Like leci

[Carrioneater]

oczywiście like wszystko jest ok