Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML]Progress bar, getbootstrap hover.
Giluś
post
Post #1





Grupa: Zarejestrowani
Postów: 377
Pomógł: 9
Dołączył: 2.11.2010

Ostrzeżenie: (0%)
-----


Hej, chciałbym zrobić coś takiego:
Normalnie nic się nie dzieję, dopiero gdy najedziemy (myszką, hover) na pasek to on zanika i pojawia się inny który jest w 100% wypełniony z napisem: Brakuję: xxx %.

  1. <div class="progress progress-striped active">
  2. <?php
  3. $bar_procent = ($users['jednostka_exp'] / $ile_expa['exp']) * 100;
  4. $bar_procent_2 = 100 - $bar_procent;
  5. ?>
  6. <div class="bar bar1" style="width: <?php echo $bar_procent; ?>%;"></div>
  7. </div>


Myślałem, żeby zrobić tak:

Dodać kod:
  1. <div class="bar bar2" style="width: 100%;">Pozostało <?php echo $bar_procent_2; ?>%</div>


Standardowo:
Klasa: bar1 - jest widoczna, a klasa bar2 - jest niewidoczna.

Następnie, gdy najedziemy na ten pasek to staje się on niewidoczny i dodatkowo staje się wtedy aktywny 2 pasek (bar2).

Macie jakieś pomysły ?


Pozdrawiam i z góry bardzo dziękuje (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Ivanowski
post
Post #2





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 7.07.2014

Ostrzeżenie: (0%)
-----


Poprzez Jquery
Kod
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


i kod w tym frameworku
Kod
$(document).ready(function(){

  $( '.bar2' ).hide();

  $( '.bar1' ).mouseover(function(){
  
    $(this).hide();
   $( '.bar2' ).show('slow');

  });

});

Kod pisany z pamięci *no hejterinio*
Oczywiście kod, który podałem umieszczasz na samym dole pliku.

Ten post edytował Ivanowski 29.10.2014, 20:00:02
Go to the top of the page
+Quote Post
Giluś
post
Post #3





Grupa: Zarejestrowani
Postów: 377
Pomógł: 9
Dołączył: 2.11.2010

Ostrzeżenie: (0%)
-----


Ok, super.. a teraz jak myszką zjadę z tego pola to chcę aby powróciło do stanu pierwotnego (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 23.08.2025 - 05:10