dynamische Balken erstellen

  1. garraty47

    garraty47 Thread Starter MacUser Mitglied

    Mitglied seit:
    18.11.2004
    Beiträge:
    545
    Zustimmungen:
    5
    hallo!
    ich würde gerne auf einer homepage eine art "spendenbalken" einbauen, ich stell mir das so vor:
    ein balken, der von z.b. 0-100 geht(unterteilung im skript).
    wenn beispielsweise der soendenstand bei 3 ist, ist links bis drei gefüllt, und die füllujng rot.
    je näher das ganze zu hundert geht, desto "grüner" wird die füllung .
    weiss jemand ein script für sowas oder hat jemand tips wie man das anstellt?

    danke und gruß
     
  2. kahler

    kahler MacUser Mitglied

    Mitglied seit:
    26.09.2005
    Beiträge:
    234
    Zustimmungen:
    0
    Entweder als Grafik via Scriptsprache (z.B. PHP) erzeugen oder eine Kombination aus DIV Layern.
     
  3. per.lyregard

    per.lyregard MacUser Mitglied

    Mitglied seit:
    13.09.2006
    Beiträge:
    46
    Zustimmungen:
    0
    Das schreit förmlich nach PHP & Ajax, aber wenn du dich damit nicht auskennst wird es eher schwer sowas zu realisieren, schon allein wegen der Einbindung des Spendenkontos.
     
  4. per.lyregard

    per.lyregard MacUser Mitglied

    Mitglied seit:
    13.09.2006
    Beiträge:
    46
    Zustimmungen:
    0
    Eine Kombination aus DIV-Layern?! Ich glaube der Junge meinte eher ein Script...
     
  5. garraty47

    garraty47 Thread Starter MacUser Mitglied

    Mitglied seit:
    18.11.2004
    Beiträge:
    545
    Zustimmungen:
    5
    also das spendenonto kann von hand eingebunden werden, z.b. eine datei zahl.txt, in der nur der spendenstand steht.
    im prinuzip geht's nicht um spenden sondern um eine art belohnungssystem für die schüler meiner frau: wenn sie 100 punkte gesammelt haben machen sie einen ausflug.
     
  6. garraty47

    garraty47 Thread Starter MacUser Mitglied

    Mitglied seit:
    18.11.2004
    Beiträge:
    545
    Zustimmungen:
    5
    ajax brauch ich doch net unbedingt, oder?
    hat jemand nen php tip für das problem?
     
  7. FLiPP

    FLiPP MacUser Mitglied

    Mitglied seit:
    16.01.2006
    Beiträge:
    316
    Zustimmungen:
    2
    ich wuerde einen 1px breiten senkrechten strich als grafik nehmen und die je nach spenden x-mal hintereinander anzeigen lassen.
    geht bestimmt auch schoener-
     
  8. simusch

    simusch MacUser Mitglied

    Mitglied seit:
    27.09.2004
    Beiträge:
    2.239
    Zustimmungen:
    188
    das geht recht einfach, wenn du die daten in einer text-datei hast...

    div mit hintergrund ersellen (verlauf von rot bis grün) in der gesamten balkenbreite (zb 300px)

    in die zelle ein bild laden:

    rechtsbündig
    farbe des hintergrunds

    die breite des bildes als "spendenstand *3 (da 300px)" definieren und fertig ist

    musst einfach nur noch den wert aus der datei auslesen und einbauen.

    wenn du hilfe brauchst, melde dich mal
     
  9. garraty47

    garraty47 Thread Starter MacUser Mitglied

    Mitglied seit:
    18.11.2004
    Beiträge:
    545
    Zustimmungen:
    5
    und der farbverlauf?
     
  10. Pingu

    Pingu MacUser Mitglied

    Mitglied seit:
    04.08.2003
    Beiträge:
    4.900
    Zustimmungen:
    341
    Du hast wohl gerade ein neues Schlagwort kennen gelernt?
    Dafür braucht man nun wirklich kein AJAX.
    PHP:
    <html>
      <head>
      ...
        <style>
          #spendenstand {
            width:<?php echo $spendenstand?>%;
          }
        </style>
      </head>
      <body>
      ...
        <div id="spendenbalken"><div id="spendenstand">&nbsp;</div></div>
      ...
      </body>
    </html>
    css:
    Code:
    #spendenbalken {
      width:[gewünschte Länge des Balkens];
      height:[gewünschte Breite/Dicke des Balkens];
      background-color:red;
    }
    
    #spendenstand {
      background-color:green;
    }
    Wenn man statt eines horizontalen Balkens einen vertikalen Balken haben möchte, tauscht man entprechend die Werte für Höhe und Breite.

    Aber ehrlich gesagt, würde man mit etwas Nachdenken von allein auf eine solche Lösung kommen (siehe andere Vorposter).

    Pingu
     
Die Seite wird geladen...