...

View Full Version : loops for countdown timers



jlodwick
05-24-2012, 06:04 AM
I have 2 countdown scripts for a shopping cart webpage. The first script is a countdown timer that removes the "add to cart" button when the countdown timer reaches 0 (font is white on my production page so it doesn't show up). The second script is a fancy flash countdown timer. I need to setup a loop for these countdown timers so they show up on every product on the page. Every product is going to have the same countdown time. Below are the scripts. I have a test page here: http://www.spaenvydeals.com/testing-timer-loop.html and the here's one of my production pages using separate manual timers: http://www.spaenvydeals.com/Deals/fd-denver-co.html Please let me know if you have any questions.

first script:

#timer
{
color: red;
font-size:11px;
font-style:italic;
}
<script type="text/javascript">

//######################################################################################
// Author: ricocheting.com
// Version: v2.0
// Date: 2011-03-31
// Description: displays the amount of time until the "dateFuture" entered below.

// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
// format: dateFuture1 = new Date(year,month-1,day,hour,min,sec)
// example: dateFuture1 = new Date(2012,4,24,23,59,59) = April 26, 2003 - 2:15:00 pm

dateFuture1 = new Date(2012,4,24,23,59,59);


// TESTING: comment out the line below to print out the "dateFuture" for testing purposes
//document.write(dateFuture +"<br />");


//###################################
//nothing beyond this point
//first product

function GetCount(ddate,iid){

dateNow = new Date(); //grab current date
amount = ddate.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;

// if time is already past
if(amount < 0) {
document.getElementById(iid).innerHTML="Sorry this deal is expired";
var input = document.getElementById('link1');
var input2 = document.createElement('input');
with (input2){
type = 'hidden';
}
input.parentNode.replaceChild(input2,input);
}
// else date is still good
else{
days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

days=Math.floor(amount/86400);//days
amount=amount%86400;

hours=Math.floor(amount/3600);//hours
amount=amount%3600;

mins=Math.floor(amount/60);//minutes
amount=amount%60;

secs=Math.floor(amount);//seconds

if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
out += mins +" "+((mins==1)?"min":"mins")+", ";
out += secs +" "+((secs==1)?"sec":"secs")+", ";
out = out.substr(0,out.length-2);
document.getElementById(iid).innerHTML=out;

setTimeout(function(){GetCount(ddate,iid)}, 1000);
}
}



window.onload=function(){
GetCount(dateFuture1, 'countbox1');


//you can add additional countdowns here (just make sure you create dateFuture2 and countbox2 etc for each)
}

</script>

//applying the countdown timer:

<div id='timer'>
<div id="countbox1"></div>

</div>

//id of "link1" below is referenced in the javascript and changes the type to hidden if amount variable (countdown timer) is less than 0.

<input class="add" id="link1" type="image" src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/buttons/defaults/Add_To_Cart.gif">


second script flash countdown timer:

<script type="text/javascript" src="http://www.spaenvydeals.com/Deals/swfobject.js"></script>
<script type="text/javascript">

var flashvars = {
config_file: "http://www.spaenvydeals.com/Deals/fd-denver-co-date-changer.xml?nocache=010920091407"
};

var params = {
bgcolor: "FFFFFF",
menu: "false",
quality: "high",
scale: "scale"
};

var attributes = {
id: "swf_content",
name: "swf_content"
};

swfobject.embedSWF("http://www.spaenvydeals.com/Deals/countdown_flip_1days.swf", "flashcontent", "388", "74", "8.0.0", false, flashvars, params, attributes);

</script>

//below is how I apply this timer

<!--**********-->
<div id="flashcontent">
<div id="altcontent">
<h3>Wrong version or no version of Flash detected</h3>
<p>You might also have <strong>JavaScript</strong> disabled. If so, please
enable scripting in your browser's preferences or internet options or download
the latest <a href="http://www.microsoft.com/windows/internet-explorer/download-ie.aspx">Internet Explorer</a> or <a href="http://www.mozilla.com/firefox/">Firefox</a> browser.</p>

<p>If you'd like to download the latest <strong>Flash</strong> plug-in, <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">click
here</a>.</p>
</div>
</div>
<!--**********-->

EpicWebDesign
05-25-2012, 04:04 PM
Just out of curiosity, if every product has the exact same expiration time, why not just put a single countdown timer at the top of the page which states something like, "All deals on this page will expire in: *count down appears here*"??

Then instead of referencing each button by it's id, you could simply reference the button class and all of them would disappear once the countdown reaches 0.

jlodwick
05-25-2012, 09:11 PM
I was thinking about doing that. Could you help me understand how the "button class" works?

jlodwick
05-25-2012, 09:15 PM
Do I change the following for what you're saying?

if(amount < 0) {
document.getElementById(iid).innerHTML="Sorry this deal is expired";
var input = document.getElementByTag('add');
var input2 = document.createElement('input');
with (input2){
type = 'hidden';
}

EpicWebDesign
05-25-2012, 11:16 PM
Sorry for the long delay on my response, but as I looked through the source code of your page, I found so many errors that it took me awhile to try to figure out what was going on. (You had 2 sets of head tags, 2 or 3 body tags, 2 styles, etc.) I hope I was able to correct most of them for you. I left in all of the comment tags in case you were using them as reference.

Here's the complete code for the new page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="ShopSite Pro 11 sp1 r2.1 (data - fd-denver-co)">
<title>Spa Envy Deals.com</title>
<meta name="description" content="spa, massage, chiropractor, laser treatment, wrinkles" />
<meta name="keywords" content="spa, massage, chiropractor, laser treatment, wrinkles" />

<link rel="index" href="./" title="Home" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="http://www.spaenvydeals.com/Deals/css/main1.css" />

<link rel="stylesheet" media="print" type="text/css" href="http://www.spaenvydeals.com/Deals/css/print.css" />
<link rel="stylesheet" media="aural" type="text/css" href="http://www.spaenvydeals.com/Deals/css/aural.css" />

<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: none;

}
body, tr, td, div {


text-align: left;
}
td.gcs_table_content a, td.gcs_table_content span {
display: block;
}
img.fb_share, img.twtr_share {
padding: 6px 0px;
float: right;
border: 0px;
}
img.fb_follow, img.twtr_follow {
padding: 6px;
float: left;
border: 0px;
}
#plusone {
display: block;
float: right;
clear: none;
padding: 6px;
margin: 0px;
}
#ss_mb {
margin: 0px auto;
text-align: center;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckertreemenu {
background-color: #FFFFCC;
width: 100%;
height: 30px;
clear: both;
padding: 0px;
margin: 0px;
}
.suckertreemenu ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
}
.suckertreemenu ul li a{
display: block;
width: 100px;
padding: 0px 8px;
border-right: 1px solid #0000FF;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 30px;
font-weight: bold;
white-space: nowrap;
}
.suckertreemenu ul li ul{
left: 0px;
position: absolute;
top: 1em;
display: block;
visibility: hidden;
}
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
.suckertreemenu ul li ul li ul{
left: 159px;
top: 0px;
}
.suckertreemenu ul li ul li a{
display: block;
width: 160px;
text-decoration: none;
padding: 1px 5px;
border-left: 1px solid #0000FF;
border-bottom: 1px solid #0000FF;
background-color: #FFFFCC;
}
.suckertreemenu ul li a:hover{
color: #FF0000;
}
* html p#iepara{
padding-top: 1em;
}
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }

#horizontal
{
margin: 0;
width: 100%;
padding: 10px 0px 0px 0px;
list-style-type: none;
text-align: left;
}
#horizontal ul
{
text-align:left;
}
#horizontal li
{
margin: .2em 0;
display: inline;
padding: 2px
}
#horizontal ul a
{
display:block;
width:117px;
}
#horizontal a:link,#horizontal a:visited
{
display: block; /* for Mozilla based browsers */
display: inline-block;
padding: 6px 10px 6px 10px;
border: 1px solid #666;
text-decoration: none;
color: #FFFFFF;
font-weight:bold;
background-color:#98bf21;
text-transform:uppercase;
text-align:center;

}
#horizontal a:hover,#horizontal a:active
{
background-color:#7A991A;
text-decoration: none;
}
#timer
{
color: red;
font-size:11px;
font-style:italic;
}
#bigredfont {
font-size:20px;
line-height: 25px;
color: red;
}

-->
</style>


<!--[if lte IE 8]>
<style type="text/css">
html .suckertreemenu ul li { float: left; height: 100%;}
html .suckertreemenu ul li a { height: 100%;}
html .suckertreemenu ul li ul li { float: left;}
</style>
<![endif]-->


<script type="text/javascript">

//######################################################################################
// Author: ricocheting.com
// Version: v2.0
// Date: 2011-03-31
// Description: displays the amount of time until the "dateFuture" entered below.

// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
// format: dateFuture1 = new Date(year,month-1,day,hour,min,sec)
// example: dateFuture1 = new Date(2012,4,24,23,59,59) = April 26, 2003 - 2:15:00 pm

dateFuture1 = new Date(2012,4,24,23,59,59);
dateFuture2 = new Date(2012,4,24,23,59,59);

// TESTING: comment out the line below to print out the "dateFuture" for testing purposes
//document.write(dateFuture1 +"<br />");


//###################################
//nothing beyond this point
//first product

function GetCount(ddate,iid){

dateNow = new Date(); //grab current date
amount = ddate.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;

// if time is already past
if(amount < 0) {

document.getElementById(iid).innerHTML="Sorry this deal is expired";
for(var i=0;i<document.getElementsByTagName('*').length;i++){
if(document.getElementsByTagName('*')[i].className == 'add') {
if(document.getElementsByTagName('*')[i].style.display == 'block'){
document.getElementsByTagName('*')[i].style.display = 'none';
}

}

}
}


// else date is still good
else{
document.getElementsByTagName('*')[i].style.display = 'block';
days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

days=Math.floor(amount/86400);//days
amount=amount%86400;

hours=Math.floor(amount/3600);//hours
amount=amount%3600;

mins=Math.floor(amount/60);//minutes
amount=amount%60;

secs=Math.floor(amount);//seconds

if(days != 0){out += days +" "+((days==1)?"day":"days")+", ";}
if(hours != 0){out += hours +" "+((hours==1)?"hour":"hours")+", ";}
out += mins +" "+((mins==1)?"min":"mins")+", ";
out += secs +" "+((secs==1)?"sec":"secs")+", ";
out = out.substr(0,out.length-2);
document.getElementById(iid).innerHTML=out;

setTimeout(function(){GetCount(ddate,iid)}, 1000);

}

}

window.onload=function(){
GetCount(dateFuture1, 'countbox1');
GetCount(dateFuture2, 'countbox2');
}

</script>
<script type="text/javascript" src="http://www.spaenvydeals.com/Deals/swfobject.js"></script>
<script type="text/javascript">

var flashvars = {
config_file: "http://www.spaenvydeals.com/Deals/fd-denver-co-date-changer.xml?nocache=010920091407"
};

var params = {
bgcolor: "FFFFFF",
menu: "false",
quality: "high",
scale: "scale"
};

var attributes = {
id: "swf_content",
name: "swf_content"
};

swfobject.embedSWF("http://www.spaenvydeals.com/Deals/countdown_flip_1days.swf", "flashcontent", "388", "74", "8.0.0", false, flashvars, params, attributes);

</script>

</head>

<body id="www-url-cz"><script type="text/javascript" src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/javascript/iframe_popout.js"></script>


<!-- Main -->
<div id="main" class="box">

<!-- Header -->
<div id="header">

<!-- Logotyp -->
<h1 id="logo"><img src="http://www.spaenvydeals.com/design/logo.png" alt="Logo" width="313" height="83" border="0"></h1>

<hr class="noscreen" />


<!-- Search -->

<div id="search" class="noprint">
<a href="http://www.spaenvydeals.com/Deals/refer-friends.html"><img src="http://www.spaenvydeals.com/Deals/design/refer_friends_sed.png"></a>
<a href="http://www.spaenvydeals.com/Deals/sc/order.cgi?storeid=*1863808dcd3e8449e274a9475112&cert=gift"><img

src="http://www.spaenvydeals.com/design/buy_sed_bucks.png"></a>
</div> <!-- /search -->
<div id="account" class="noprint">

<b><a href="http://www.spaenvydeals.com/Deals/sc/order.cgi?func=3&amp;storeid=*1408ee3c3a3e519709442d31&amp;html_reg=html">Your Account</a></b><br clear="all">

</div>
</div> <!-- /header -->
<!-- Main menu (tabs) -->
<div id="tabs" class="noprint">
<h3 class="noscreen">Navigation</h3>
<ul class="box">
<li><a href="http://www.spaenvydeals.com/Deals/index.html">Home<span class="tab-l"></span><span class="tab-r"></span></a></li>
<li><a href="http://www.spaenvydeals.com/Deals/subscribe.php">Subscribe<span class="tab-l"></span><span class="tab-r"></span></a></li>
<li><a href="http://www.spaenvydeals.com/Deals/businesses.php">Businesses<span class="tab-l"></span><span class="tab-r"></span></a></li>
<li><a href="http://www.spaenvydeals.com/Deals/about_us.html">About Us<span class="tab-l"></span><span class="tab-r"></span></a></li>
</ul>

