Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    loops for countdown timers

    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:
    Code:
     #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:
    Code:
    <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>
    		<!--**********-->

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I was thinking about doing that. Could you help me understand how the "button class" works?

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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';
    }

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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:
    Code:
    <!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)

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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).
    Code:
    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)
    Code:
    // 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)
    Code:
    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:
    Code:
    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:
    Code:
    <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:
    Code:
    <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!

  • Users who have thanked EpicWebDesign for this post:

    jlodwick (05-28-2012)

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •