HTML5 progress Element

[Yael]

Hallöchen,

wird das HTML5 progress Element in allen Browsern unterstützt?

<progress max="100" value="80"></progress>

Wichtige sind für mich folgende Browser

• Firefox
• Internet Explorer ab Version 9
• Chrome
• Opera
• Safari

Oder gibt es eine bessere alternative ein Fortschrittsbalken anzuzeigen?

[Gunnar Bittersmann]

@@Yael:

nuqneH

wird das HTML5 progress Element in allen Browsern unterstützt?

Kuckst du: http://caniuse.com/#search=progress

Qapla'

[Yael]

Hallo,

Kuckst du: http://caniuse.com/#search=progress

schade, der Internet Explorer macht nicht mit

Dann wohl doch eher mit HTML & CSS

  
<div class="fsb">  
  <div class="fortschritt"></div>  
</div>  

  
 div.fsb {  
    border:1px solid #000;  
    background-color:white;  
    width:200px;  
    height:28px;  
    padding:1px;  
  }  
  
  div.fortschritt {  
    background-color:#000;  
    height:28px;  
    width:50%;  
  }  

[ChrisB]

Hi,

Kuckst du: http://caniuse.com/#search=progress

schade, der Internet Explorer macht nicht mit

https://www.google.com/search?q=html5+progress+polyfill

MfG ChrisB

[Yael]

Hallo,

https://www.google.com/search?q=html5+progress+polyfill

Danke für den Link, dieser sieht recht gut aus.

[Gunnar Bittersmann]

@@Yael:

nuqneH

Kuckst du: http://caniuse.com/#search=progress

schade, der Internet Explorer macht nicht mit

Doch, das macht er. (Schon ab Version 10. Welche Relevanz hat der 9er oder gar ältere noch?)

Dann wohl doch eher mit HTML & CSS

<div class="fsb">
  <div class="fortschritt"></div>
</div>

div-Suppe anstatt des richtigen HTML-Elements?? Nein.

Was spricht gegen progressive enhancement?

<progress value="0.42">42%</progress>  

Alte Browser, sie das progress-Element nicht kennen, zeigen halt den Wert als Zahl an.

Qapla'

[Yael]

Hallo,

Was spricht gegen progressive enhancement?

<progress value="0.42">42%</progress>

  
Danke, ok dann werde ich dieses so nutzen. Allerdings bekomme ich ein Problem wenn ich dieses so darstellen möchte  
  
~~~html
  
<progress value="0.42">42%</progress> 42% abgeschlossen  

In den alten Brwosern wird mir dann der Wert 42% doppelt dargestellt, richtig? Und habe ich auf die Farbe von diesem Balken einen Einfluss? Schön wäre es natürlich wenn ich eine Art % unterhalb den Balken bekomme z.B. 10% - 20% 30% usw. Verstehst du was ich meine? Ist dieses Möglich?

[Yael]

Hallo,

OK, das gestallten soll wohl doch gehen http://css-tricks.com/html5-progress-element/ auch mit meinem % Problem gibt es dort eine Lösung.

[Yael]

Hallo Gunnar,

ist das richtig was ich gemacht habe?

  
progress {  
    background-color: #efefef;  
    border: 1px solid #efefef;  
    margin-left: 23px;  
    margin-top: 20px;  
	}  
  
progress::-webkit-progress-bar {  
    background-color: #efefef;  
    border: 1px solid #efefef;  
    margin-left: 23px;  
    margin-top: 20px;  
}  
	  
progress::-moz-progress-bar {  
    background-color: #bc5039;  
	}  
  
progress::-webkit-progress-value {  
    background-color: #bc5039;  
}  

oder muss ich noch weitere Sachen einbauen dass es in allen Browser gut aussieht?

[Yael]

Hallöchen,

ich bin derzeit bisschen mit PHP beschäftigt. Leider bekomme ich eine Fehlermeldung "Notice: Undefined offset: 4"

Diese sagt mir, dass ich keinen Index4 habe! Soweit verstehe ich diese Meldung. Mein PHP - Code sieht so aus

  
$seite = explode("/", $_SERVER['REQUEST_URI']);  
  
