baddot
February 16, 2010, 9:11pm
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
You want to repeatedly poll the server for expiration times of all the auctions currently listed on the users screen. The countdown timers on the screen should then be adjusted by the new values returned by the server.
If that user bids on an auction, the next time the poll occurs then the countdown will reflect the new remaining time. If you 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.
baddot
February 17, 2010, 3:08am
3
yes correct how do i make that ?
Your asking for help with something fairly complicated. You need to be a bit more specific about what kind of answer you need. “how do i build it” doesn’t let anyone know what you specifically need help with, or what/how much help you need. This is a sign that this might be a bit too ambitious of a project for you right now.
baddot
February 17, 2010, 1:04pm
5
ok what i have for the code which is the jquery countdown timer.
I wana make it Extends for the timer for example timer is 30 secs when i click on bid it will extend for another 10 secs into the database and it will update the existing countdown timer to 45 secs automatically
baddot
February 17, 2010, 1:06pm
6
lets say the code is from here
You can start by either writing, or finding some code that allows you to either adjust the remaining time, or allows you to remove the timer(so you can create a new timer with the new updated end time).
Then you can use a button to trigger the timer update process. If you plan to have multiple timers per page, make sure that your code is capable of managing each timer individually.
Don’t worry about ajax or anything right now. This is a small step in the process and a decent place to start.
baddot
February 17, 2010, 9:32pm
8
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>
<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> 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> …</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 © 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> – 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>