Schrift nach Klick sichtbar
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anwenden
auslosung
bestimmten bereich
code
dank
element
ergebnis
ersten spalte
http
liga
ordern
programmieren
rand
shuffle
tabelle
trainer
url
verein
versteck
zeile
-
Hallo,
ich möchte eine Auslosung etwas spannender machen und somit, dass die Ergebnisse erst nacheinander zu sehen sind.
Die Auslosung wird mit
shuffle($trainer);
und
shuffle($teams);
durchgeführt und die Ergebnisse werden anschließend in einer Tabelle ausgegeben.
Nun die Frage: Wie kann ich etwas programmieren, bei dem entweder nach einem Klick auf einen Button (z.B. ein Plus) die entsprechende Variable angezeigt wird? Optimaler wäre noch die folgende Lösung: Die Variablen werden nacheinander aufgedeckt, jeweils mit einem Intervall von 10 Sekunden dazwischen. Wie kann ich das programmieren? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Automatisch nacheinander geht mit JQuery, allerdings kann ich dir hierzu keine genaue Beschreibung geben.
Das mit dem Klick auf ein + wäre über CSS realisierbar. (Ginge natürlich auch mit JS/JQuery. ;) -
Danke für den Tipp mit jQuery, habe über google jetzt den folgenden Code gefunden:
// wenn die html-seite fertig ist... $(document).ready(function() { // finde alle tr-elemente (zeilen), ignoriere das erste tr und verstecke alle // die gefundenen tr-elemente werden in einer variable zwischengespeichert var mySections = $("tr").not("tr:first-child").hide(); // durchlaufe jedes einzelne tr-element in der variable mySections.each(function (i) { // verzögere das einblenden jeder einzelnen zeile // this -> aktuelles tr-element beim durchlaufen der variable $(this).delay(i * 200).fadeIn(900); }); });
Quelle: http://marco.seaside-graphics.de/programmierung/jquery/jquery-zeilen-einer-html-tabelle-nacheinander-einblenden
Das gleiche müsste doch eigentlich auch mit "td" gehen, damit dann statt nacheinander die Zeilen einzublenden, die beiden Spalten einer Zeile nacheinander eingeblendet werden. Oder verstehe ich das falsch? -
fifa-society schrieb:
Ja, das würde auch funktionieren... probier es aus, dann weißt du auch ob es das gewünschte Ergebnis erzielt.
Das gleiche müsste doch eigentlich auch mit "td" gehen, damit dann statt nacheinander die Zeilen einzublenden, die beiden Spalten einer Zeile nacheinander eingeblendet werden. Oder verstehe ich das falsch?
Wichtig ist noch, dass dem von dir geposteten Code jeweils das 1. Element in einer Zeile nicht versteckt wird... -
Funktioniert soweit, danke.
Nur ein kleines Problem besteht noch: Kann ich jQuery auch nur auf einen bestimmten Bereich einer Datei anwenden? Momentan wird mein Dropdown-Menü, welches ebenfalls aus einer Tabelle besteht, auch erst nach einer bestimmten Zeit angezeigt. -
fifa-society schrieb:
Ja, das funktioniert auch. Dazu musst du deine Tabelle eindeutig identifizierbar machen (z.b. mit einer id) und dann bei der Auswahl der Zellen den entsprechenden CSS-Selector verwenden (z.b. #deineid td)...
Kann ich jQuery auch nur auf einen bestimmten Bereich einer Datei anwenden? Momentan wird mein Dropdown-Menü, welches ebenfalls aus einer Tabelle besteht, auch erst nach einer bestimmten Zeit angezeigt. -
Danke :-) Funktioniert. Kann ich auch irgendwie anstatt der ersten Spalte direkt die erste Zeile ausgeben lassen?
-
fifa-society schrieb:
Wie meinst du das? Zeilenweise einblenden? Oder wie soll man das verstehen?
Kann ich auch irgendwie anstatt der ersten Spalte direkt die erste Zeile ausgeben lassen? -
Hab's hinbekommen, indem ich einfach die erste Zeile als th definiert hab.
Nur noch ein Problem: Wenn ich das Script starte wird kurz schon die gesamte Tabelle angezeigt, was bei einer Auslosung ziemlich sinnlos ist. -
Das hat damit zu tun, dass das Javascript erst geladen werden muss....Versteck die Tabelle einfach erst mit
display:none
Edit: Alternativ das document ready entfernen
Beitrag zuletzt geändert: 17.9.2012 21:47:39 von imho -
An welcher Stelle müsste ich es einsetzen, damit die Tabelle sobald Javascript geladen hat angezeigt wird?
-
s1m13 schrieb:
Also, da das (Java-)Script idr mit dem html-file zusammen geladen wird, dürfte ungefähr das onload event (im body) genügen. Ich kenne deine Dateistruktur aber nicht.
Das ist die entsprechende Datei:
<html> <head> <script src='/includes/jquery/jquery.js'></script> <script src='/application.js'></script> </head> <body> <center> <?php error_reporting( E_ALL ); require_once "maincore.php"; require_once THEMES."templates/header.php"; openside("Auslosung"); if (!isset($_POST['submit1'])) { ?> <form action="<? echo $_SERVER['PHP_SELF']?>" method="post"> <select name="liga"> <option value="de1">Bundesliga</option> <option value="gb1">Premier League</option> </select> <input type="submit" name="submit1"> </form> <? } elseif (isset($_POST['submit1'])) { $liga = $_POST['liga']; ?> <table id="334" style="width:70%;"> <tr> <th>Trainer</th> <th>Verein</th> </tr> <? $nameQuery = mysql_query("SELECT Name FROM register_".$liga." WHERE Type = 'Mitglied' ORDER BY rand()"); $VereinQuery = mysql_query("SELECT Verein FROM tabelle_".$liga." ORDER BY rand()"); while($row = mysql_fetch_assoc($nameQuery)) { $vereinRow = mysql_fetch_assoc($VereinQuery); ?> <tr> <td><?echo $row['Name'];?></td> <td><?echo $vereinRow['Verein'];?></td> </tr> <? } ?> </table> <? } closeside(); require_once THEMES."templates/footer.php"; ?> </center> </body> </html>
Wo müsste dort jetzt das onload hin?
Beitrag zuletzt geändert: 18.9.2012 18:03:45 von fifa-society -
@daswing
Warum wurde mein post gelöscht? Hab ich was böses geschrieben? Es gibt ja sogar eine Referenz vom Fragesteller!?
Nunja @fifa-society
google ist dein Freund: http://www.google.de/search?hl=de&q=onload%20javascript
Zusammengefasst: onload ist ein JavaScript - Event, dass nur im body-element (und frame) vorkommen darf.
Alles weitere hier: http://www.google.com/search?btnI=I%27m+Feeling+Lucky&ie=UTF-8&oe=UTF-8&q=onload%20javascript
Dabei ist jedoch nötig, dass das Anzeigen per JavaScript und nicht PHP angestoßen wird, da du in den eventlistener eine javascript-methode aufrufen musst.
Näheres kann ich dir jetzt nicht sagen. (Hab mir deinen Code nicht angeschaut
)
-
Alles klar, hat mittlerweile funktioniert, die Auslosung ist auch schon fertig.
Danke für eure Hilfe, das Thema kann dann geschlossen werden. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
