Simple Ajax PHP Countdown Timer

Discussion in 'JavaScript' started by baddot, Feb 16, 2010.

  1. #1
    hi guys im trying to build a auction system where by it will have a count down time and when users bid on the item it will extend for about 15 secs for each bid here are the example of the website that i wana make listed below

    www.crazybid.sg

    the pink color count down timer

    what i have found is http://keith-wood.name/countdown.html

    but how do i make it in ajax way of like httprequest to merge with countdown timer ?

    like when users bids it will add the time to the existing countdown timer and after that the page will not refresh but it will refresh it in the back end?

    Please Advise
    _______________
     
    baddot, Feb 16, 2010 IP
  2. baddot

    baddot Active Member

    Messages:
    309
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #2
    i want the time to adjust immediately when the user submits the bid, then just add 15 seconds to the timer after you successfully send the bid via ajax. can anybody help me ?
     
    baddot, Feb 16, 2010 IP
  3. baddot

    baddot Active Member

    Messages:
    309
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Heres my code i am stucked with the retriving from database and adding a 10 sec time to the current product when a bid is placed

    <?
    define('INCLUDE_CHECK',true);
    require('connect.php');
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="en" />
        <meta name="robots" content="all,follow" />
    
        <meta name="author" lang="en" content="All: Your name [www.url.com]; e-mail: info@url.com" />
        <meta name="copyright" lang="en" content="Webdesign: Nuvio [www.nuvio.cz]; e-mail: ahoj@nuvio.cz" />
    
        <meta name="description" content="..." />
        <meta name="keywords" content="..." />
    
        <link rel="stylesheet" media="screen,projection" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
        <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/main-msie.css" /><![endif]-->
        <link rel="stylesheet" media="screen,projection" type="text/css" href="css/style.css" />
        <link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
    <style type="text/css">
    @import "css/jquery.countdown.css";
    
    #defaultCountdown { width: 180px; height: 45px; }
    #defaultCountdown2 { width: 180px; height: 45px; }
    #defaultCountdown3 { width: 180px; height: 45px; }
    #defaultCountdown4 { width: 180px; height: 45px; }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.countdown.js"></script>
    <script type="text/javascript">
    $(function () {
        var austDay = new Date();
        var austDay2 = new Date();
        var austDay3 = new Date();
        var austDay4 = new Date();
        var austDay5 = new Date();
        var austDay6 = new Date();
        var austDay7 = new Date();
        austDay = new Date(austDay.getFullYear() + 1, 1 - 0, 26);
        austDay2 = new Date(austDay2.getFullYear() + 1, 1 - 0, 20);
        austDay3 = new Date(austDay3.getFullYear() + 1, 1 - 0, 18);
        austDay4 = new Date(austDay4.getFullYear() + 1, 1 - 0, 17);
        austDay5 = new Date(austDay5.getFullYear() + 1, 1 - 0, 15);
        austDay6 = new Date(austDay6.getFullYear() + 1, 1 - 0, 13);
        austDay7 = new Date(austDay7.getFullYear() + 1, 1 - 0, 10);
        $('#defaultCountdown').countdown({until: austDay});
        $('#year').text(austDay.getFullYear());
        $('#year').text(austDay2.getFullYear());
        $('#year').text(austDay3.getFullYear());
        $('#year').text(austDay4.getFullYear());
        $('#year').text(austDay5.getFullYear());
        $('#year').text(austDay6.getFullYear());
        $('#year').text(austDay7.getFullYear());
       
        $('#defaultCountdown2').countdown({until: austDay2});
        $('#defaultCountdown3').countdown({until: austDay3});
        $('#defaultCountdown4').countdown({until: austDay4});
        $('#defaultCountdown5').countdown({until: austDay5});
        $('#defaultCountdown6').countdown({until: austDay6});
        $('#defaultCountdown7').countdown({until: austDay7});
    });
    </script>
        <title>Bid</title>
    </head>
    
    <body>
    
    <div id="main">
    
        <!-- Header -->
        <div id="header">
       
            <p id="logo"><img src="tmp/logo.gif" alt="" /></p>
           
            <div id="slogan">Bid anything with just $0.50 cents</div>
       
        </div> <!-- /header -->
       
        <hr class="noscreen" />
       
        <!-- Navigation -->
        <div id="nav" class="box">
       
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Coming Soon</a></li>
                <li><a href="#">Winners</a></li>
                <li><a href="#">How to Bid</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
           
            <p id="feeds">
                <a href="#" class="ico-rss">Articles</a> &nbsp;&nbsp;&nbsp;
                <a href="#" class="ico-rss">Comments</a>
            </p> <!-- /feeds -->
       
        </div> <!-- /nav -->
       
        <hr class="noscreen" />
       
        <!-- Columns -->
        <div id="cols">
            <div id="cols-in" class="box">
       
                <!-- Content -->
                <div id="content">
    
                    <div class="in">
                        <p id="breadcrumbs">You are here: <a href="#">Homepage</a> <span>/</span> <a href="#">Category</a> <span>/</span> <strong>Page</strong></p>
                    </div>
                   
                    <h2 class="title-01">Latest Bidding</h2>
                   
                    <div class="in">
                   
                        <!-- Topstory -->
                        <div class="box">
                            <div id="topstory-img"><img src="tmp/1.jpg" alt="" width="200" height="150" /></div>
                            <div id="topstory-txt">
                           
                                <h3><a href="#">1 Weekend Night Stay at Hard Rock Hotel (Sentosa Resort World)</a></h3>
                               
                                <p id="topstory-info">Ending: <strong>15. 05. 2008</strong> &nbsp;&nbsp;&nbsp; Latest Bidder <a href="#">EasyBoy</a></p>
                                <? //<a href="#" class="comment"> ?>
                              <p class="nomb">                  
                              <br /><div id="defaultCountdown">--:--:--</div><br /><img src="tmp/bid.png" alt="" /><br /><h4>SGD10.52</h4></p>
                           
                            </div> <!-- /topstory-txt -->
                           
                        </div> <!-- /box -->
    
                        <!-- Older articles -->
                        <h4 class="title-02"><span>Comming Soon...</span></h4>
                       
                        <div class="cols5050 box">
    
                            <!-- Left column -->
                            <div class="col">
    
                                <!-- Article -->
                                <div class="article box">
                                    <div class="article-img"><img src="tmp/85x63.gif" alt="" /></div>
                                    <div class="article-txt">
                                        <h4><a href="#">Apple iPhone 3GS (32GB)</a></h4>
                                        <p><div id="defaultCountdown2">--:--:--</div>Latest Bidder: Andrew93<br /><img src="tmp/bid.png" alt="" /><h4>SGD1.44</h4></p>
                                    </div> <!-- /article-txt -->
                                </div> <!-- /article -->
    
                                <!-- Article -->
                                <div class="article box">
                                    <div class="article-img"><img src="tmp/85x63.gif" alt="" /></div>
                                    <div class="article-txt">
                                        <h4><a href="#">Apple iPhone 3GS (32GB)</a></h4>
                                        <p><div id="defaultCountdown3">--:--:--</div>Latest Bidder: Andrew93<br /><img src="tmp/bid.png" alt="" /><h4>SGD1.34</h4></p>
                                    </div> <!-- /article-txt -->
                                </div> <!-- /article -->
    
                                <!-- Article -->
                                <div class="article box">
                                    <div class="article-img"><img src="tmp/85x63.gif" alt="" /></div>
                                    <div class="article-txt">
                                        <h4><a href="#">Apple iPhone 3GS (32GB)</a></h4>
                                        <p><div id="defaultCountdown4">--:--:--</div>Latest Bidder: Andrew93<br /><img src="tmp/bid.png" alt="" /><h4>SGD3.44</h4></p>
                                    </div> <!-- /article-txt -->
                                </div> <!-- /article -->
    
                            </div> <!-- /col -->
                           
                            <!-- Right column -->
                            <div class="col f-right">
    
                                <!-- Article -->
                                <div class="article box">
                                    <div class="article-img"><img src="tmp/85x63.gif" alt="" /></div>
                                    <div class="article-txt">
                                        <h4><a href="#">Apple iPhone 3GS (32GB)</a></h4>
                                        <p><div id="defaultCountdown5">--:--:--</div><br />Latest Bidder: Andrew93<br /><img src="tmp/bid.png" alt="" /><h4>SGD1.54</h4></p>
                                    </div> <!-- /article-txt -->
                                </div> <!-- /article -->
    
                                <!-- Article -->
                                <div class="article box">
                                    <div class="article-img"><img src="tmp/85x63.gif" alt="" /></div>
                                    <div class="article-txt">
                                        <h4><a href="#">Apple iPhone 3GS (32GB)</a></h4>
                                        <p><div id="defaultCountdown6">--:--:--</div><br />Latest Bidder: Andrew93<br /><img src="tmp/bid.png" alt="" /><h4>SGD1.46</h4></p>
                                    </div> <!-- /article-txt -->
                                </div> <!-- /article -->
    
                                <!-- Article -->
                                <div class="article box">
                                    <div class="article-img"><img src="tmp/85x63.gif" alt="" /></div>
                                    <div class="article-txt">
                                        <h4><a href="#">Apple iPhone 3GS (32GB)</a></h4>
                                        <p><div id="defaultCountdown7">--:--:--</div><br />Latest Bidder: Andrew93<br /><img src="tmp/bid.png" alt="" /><h4>SGD1.94</h4></p>
                                    </div> <!-- /article-txt -->
                                </div> <!-- /article -->
    
                            </div> <!-- /col -->
                       
                        </div> <!-- /cols5050 -->
    
                        <p class="nomb t-right"><a href="#" class="more">More Biddings</a></p>
                   
                    </div> <!-- /in -->
                   
                </div> <!-- /content -->
    
                <hr class="noscreen" />
    
                <!-- Aside -->
                <div id="aside">
                     <h4 class="title-03">Login Now</h4>
                     <div class="in">
                       Username:<br /><input type="text" name="textfield" id="textfield" /><br />
                       Password:<br /><input type="text" name="textfield" id="textfield" /><br />
                       <input type="submit" value="Login Now" />
                     </div>
                <h4 class="title-03">Categories</h4>
                   
                    <div class="in">
                   
                        <ul id="subnav">
                        <?
                        $selectCAT = "select * from easybid_cat";
                        $goCat=mysql_query($selectCAT);
                        while($r=mysql_fetch_array($goCat))
                        {
                            echo '<li><a href="catshow.php?cat='.$r['id'].'">'.$r['catname'].'</a></li>';   
                        }
                       
                        //<li class="active"><a href="#">Lorem ipsum sit amet</a></li>
                        //<li class="last"><a href="#">Lorem ipsum sit amet</a></li>
                        ?>
                        </ul>
    
                    </div> <!-- /in -->
    
                </div> <!-- /aside -->
               
            </div> <!-- /cols-in -->
        </div> <!-- /cols -->
       
        <!-- Photogallery -->
        <div id="gallery">
       
            <h4 class="title-03 gallery"><a href="#">Photogallery</a></h4>
           
            <div id="gallery-in">
    
                <p class="t-center nom box">
                    <a href="#"><img src="tmp/95x71.gif" alt="" /></a>
                    <a href="#"><img src="tmp/95x71.gif" alt="" /></a>
                    <a href="#"><img src="tmp/95x71.gif" alt="" /></a>
                    <a href="#"><img src="tmp/95x71.gif" alt="" /></a>
                    <a href="#"><img src="tmp/95x71.gif" alt="" /></a>
                    <a href="#"><img src="tmp/95x71.gif" alt="" /></a>
                    <a href="#"><img src="tmp/95x71.gif" alt="" /></a>
                    <a href="#" class="last"><img src="tmp/95x71.gif" alt="" /></a>
                </p>
    
                <div class="separator"></div>
    
                <div class="box">
    
                    <p class="f-right nom"><a href="#" class="ico-rss">RSS Feed</a></p>
    
                    <p class="f-left nom">Tags: <a href="#">Cars</a>, <a href="#">Football</a>, <a href="#">Baseball</a>, <a href="#">New York</a>, <a href="#">Weddings</a>, <a href="#">Family</a> &hellip;</p>
                   
                </div> <!-- /box -->
    
            </div> <!-- /gallery-in -->
       
        </div> <!-- /gallery -->
    
        <hr class="noscreen" />
       
        <!-- Footer -->
        <div id="footer" class="box">
       
            <p class="f-right">
                <a href="#" id="ico-print">Print</a>
                <a href="#" id="ico-sitemap">Sitemap</a>
            </p>
           
            <p class="f-left">Copyright &copy; 2008 <a href="#">EasyBid.sg</a></p>
    
        </div> <!-- /box -->
    
    </div> <!-- /main -->
    
    <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->
    <p id="copy"><a href="http://www.nuviotemplates.com/">Free web templates</a> presented by <a href="http://www.qartin.cz/">QARTIN</a> &ndash; Our tip: <a href="http://www.thinline.cz/">Webdesign</a>, <a href="http://www.cesky-hosting.cz/">Webhosting</a></p>
    <!-- Do you want remove this backlinks? Look at www.nuviotemplates.com/payment.php -->
    
    </body>
    </html>
    
    PHP:
     
    baddot, Feb 17, 2010 IP