<hr class="noscreen" />

</div> <!-- /tabs -->

<!-- Page (2 columns) -->
<div id="page" class="box">
<div id="page-in" class="box">

<div id="strip" class="box noprint">

<!-- RSS feeds -->
<p id="rss">

<a href="http://www.facebook.com/pages/Spa-Envy-Dealscom/243310079094856" target="_blank"><img src="http://www.spaenvydeals.com/Deals/design/facebook-logo-50x50.png" alt="Facebook

logo" width="50" height="50" border="0"></a>

<a href="https://twitter.com/spaenvydeals" target="_blank"><img src="http://www.spaenvydeals.com/Deals/design/twitter-logo_50x50.png" alt="Twitter logo" width="50" height="50" border="0"></a>
<a href="http://spa-envy.blogspot.com" target="_blank"><img src="http://www.spaenvydeals.com/Deals/design/blog.png" alt="Blog logo" width="50" height="50" border="0"></a>
</p>
<hr class="noscreen" />

<!-- Breadcrumbs -->

<p id="breadcrumbs"><ul id="horizontal">
<li><a href="http://www.spaenvydeals.com/Deals/td-denver-co.html">Today's Deal</a></li>
<li><a href="http://www.spaenvydeals.com/Deals/fd-denver-co.html">Featured Deals</a></li>

<li><a href="http://www.spaenvydeals.com/Deals/des-denver-co.html">Deals Expiring Soon</a></li>
<li><a href="http://www.spaenvydeals.com/Deals/special-deals.html">Special Deals</a></li>
</ul>
</p>
<hr class="noscreen" />


</div> <!-- /strip -->


<!-- Content -->

<div id="content">


<!-- Article -->
<div class="article">


<h2><span><u> Featured Deals Denver, CO </u></span></h2>
<center>
All deals expire in:<BR />
<div id="flashcontent">
<div id="altcontent">
<h3>Wrong version or no version of Flash detected</h3>
<p>You might also have <strong>JavaScript</strong> disabled. If so, please
enable scripting in your browser's preferences or internet options or download
the latest <a href="http://www.microsoft.com/windows/internet-explorer/download-ie.aspx">Internet Explorer</a> or <a href="http://www.mozilla.com/firefox/">Firefox</a> browser.</p>

<p>If you'd like to download the latest <strong>Flash</strong> plug-in, <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">click

here</a>.</p>
</div>
</div>
</center>

<tr><!-- Start of ROW -->

<!-- rec 21 -->
<a name="21"></a>




<table>
<td><div style="text-align: left; float: left;"><img src="http://www.spaenvydeals.com/Deals/media/botox.jpg" alt="botox.jpg" width="120" height="91"></div>


<b> <span class="product_name">$175 for 20 units of BOTOX and $100 off Juvederm at New Face & Figures Aesthetics Group</span>

</b> <br> <br>$175 for 20 Units of BOTOX and $100 1st Syringe of Juvederm.

<br><br>
Each Purchase gives you Exclusive discounts available on additional BOTOX,Juvederm products purchased at the time of FREE Consultation.
<br>
<br>
<br>
<br>
Available at:
<br><br>
<img src="http://www.spaenvydeals.com/Deals/media/new-face-figures-logo-sidebar1.png">

<br>
<br>
<b>New Face & Figures Aesthetics Group</b>

<br>
Lakewood-Littleton
and
Cherry Creek

<br>
<br>
<b><a href="http://www.newfaceandfigures.com" target="_blank">Company Website</a></b>
<br>
<br>
<b>We can be reached at:</b>
<br>
<b>(720)398-6141</b>
<br>
<b><a href="http://www.newfaceandfigures.com/Contact-Us.html" target="_blank">Contact Us</a></b>

<br>
<br>

<b>Deal Details</b>
<br>
Limit 1 per customer, may purchase up to 4 additional as gifts.
May not be combined with any other offers or coupons.
Coupon expires 6 months from date of purchase.
Instant Coupon: You will receive your coupon for your purchase
at the bottom of your receipt upon checkout.
<br>
<br>
<form action="http://www.spaenvydeals.com/Deals/sc/order.cgi" method="post">
Price: <b>$175.00</b> <br>
<br>
<div id='timer'><div id="countbox1"></div></div>
<input class="add" id="link1" style="display:block" type="image" src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/buttons/defaults/Add_To_Cart.gif">
<input type="hidden" name="storeid" value="*1cb0bde481339c41904d57aaec69428d">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">
<input type="hidden" name="itemnum" value="21">
<a class="viewcart-img" href="http://www.spaenvydeals.com/Deals/sc/order.cgi?storeid=*1cb0bde481339c41904d57aaec69428d&amp;function=show"><img

src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/buttons/defaults/View_Cart.gif"></a>




</form>
</td>
</table>

<table>
<td><div style="text-align: left; float: left;"><img src="http://www.spaenvydeals.com/Deals/media/botox.jpg" alt="botox.jpg" width="120" height="91"></div>


<b> <span class="product_name">$175 for 20 units of BOTOX and $100 off Juvederm at New Face & Figures Aesthetics Group</span>
</b> <br> <br>$175 for 20 Units of BOTOX and $100 1st Syringe of Juvederm.

<br><br>
Each Purchase gives you Exclusive discounts available on additional BOTOX,Juvederm products purchased at the time of FREE Consultation.
<br>
<br>
<br>

<br>
Available at:
<br><br>
<img src="http://www.spaenvydeals.com/Deals/media/new-face-figures-logo-sidebar1.png">

<br>
<br>
<b>New Face & Figures Aesthetics Group</b>
<br>
Lakewood-Littleton
and
Cherry Creek

<br>
<br>
<b><a href="http://www.newfaceandfigures.com" target="_blank">Company Website</a></b>
<br>

<br>
<b>We can be reached at:</b>
<br>
<b>(720)398-6141</b>
<br>
<b><a href="http://www.newfaceandfigures.com/Contact-Us.html" target="_blank">Contact Us</a></b>

<br>
<br>

<b>Deal Details</b>
<br>
Limit 1 per customer, may purchase up to 4 additional as gifts.
May not be combined with any other offers or coupons.
Coupon expires 6 months from date of purchase.
Instant Coupon: You will receive your coupon for your purchase
at the bottom of your receipt upon checkout.

<br>
<br>
<form action="http://www.spaenvydeals.com/Deals/sc/order.cgi" method="post">
Price: <b>$175.00</b> <br>
<br>
<div id='timer'><div id="countbox2"></div></div>
<input class="add" id="link2" style="display:block" type="image" src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/buttons/defaults/Add_To_Cart.gif">
<input type="hidden" name="storeid" value="*1cb0bde481339c41904d57aaec69428d">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">
<input type="hidden" name="itemnum" value="21">
<a class="viewcart-img" href="http://www.spaenvydeals.com/Deals/sc/order.cgi?storeid=*1cb0bde481339c41904d57aaec69428d&amp;function=show"><img

src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/buttons/defaults/View_Cart.gif"></a>




</form>
</td>
</table>

</tr><!-- Last One -->

</center>
<table>
<td>
<a href="http://www.aspiringlaser.com" target="_blank"><img src="http://www.spaenvydeals.com/Deals/media/aspiring-laser-logo.jpg" border="0"></a>
<br><br>
<a href="http://www.aspiringlaser.com" target="_blank">Company Website</a>

<br><br>

<b>Aspiring Laser Renewal</b>
<br><br>
<b>"Beauty from the inside out"</b>
<br><br>
<img src="http://www.spaenvydeals.com/Deals/media/sexy-legs.jpg">
<br><br>
Aspiring Laser Renewal provides an array of skin care
treatment services like Fractional CO2 laser therapy
Intense Pulsed Light (IPL),Thermo-Lo, tattoo and hair
removal to customers in Denver and the surrounding areas
<br><br>
Lonnie Beard, CLS-Owner/Founder Her 7 years experience
in the Health Care Industry helped educate and expose
her to the various needs of individuals. With this
knowledge she is able to listen to your personal skin
renewal goals and help you set up a program to put
you on track to achieving them.
<br><br>
Lonnie, enjoys helping people de-stress, taking care
of their skin and body.
<br><br>
Aspiring Laser Renewal skin care services are available
to both men and women!<br>