<?php if($seite[2] == 'profile' && $seite[3] == 's1.html' ):?>  
<progress value="0.20">20%</progress>  
<?php endif;?>  
  
<?php if($seite[2] == 'profile' && $seite[4] == 's2.html' ):?>  
<progress value="0.40">40%</progress>  
<?php endif;?>  

Wenn ich nun http://example.org/create/profile/s1.html aufrufe bekomme ich die oben genannten Meldung.

Wenn ich nun http://example.org/create/profile/56456844154/s2.html aufrufe (hier ist meine ID mit im Spiel) funktioniert es, da logischerweise alle 4 Bereich da sind.

Wie könnte ich dieses Problem nun beheben? Mein "progress" Bereich kommt aus einer Datei, ich wollte nicht für _jede_ Datei eine neue Datei einbinden.

Versteht ihr was ich meine?

[M.]

Mahlzeit,

Wie könnte ich dieses Problem nun beheben? Mein "progress" Bereich kommt aus einer Datei, ich wollte nicht für _jede_ Datei eine neue Datei einbinden.

Du könntest per isset() prüfen, ob der Index 4 existiert.
Und es ist keine Fehlermeldung sondern eine Notiz oder Information. Fehler müssen behandelt werden oder brechen das Script ab, Notices diesen nur als Info und lassen das Script weiterlaufen.

Das soll aber nicht heissen, dass du sie ignorieren sollst ;)

[Yael]

Hallo,

Du könntest per isset() prüfen, ob der Index 4 existiert.

Danke für den Tipp. Ich werde mal schauen ob ich es irgendwie mit isset() hinbekomme.

Das soll aber nicht heissen, dass du sie ignorieren sollst ;)

Ignorieren kann ich sie leider nicht, da mir diese Meldungen auf der Seite angezeigt werden und dieses sieht echt scheiße aus :)

[M.]

Mahlzeit,

Hallo,

Du könntest per isset() prüfen, ob der Index 4 existiert.

Danke für den Tipp. Ich werde mal schauen ob ich es irgendwie mit isset() hinbekomme.

  
if(isset($seite[4]) && $seite[4] == 's2.html') { ....  

ganz einfach ;)

Ignorieren kann ich sie leider nicht, da mir diese Meldungen auf der Seite angezeigt werden und dieses sieht echt scheiße aus :)

In einer Produktivumgebunng solltest du aber keine Fehlermeldungen im Browser anzeigen. Das error.log des Webservers ist da der bessere Platz dafür ;)

  
display_errors = Off  
log_errors = On  

in der php.ini

Das sollte passen, ich bin mir aber nicht ganz sicher.

[Yael]

Hallo,

if(isset($seite[4]) && $seite[4] == 's2.html') { ....

>   
> ganz einfach ;)  
  
Danke dir für die Hilfe. Hab es nun so eingebaut  
  
~~~php
  
<?php if($seite[2] == 'profile' && $seite[3] == 's1.html' ):?>  
<progress value="0.20">20%</progress>  
<?php endif;?>  
  
<?php if($seite[2] == 'profile' && isset($seite[4]) && $seite[4] == 's2.html' ):?>  
<progress value="0.40">40%</progress>  
<?php endif;?>  

Was ich nicht ganz verstehe warum steht bei isset zweimal $seite[4]?

In einer Produktivumgebunng solltest du aber keine Fehlermeldungen im Browser anzeigen. Das error.log des Webservers ist da der bessere Platz dafür ;)

display_errors = Off
log_errors = On

>   
> in der php.ini  
  
Auf die php.ini habe ich soweit ich das sehe kein Zugriff. Hab nur ein Webspace und kein Server.

[M.]

Mahlzeit,

Was ich nicht ganz verstehe warum steht bei isset zweimal $seite[4]?

das isset() prüft $seite[4] auf existenz, das Nachfolgende vergleicht $seite[4] mit einem, bestimmten Wert. Bei isset() steht es also nur einmal ;)
Grundsätzlich solltest du jeden Wert auf Existenz prüfen, wenn nicht garantiert ist, dass es ihn gibt.

Auf die php.ini habe ich soweit ich das sehe kein Zugriff. Hab nur ein Webspace und kein Server.

