• Guten Abend,


    Ich habe mal eine Frage. Und zwar möchte ich gerne eine Progressbar erstellen.


    mit dem <progress> möchte ich es nicht machen, da es in jedem Browser anders aussieht.



    Aktuell habe ich es so das ich es mit "width"


    Dort ist aber das Problem das ich gerne die den Kompletten Balken auf 70 % Width machen.


    Dann möchte ich gerne "max" auf "4" habe. Heißt wenn meine Value "4" ist, ist der Balken voll. Wenn meine Value aber auf "2" ist, soll der Balken nur bis zur Hälfe voll sein.



    Aber die Komplette Width vom Balken soll auf 70% bleiben, da es bei 4% sonst ja relativ klein ist.




    Hat da jemand eine Idee?




    Liebe Grüßen

    CuzImCloud

  • wenn ich dich richtig verstehe soll der Balken immer 70% des Bildschirms groß sein ?

    Dann sollte man erstmal rausfinden wie viele Pixel die 70% sind. Wenn du das weißt kannst du das ja umrechnen.

    zb fensterbreite=300px;

    70% = 210px;

    210px / 4;

    value1=52.5px;

    value2=105px;

    value3=157.5px;

    value4=210px;


    So ungefähr sollte das dann auch klappen.Falls man das versteht wiee ich das meine.:(

    Aber es gibt auch schon reichlich fertige Scripte und plugins die das auch machen,vieleicht mal einfach goggeln ob da was passendes dabei ist

  • Also aktuell habe ich es so:


    Code
    <div class="test1">
                                                                            <div class="progress-bar progress-bar-danger" role="progressbar"style="width: 4%;"></div>
                                                                        </div>


    Dort wird die Länge des Balken ja auf 4% gemacht. Also sehr Klein. Ich möchte aber das der komplette Balken 70% lang ist. und Wenn ich 2% von insgesammt 4% habe, soll der Balken nur halb voll sein. Also dann sozusagen 35%.


    So ähnlich wie bei <progress value="2" max="4"> nur bei diesem Tag, sieht es in jeden Browser komisch aus.

  • Ja da muss man etwas umrechnen. Ich kann das auch schwer erklären und mit dem <progress> habe ich das auch noch nicht versucht.

    Mit den normalen div kann man das ungefähr so machen

    https://basti1012.bplaced.net/…rdner=html-seminar&id=349

    Das ist aber jetzt nur mit Prozente. Wenn die width Angabe des Balkens in Pixel angezeigt werden müssen mußt du den rechen Weg noch etwas beifügen, um die Prozente in Pixel umzurechnen .

    Das Script soll dir nur zeigen wie es ungefähr geht , nur Kopieren bringt nix weil da noch ein Fehler drinnen ist, den ich nicht verstehe.


    Frage an @alle

    In dem Script ist eine if Abfrage die kontrollieren soll ob Zahl1 größer ist als Zahl2. Das funktioniert größten Teils auch.

    Gibt man aber oben zb 300 ein und unten zb 99 , sagt die if abfrage aber das 99 nicht kleiner als 300 ist.

    Wie gesagt, das kommt bei einigen Bereichen vor das IF falsch ausgeben tut. Hat da einer nee Erklärung für ?

  • Geht das auch anders ohne das ganze um zurechnen?


    Und das ganze funktioniert ja auch nicht "ganz so gut". Der zeigt bei mir 2% wirklich nur ein ganz kleines bisschen.


    Und leider funktioniert das ganze bei mir nicht ...

  • verstehe dich irgendwie nicht . Du schreibst ja das bei dir 4 max ist . also ist 4 = 100% . 2 wären dann 50% und das zeigt er dir ja auch an.

    Was meinst du den jetzt mit deine 2% ? Du must oben den wert eingeben wenn der Balken 100% anzeigen soll. Also in deinen Fall (#1) ist das ja 4.

    Aber wie auch immer ,umrechen must du schon etwas weil du must ja auf die 100% des balkens kommen.

    Ohne rechnen musst du fertiges Script nehmen.

    Erklär mal was du angezeigt haben willst mit den Balken und was maximum ist und so weiter, und was du mit 2% meinst

  • Das bezweifel ich zwar gerade aber hauptsache du hast dein Ziel erreicht und bist zufrieden.

    Welches Script hast du den jetzt genommen ?


    Aber meine Frage ist noch offen , weiß jemand warum die if Abfrage in meinen Script in einigen Bereichen falsch ausgibt ?

    Ich habe bis jetzt noch keine erklärung dafür gefunden

  • Zitat

    In den Script ist eine if Abfrage die kontrollieren soll ob Zahl1 größer ist als Zahl2. Das Funktioniert größten Teils auch.

    Gibt man aber oben zb 300 ein und unten zb 99 , sagt die if abfrage aber das 99 nicht kleiner als 300 ist.

    Der Grund ist, dass beide Werte nicht numerisch sind, sondern Strings, da aus Eingabefeldern. Dann funktioniert der Vergleich etwas anders, nämlich lexikographisch, wie bei Wörtern in einem Lexikon:

    https://stackoverflow.com/ques…3028/string-compare-logic

    Wandle die String mit parseInt um und alles sollte gut sein.

  • daran hatte ich auch schon gedacht( aber nicht versucht ) weil ich dachte das type="number" das eigentlich verhindern sollte. type="text" hatte das gleiche problem gemacht .

    Komisch finde ich dabei auch das es nur ab und an bei bestimmten Zahlen nicht geht. Bei allen Zahlen würde ich es ja verstehen doch so ist da noch ein Fragezeichen.

    Dein Link muß ich mir gleich mal genauer durchlesen da blicke ich gerade nicht so schnell durch was da erklärt wird.

    Edit:

    parseInt() funktioniert aufjedenfall und beseitigt den Fehler.

    Danke dir Sempervivum

  • Bei Wikipedia ist es in einem Satz gut erklärt:

    Zitat


    Das namengebende Beispiel ist die Anordnung der Wörter in einem Lexikon: Sie werden zunächst nach ihren Anfangsbuchstaben sortiert, dann die Wörter mit gleichen Anfangsbuchstaben nach dem jeweils zweiten Buchstaben usw.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!