Suche

[Metal-Overdrive]

Hallo Freunde,

ich brauche einmal wieder eure Hilfe. Bin auf den Gedanken gekommen das ein Countdown bei uns im Theme ziemlich gut aussehen könnte. Leider komme ich hier aber gerade nicht wirklich weiter, und da dachte ich das vielleicht jemand von euch den passenden Gedankenblitz hat.

Ich würde diesen Countdown gerne über eine Bilddatei meines Themes legen, nämlich über die Bilddatei header_center_01.jpg. Leider bekomme ich das irgendwie nicht hin. Denke mal das das in der theme.html bewerkstelligt wird.

Hier einmal der Link zu unserem Theme inkl. dem Countdownscript.  http://www.wiesenfete.de/Theme.zip

Würde mich sehr darüber freuen wenn sich das von euch mal jemand anschauen kann. Danke

[JoergK]

Nichts leichter als das. 

1. Die Datei theme.html
Zunächst mußt Du aus dem Bild, welches in der Tabellenzelle (im Vordergrund) angezeigt wird, nen Hintergrundbild in der Zelle machen. In die Zelle kommt dann nen div-Container für die Ausgabe des Countdown sowie der den Counter aufrufende JavaScript-Code rein. Dazu schnappst Du Dir Deine theme.html und machst aus

Code Auswählen Erweitern

<td colspan="3"><img name="header_center_01" src="images/header_center_01.jpg" width="869" height="66" border="0" id="header_center_01" alt="" /></td>
das hier

Code Auswählen Erweitern

<td colspan="3" style="background-image:url(images/header_center_01.jpg);" width="869" height="66">
    <div id="countdowncontainer"></div>
    <script type="text/javascript">
        var futuredate=new cdtime("countdowncontainer", "August 03, 2007 20:00:00")
        futuredate.displaycountdown("days", formatresults)
    </script>
</td>

2. Der JacaScript-Code
Den hauptsächlichen JavaScript-Code aus Deiner Countdownscript.html (Zeile 5 bis inkl. 86) packste inne seperate Datei (countdown.js) und speicherst sie am besten im Verzeichnis /includes/javascript ab.

3. Einbinden der JavaScript-Datei
Jetzt schnappste Dir noch die /includes/my_header.php und fügst am Ende die folgende Zeile an

Code Auswählen Erweitern


echo '<script language="JavaScript" src="includes/javascript/countdown.js" type="text/javascript"></script>';


4. Habe fertig!!
Das wars. 


EDIT: Code in Pkt. 3 korrigiert.

[JoergK]

Ich antworte mal hier im Thread, dann haben alle (die's evtl. interessiert) etwas davon. 

1. Sobald ich diesen Code einfüge

Code Auswählen Erweitern

echo '<script language="JavaScript" src="themes/Wiesenfete2/scripte/countdown/countdown.js" type="text/javascript">';

bekomme ich bei jedem Seitenwechsel folgende Meldung vom IE und auch FF.

overLIB 4.10 or later is required for the HideForm Plugin.

Jau, das war nen Fehler meinerseits
(Hab den Code im vorigen Post korrigiert.)

Der <script>-Tag muss einen "Ende"-Tag haben, sonst geht's quasi in die Hose.
Ergo muss der Code für die my_header.php so lauten:

Code Auswählen Erweitern

echo '<script language="JavaScript" src="themes/Wiesenfete2/scripte/countdown/countdown.js" type="text/javascript"></script>';
Damit funktioniert's ohne Fehlermeldung.

2. Ist kein Fehler, aber eine Frage zum Design.
...
Ich möchte den ausgegebenen Countdown gerne  auf der rechten Seite neben den "Menschen" haben,
und auserdem bekomme ich es gerade nicht hin das der ausgegebene Text "schwarz" ist.

Um den Countdown rechts zu platzieren muss eine zusätzliche Tabelle mit zwei Zellen angelegt werden, in dessen zweiter Zelle dann der div-Container steht.
Mach also in der theme.html aus

Code Auswählen Erweitern

<div id="countdowncontainer"></div>
<script type="text/javascript">
    var futuredate=new cdtime("countdowncontainer", "August 03, 2007 20:00:00")
    futuredate.displaycountdown("days", formatresults)
</script>


das hier

Code Auswählen Erweitern

<table width="100%">
    <tr>
        <td width="50%">&nbsp;</td>
        <td width="50%">
            <div id="countdowncontainer"></div>
            <script type="text/javascript">
                var futuredate=new cdtime("countdowncontainer", "August 03, 2007 20:00:00")
                futuredate.displaycountdown("days", formatresults)
            </script>
        </td>
    </tr>
</table>



Den Text kannste per CSS beliebig einfärben. Sinnvollerweise erweiterste die style.css vom Theme um das

Code Auswählen Erweitern

#countdowncontainer {
    color: #000000;
}


[Metal-Overdrive]

Danke JoergK 

Funktioniert jetzt alles einwandfrei! Genau wegen diesen Hilfen liebe ich PMX und dieses Forum.

Stimmt schon, so haben alle etwas davon. Habe dich auch nur per PN angeschrieben, weil ich die Adresse zu meinem Testserver nicht unbedingt veröffentlichen wollte.

Danke nochmal!