kostenloser Webspace werbefrei: lima-city


Balkengrafik Skript

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    soulworld

    soulworld hat kostenlosen Webspace.

    Hey,
    ich suche ein Balkengraf Skript und zwar: Ich habe eien Spezial fähiugkeit: "Magie" die lädt sich alle 5sec 10Punkte auf lädt das soll ungefähr so aussehen: http://www.fwwiki.de/images/0/07/Phasenenergie.jpg
    ich bräuchte jetzt ein skript der die aktuelle Magie aus der DB liest und als Balkengrafik darstellt...

    Ich habe ehrlich gesagt keien Ahnung wie ich das realisieren kan das aufladen etc. klappt allea aber halt das ausgeben als Balken net^^
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. soulworld schrieb:
    Hey,
    ich suche ein Balkengraf Skript und zwar: Ich habe eien Spezial fähiugkeit: "Magie" die lädt sich alle 5sec 10Punkte auf lädt das soll ungefähr so aussehen: http://www.fwwiki.de/images/0/07/Phasenenergie.jpg
    ich bräuchte jetzt ein skript der die aktuelle Magie aus der DB liest und als Balkengrafik darstellt...

    Ich habe ehrlich gesagt keien Ahnung wie ich das realisieren kan das aufladen etc. klappt allea aber halt das ausgeben als Balken net^^

    Mal eine Gegenfrage: Wie soll sich denn bei deiner Grafik der Text verhalten?
    Also, um beim Bild zu bleiben. Wo steht das "/20400" wenn die Phasenenergie 100% (20400/20400) beträgt?
    Im Blauen Balken?
    Soll der Text also statisch sein oder mit dem Balken in irgend einer weise mitwandern?
    Abgesehen davon ist es ja relativ leicht mit css einen Balken beliebiger Größe zu gestalten.

    <html>
    <head>
    	<title>Phasenenergiebalken_test 1</title>
    </head>
    <style type="text/css">
    div.Phasenenergie_frame {height: 20px ;width: 300px; margin: ; padding: 0; border: #4444AA 1px solid; background-color: #FFCCCC;  overflow: hidden;}
    div.Phasenenergie {height: 20px; width: 195px; background-color: #CCCCFF; margin: ; padding: 0; float:left; overflow: hidden;}
    </style>
    <body>
    <div class="Phasenenergie_frame" style="">
    	<div class="Phasenenergie" style="">
    		Phasenenergie 13227
    	</div>
    	/20400
    </div>
    </body>
    </html>


    Bei dem Beispiel hat der Balken eine Gesamtlänge von 300 px.
    Wenn also die Phasenenergie 13227 von möglichen 20400 beträgt, müsste der Balken 194,514 Pixel lang sein.
    (300/20400)*13227=194,514=195 Pixel.
    Mein css-Beispiel ist allerdings alles andere als Perfekt und nur ein Beispiel zum weiterarbeiten!!

    P.s. mit background-image könntest du dann auch so einen Verlauf in die Balken (Wie im Bild) einfügen.




    Beitrag zuletzt geändert: 12.2.2010 1:29:02 von simuliertes
  4. industry-giant

    industry-giant hat kostenlosen Webspace.

    Du könntest es ja auch mit Javascript realisieren:

    http://www.webappers.com/progressBar/

    als Prozentsatz nimmst du einfach den wert deiner Datenbank

    Beitrag zuletzt geändert: 13.2.2010 0:26:24 von industry-giant
  5. Es gibt sehr viele (JS) UI Libraries, die Statusbalken umsetzen. Ein meiner Ansicht nach gelungenes Beispiel enthält z.B. Ext JS. Dieses Sample zeigt die Umsetzung: http://www.extjs.com/deploy/dev/examples/message-box/msg-box.html (Progress dialog, wait dialog).
  6. du kannst auch einen 1 px breiten abschnitt in photoshop erstellen dass du dann im stylesheet als background für den bereits geladenen teil des balken mir x-repeat hernimmst, damit lassen sich noch bessere effekte erzielen, finde ich , zu einbindung.. wenn du das mit php machst kannste dir irgendwie bestimmt den prozentsatz aus der mysql-datenbank auslesen, in ner variable speichern und dann in dem style tag da einfügen mit entsprechender berechnung...

    <?php 
    $db = @new MySQLi(zugangsdaten der mysql datenbank denke das sollte bekannt sein:D );
    $prozent = $row['Phasenenergie']/$row['Phasenenergiemax']
    $progress = 3*$prozent ?>
    <style type="text/css">
    div.Phasenenergie_frame {
                 height: 20px ;
                 width: 300px; 
                 margin: ;
                 padding: 0; 
                 border: #4444AA 1px solid; 
                 background-color: #FFCCCC;  
                 overflow: hidden;}
    div.Phasenenergie {
                  height: 20px;
                  width: <?php
                                echo $progress;
                              ?>                            px;
                 background-color: #CCCCFF; 
                 margin: ;
                 padding: 0;
                 float:left;
                 overflow: hidden;}
    </style>
    <body>
    <div class="Phasenenergie_frame" style="">
    	<div class="Phasenenergie" style="">
    		Phasenenergie 13227
    	</div>
    	/20400
    </div>
    </body>
  7. Autor dieses Themas

    soulworld

    soulworld hat kostenlosen Webspace.

    So habe alles zusammengeschmissen und genau das hingektriegt was ich haben wollte super danke! :)
  8. super .. gibts auch ein demo link ? oder muss man sich da bei dir anmelden? :D
    würd mich interessieren wie's aussieht
  9. Autor dieses Themas

    soulworld

    soulworld hat kostenlosen Webspace.

    Naja ;) Also hier mal ein Screen: http://img202.imageshack.us/img202/9362/magie.pngDie Magie lädt sich alle 5sec um 4 Einheiten auf das wars eigt. und der skript sieht so aus:
    <style type="text/css">
    div.Phasenenergie_frame {height: 13px ;width: 200px; margin: ; padding: 0; border: #4444AA 1px solid; background-color: #FFCCCC;  overflow: hidden;}
    div.Phasenenergie {height: 13px; width:  <?php
        echo "$angabe";
        ?>px; background-color: #CCCCFF; margin: ; padding: 0; float:left; overflow: hidden;}
    </style>
    <body>
    <div class="Phasenenergie_frame" style="">
    	<div class="Phasenenergie" style="">
    		<?php
       if($magie >= "200")
      {
       if($magie >= "400")
       {
       echo "<small>Magie: 400 /400</small>";
       } 
       else
       {
        echo "<small>Magie: $magie /400</small>";
        }
        }
    ?>
    	
    	
    </div>
    <?php
       if($magie < "200")
      {
        echo "<small>Magie: $magie /400</small>";    
        }
    ?>
    </div>
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!