kostenloser Webspace werbefrei: lima-city

Eine Art Fortschrittsanzeige wegen Wartungsarbeiten

lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess

1. Autor dieses Themas

   s******2

   22:44, 23.3.2013

   Sers Leute,
   ich werde demnächst einen neuen Style für mein Forum reinhauen, sowie weitere Verbesserungsvorschläge umsetzen.
   Kann ich irgendwie eine Art Fortschrittsanzeige installieren, in der steht:
   
   PS-Zone befindet sich momentan noch im Wartungsmodus, inzwischen sind wir aber bei
   
   (Hier soll dann der Balken sein, in dem die Prozentzahl steht, also z.B.) 50% Fortschritt.
   
   naja richtig cool wäre noch wenn man dem Balken eine Zeit zuordnet... und sich der dann entsprechend füllt...
   
   meinet wegen ich gehe 11 Uhr in Wartungsmodus und sage 13 Uhr ist das Forum wieder da und jetzt haben wir es 12 Uhr das der Balken dann auf 50% steht... das würde richtige cool sein...
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

3. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   23:26, 23.3.2013

   Das kannst du mit CSS und zwei ineinander liegenden DIVs erreichen.
   
   Überleg dir aber gut, ob so eine Fortschrittsanzeige bei Wartungsarbeiten wirklich so gut ist…
   
   Beitrag zuletzt geändert: 23.3.2013 23:27:11 von hackyourlife

4. artelier

   

   artelier hat kostenlosen Webspace.

   23:59, 23.3.2013

   Irgendein Script kann das bestimmt (Java) ;)
   
   Jedoch halte ich das nicht für sinnvoll da du dann auch garantieren musst bis dahin fertig zu sein... (aber ja es würde zwar cool aussehen), mir geht es immer so, dass ich nie pünktlich fertig werde :D
   Wie wäre wenn du einfach ein Gif von einem drehendem Kreis nimmst (wie bei Youtube Videos) nimmst.... würde gut aussehen und es wäre keine Anzeige, an die du dich halten musst... der Spruch "Bitte entschuldigen sie uns, wir führen Wartungsarbeiten durch. Wir sind gleich wieder erreichbar." reicht doch auch ;)

5. instantlima

   instantlima hat kostenlosen Webspace.

   8:37, 24.3.2013

   Guck mal hier hin: http://jqueryui.com/progressbar/
   
   Du brauchst im Grunde nur einen Div und darin noch einen Div für den Fortschritt:
   
   

   <div class="progressbar_main">
         <div class="progressbar"></div>
   </div

6. g****e

   10:51, 24.3.2013

   Dafür brauchst du kein jQuery... Das geht mit normalem CSS wie hackyourlife schon gesagt hat:
   

   <style>
    #outer {
     height: 30px;
     width: 100px;
     border: 1px solid black;
    }
    #inner {
     height: 100%;
     width: 50%; /* prozentzahl, wie weit du bist */
     background-color: blue;
    }
   </style>
   <div id="outer"> <div id="inner"></div> </div>

   
   Das ist eine komplette Progressbar. Da wo ich das kommentar gesetzt habe, setzt du ein wie weit du bist, und die Progressbar ist entsprechend gefüllt. Wenn du nen Muster haben willst als Bar, dann setzt du statt einer Hintergrundfarbe einfach ein Hintergrundbild, dass sich entweder wiederholt, oder größer ist, oder wie auch immer. Da brauchst du keine schwere Bibiliotek für so eine Kleinigkeit.
   
   Liebe Grüße

7. webfav

   webfav hat kostenlosen Webspace.

   12:24, 24.3.2013

   oder CSS direkt im HTML-Code definieren
   
   evtl musst Du ein geschütztes Leerzeichen

    

   in das DIV "inner" machen,
   damit die Balken-Ausgabe auch kommt, manche Browser zeigen leere DIVs einfach nicht
   
   

   // ------------------------------------------ 
   
   $fortschritt = 49;    // --- (int) --- Fortschritt in % Prozent --- 
   
   print "<div id=\"info\" style=\"text-align:center;\">\n"; 
   print " <h2>Fortschritt Status: <span style=\"color:green;\">".$fortschritt."%</span></h2>\n"; 
   print " <div id=\"outer\" style=\"margin:0 auto; height:20px; width:300px; background-color:lightgrey; border:1px solid black; text-align:left;\">\n"; 
   print "   <div id=\"inner\" style=\"height:100%; width:".$fortschritt."%; background-color:green;\">&nbsp;</div>\n"; 
   print " </div>\n"; 
   print " <p>Datum: ".date('d.m.Y')." &nbsp;&nbsp;&nbsp; Zeit: ".date('H:i:s')."</p>\n"; 
   print "</div>\n"; 
   
   // ------------------------------------------

   
   
   ... so wird die Ausgabe durch einfache Änderung der Zahl (Wert von $fortschritt) angepasst.
   
   wenn mit CSS-Datei / Definition, dann kann man diese ja auch "dynamisch" erstellen,
   um den CSS-Wert für die Balken-Breite in % je Fortschritt Status anzupassen.
   
   
   

   <html>
   <head>
   <title>Fortschritt</title>
   
   <?php 
   // ------------------------------------------ 
   $fortschritt = 49; 
   // ------------------------------------------ 
   ?>
   
   <style type="text/css">
    #info { 
     text-align:center;
    }
   
    #outer {
     margin:0 auto; 
     height:20px; 
     width:300px; 
     background-color:lightgrey; 
     border:1px solid black; 
     text-align:left;
    }
   
    #inner {
     height:100%; 
     width:<?php echo $fortschritt; ?>%; 
     background-color:green;
    }
   </style>
   
   </head>
   
   <body bgcolor="#FFFFFF" text="#000000">
   
   <div id="info">
     <h2>Fortschritt Status: <span style="color:green;"><?php echo $fortschritt; ?>%</span></h2>
     <div id="outer"">
       <div id="inner"">&nbsp;</div>
     </div>
     <p>Datum: <?php echo date('d.m.Y'); ?> &nbsp;&nbsp;&nbsp; Zeit: <?php echo date('H:i:s'); ?></p>
   </div>
   
   </body>
   </html>

   
   
   
   also siehe .... <?php echo $fortschritt; ?>%;
   oder halt den kompletten CODE per PHP (print / echo) ausgeben.
   
   
   
   Beitrag zuletzt geändert: 24.3.2013 12:43:02 von webfav

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?