Könnte auch zur Laufzeit klappen, müsstest du nachlesen. In einer Produktivumgebung ist es aber immer schlecht, Fehlermeldungen zu geben, da du damit Hackern Informationen für einen Angriff liefern kannst.

Im schlimmsten Fall das error_reporting komplett abschalten, das hat aber den Nachteil, dass Fehlermeldungen gar nicht mehr angezeigt werden und Fehler daher schwerer zu lokalisieren sind.
Das ist aber nur ne Notlösung, die mir gar nicht gefällt.

Auf einer Entwicklungsumgebung sollte möglichst alles an Fehlern, Warnings, Notices angezeigt werden.

[Auge]

Hallo

<?php if($seite[2] == 'profile' && isset($seite[4]) && $seite[4] == 's2.html' ):?>

>   
> Was ich nicht ganz verstehe warum steht bei isset zweimal `$seite[4]`{:.language-php}?  
  
Wieso? Bei isset steht nur einmal $seite[4]. Vielleicht ist es so lesbarer:  
  
~~~php
if ($seite[2] == 'profile' // steht in $seite[2] 'profile' drin?  
    && isset($seite[4]) // existiert $seite[4] und …  
    && $seite[4] == 's2.html') // … ist der Wert 's2.html'

Mathematisch müsste die Klammerung so aussehen (was bei ausschließlichen UND-Bedingungen egal ist, da alles zutreffen muss):

if ($seite[2] == 'profile' // steht in $seite[2] 'profile' drin?  
    && (isset($seite[4]) // existiert $seite[4] und …  
    && $seite[4] == 's2.html')) // … falls es existiert, ist der Wert 's2.html'

Tschö, Auge

[Yael]

Hallöchen,

wenn es auch nicht wirklich zu diesem Thema passt, aber ich möchte nicht noch ein Beitrag aufmachen. Ist es richtig wie ich mein Button verlinke?

  
<a href="<?php echo "/create/profile/$ID/step8.html"; ?>"><input type="button" value="Kein Bild hochladen"></a>  

[M.]

Mahlzeit,

wenn es auch nicht wirklich zu diesem Thema passt, aber ich möchte nicht noch ein Beitrag aufmachen. Ist es richtig wie ich mein Button verlinke?

<a href="<?php echo "/create/profile/$ID/step8.html"; ?>"><input type="button" value="Kein Bild hochladen"></a>

  
Also mal abgesehen ,dass es seltsam aussieht, IMO hat ein input-Element in einem a-Element nix verloren.  

-- 
42

[Yael]

Hallo,

Also mal abgesehen ,dass es seltsam aussieht, IMO hat ein input-Element in einem a-Element nix verloren.

sonst müsste ich ja ein onclick nehmen. Wenn JS aus ist, geht nichts mehr. Ein <form> kann ich leider nicht nehmen, denn dieses liegt schon um einen anderen Bereich.

[M.]

Mahlzeit,

sonst müsste ich ja ein onclick nehmen. Wenn JS aus ist, geht nichts mehr. Ein <form> kann ich leider nicht nehmen, denn dieses liegt schon um einen anderen Bereich.

Und wieso nimmst du keinen einfachen Link und Stylest ihn per CSS so, dass er wie ein Button aussieht?

[Gunnar Bittersmann]

@@M.:

nuqneH

Und wieso nimmst du keinen einfachen Link und Stylest ihn per CSS so, dass er wie ein Button aussieht?

Oder wieso lässt du den Link nicht wie einen Link aussehen? Es dürfte durchaus sinnvoll sein, den Call-to-action-Button anders (prominenter) aussehen zu lassen als Abbrechen-Links/-Buttons.

Qapla'

[M.]

Mahlzeit,

Oder wieso lässt du den Link nicht wie einen Link aussehen? Es dürfte durchaus sinnvoll sein, den Call-to-action-Button anders (prominenter) aussehen zu lassen als Abbrechen-Links/-Buttons.

Wieso sollte das eine das andere ausschliessen?

Die Schrift sieht wie ein einfacher Link aus und dazu gibt es einen Border und evtl. nen Hintergrund.

Und da der OP ja gezielt gefragt hat, wie er einen Button verlinken kann, hat er wohl kein Interesse an einem einfachen Link.