Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Thema gestartet von: Illori in November 03, 2013, 06:15:44 VORMITTAG

Titel: jquery countdown
Beitrag von: Illori in November 03, 2013, 06:15:44 VORMITTAG
Download the files from http://keith-wood.name/countdown.html

put the css in your default themes css folder put the js file in your default themes scripts folder

the following edits are in the themes index.template.php file

Code (find) Auswählen
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

Code (replace) Auswählen
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/jquery.countdown.css" /> ';


Code (find) Auswählen
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?fin20"></script>

Code (add after) Auswählen
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"  src="', $settings['default_theme_url'], '/scripts/jquery.countdown.js"></script>


Code (find) Auswählen
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
// ]]></script>


Code (add after) Auswählen
  <script type="text/javascript">
        $(function() {
            var chrisDay = new Date();
chrisDay = new Date(2013, 12 - 1, 25);
            $(\'#CountDown\').countdown({
until: chrisDay,
description: \'Until Christmas\',
expiryText: \'It is Christmas\',
});
        });
    </script>';


now in your board description add <div id="CountDown">

    </div>


the div to display the countdown time can be put in any location, not just in a board description.

If you are using mods that already load jquery you can leave out this<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Titel: Re: jquery countdown
Beitrag von: Shambles in November 03, 2013, 01:06:57 NACHMITTAGS
Nice and tidy. Thanks.

Might be worth mentioning that the file that needs editing is index.template.php in the theme folder.
Titel: Re: jquery countdown
Beitrag von: Illori in November 03, 2013, 01:18:26 NACHMITTAGS
Zitat von: Shambles in November 03, 2013, 01:06:57 NACHMITTAGS
Nice and tidy. Thanks.

Might be worth mentioning that the file that needs editing is index.template.php in the theme folder.

done