<br>

<b>We are conveniently located at:</b>
<br>
<b>Lakewood:</b>
<br>
<b>2750 S Wadsworth Blvd, Suite C-201
<br>
Lakewood, CO 80227</b>
<br><br>
<b>We can be reached at:</b>
<br>
<b>(303-989-1521)</b>

<br>

<b><a href="http://www.aspiringlaser.com/Contact-Us.html" target="_blank">Contact Us</a></b>
</td>
</table>
</div> <!-- /article -->

</div> <!-- /content -->

</div> <!-- /page-in -->
</div> <!-- /page -->

<!-- Footer -->
<div id="footer">
<hr class="noscreen" />

<p id="createdby">created by <a href="http://www.nuvio.cz" target="_blank">Nuvio | Webdesign</a><br>customized by <a href="mailto:j_lodwick@hotmail.com">Jeff Lodwick</a> <!-- DONīT

REMOVE, PLEASE! --></p>
<p id="copyright"><a href="http://www.spaenvydeals.com/Deals/privacy_policy.html" target="_blank">Privacy Policy</a>&nbsp&nbsp&nbsp<a

href="http://www.spaenvydeals.com/Deals/refund_policy.html" target="_blank">Refund Policy</a></p>

</div> <!-- /footer -->

</div> <!-- /main -->

<p><center><a href="http://www.spaenvydeals.com/Deals/sc/image.cgi?key=security_redirect&amp;storeid=*1cb0bde481339c41904d57aaec69428d&amp;lang=en-US" target="_blank"><img

src="http://www.spaenvydeals.com/Deals/sc/image.cgi?security=yes&amp;storeid=*1cb0bde481339c41904d57aaec69428d&amp;r1=177365648&amp;r2=1593828541"

border="0"></a></center></p>
</body>
</html>



See my next post for an explanation (it wouldn't let me put it all in a single post)

EpicWebDesign
05-25-2012, 11:16 PM
The major changes I made (besides getting rid of duplicate tags and errors) were as follows:

Because you have 2 products on the page, in the upper part of the script, I added another "Future Date" (which you will need to do for each product -- just increment the name by 1 each time but leave the actual date the same if you still want all products to expire at the same time).

dateFuture1 = new Date(2012,4,24,23,59,59);
dateFuture2 = new Date(2012,4,24,23,59,59);


Next, I changed this part of the script (which searched by ID)

// if time is already past
if(amount < 0) {
document.getElementById(iid).innerHTML="Sorry this deal is expired";
var input = document.getElementById('link1');
var input2 = document.createElement('input');
with (input2){
type = 'hidden';
}
input.parentNode.replaceChild(input2,input);
}
and replaced it with this (which searches the buttons by Class)


if(amount < 0) {
document.getElementById(iid).innerHTML="Sorry this deal is expired";
for(var i=0;i<document.getElementsByTagName('*').length;i++){
if(document.getElementsByTagName('*')[i].className == 'add') {
if(document.getElementsByTagName('*')[i].style.display == 'block'){
document.getElementsByTagName('*')[i].style.display = 'none';
}
}
}
}

Then, at the bottom of the script, I added the 2nd counter:


window.onload=function(){
GetCount(dateFuture1, 'countbox1');
GetCount(dateFuture2, 'countbox2');
}

Within the body of the actual page, I inserted the Flash Countdown at the top (of course you will need to synch the date/time with the same date/time used with the timer script for it to be accurate). I just left it as-is for now.

Finally, I assigned each "Add to Cart" button a class and style and placed the timer appropriately. Item 1:

<div id='timer'><div id="countbox1"></div></div>
<input class="add" id="link1" style="display:block" type="image" src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/buttons/defaults/Add_To_Cart.gif">
Item 2:

<div id='timer'><div id="countbox2"></div></div>
<input class="add" id="link2" style="display:block" type="image" src="http://www.spaenvydeals.com/Deals/shopsite-images/en-US/buttons/defaults/Add_To_Cart.gif">

It's fine to use the same class for multiple elements, but you should assign each one a unique id, just like the timer is "counter1" for Item 1 and "counter2" for Item 2.

Hope this helps!

jlodwick
05-28-2012, 07:00 PM
Thanks for your help with this. I am in the process of fixing the other problems on the page. I'm using a third party shopping cart software that uses cgi scripts which pull css files that I need to modify instead of putting my style info in the main page.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum