How to Create a Countdown Timer that Refreshes the Page Daily

By Mika | Published: 02/10/2011
  1.  
  2. <script type="text/javascript">
  3.     function getSeconds() {
  4.         var now = new Date();
  5.         var time = now.getTime();
  6.         var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
  7.         var ft = midnight.getTime() + 86400000;
  8.         var diff = ft – time;
  9.         diff = parseInt(diff / 1000);
  10.         if (diff > 86400) {
  11.             diff = diff – 86400
  12.         }
  13.         startTimer(diff);
  14.     }
  15.  
  16.     var timeInSecs;
  17.     var ticker;
  18.  
  19.     function startTimer(secs) {
  20.         timeInSecs = parseInt(secs);
  21.         ticker = setInterval("tick()", 1000);
  22.         tick();
  23.     }
  24.  
  25.     function tick() {
  26.         var secs = timeInSecs;
  27.         if (secs > 0) {
  28.             timeInSecs–;
  29.         } else {
  30.             clearInterval(ticker); // stop  at zero
  31.             getSeconds(); // start again
  32.             window.location.reload(); // refresh page.
  33.         }
  34.  
  35.         var hours = Math.floor(secs / 3600);
  36.         secs %= 3600;
  37.         var mins = Math.floor(secs / 60);
  38.         secs %= 60;
  39.         var result = ((hours < 10) ? "0" : "") + hours + " : " + ((mins < 10) ? "0" : "") + mins + " : " + ((secs < 10) ? "0" : "") + secs + "";
  40.         document.getElementById("countdown").innerHTML = result;
  41.     }
  42. </script>
  43.  
Posted in JavaScript | Tagged , , , , , , , | Leave a comment

How to display fields using select drop down and jQuery

By Mika | Published: 02/02/2011
  1.  
  2. <script type="text/javascript">
  3.     $(document).ready(function(){
  4.         $("#Select").change(function(){
  5.             if ($(this).val() == "Other" ) {
  6.                 $("#OtherField").show();
  7.             } else {
  8.                 $("#OtherField").hide();
  9.             }
  10.         });
  11.     });      
  12. </script>
  13.  
Posted in jQuery | Tagged , , , , , , | Leave a comment

How to Show/Hide a div based on day of the week with jQuery

By Mika | Published: 07/13/2010

JavaScritpt

  1.  
  2. <script type="text/javascript">
  3.         $(document).ready(function() {
  4.        
  5.         today=new Date()
  6.         thisDay=today.getDay()
  7.        
  8.         $("#sunday").hide();
  9.                 $("#monday").hide();
  10.                 $("#tuesday").hide();
  11.                 $("#wednesday").hide();
  12.                 $("#thursday").hide();
  13.                 $("#friday").hide();
  14.                 $("#saturday").hide();
  15.        
  16.        
  17.         if (thisDay == 0){
  18.            $("#sunday").show();
  19.         }
  20.  
  21.         if (thisDay == 1){
  22.            $("#monday").show();
  23.         }
  24.         if (thisDay == 2){
  25.             $("#tuesday").show();
  26.         }
  27.         if (thisDay == 3){
  28.             $("#wednesday").show();
  29.         }
  30.         if (thisDay == 4){
  31.             $("#thursday").show();
  32.         }
  33.  
  34.         if (thisDay == 5){
  35.             $("#friday").show();
  36.         }
  37.         if (thisDay == 6){
  38.             $("#saturday").show();
  39.         }
  40.        
  41.         });
  42. </script>
  43.  

Html

  1.  
  2. <div id="sunday">
  3.   <h3>Sunday</h3>
  4. </div>
  5. <div id="monday">
  6.   <h3>Monday</h3>
  7. </div>
  8. <div id="tuesday">
  9.   <h3>Tuesday</h3>
  10. </div>
  11. <div id="wednesday">
  12.   <h3>Wednesday</h3>
  13. </div>
  14. <div id="thursday">
  15.   <h3>Thrursday</h3>
  16. </div>
  17. <div id="friday">
  18.   <h3>Friday</h3>
  19. </div>
  20. <div id="saturday">
  21.   <h3>Saturday</h3>
  22. </div>
  23.  
Posted in JavaScript, jQuery | Tagged , , , , , , | Leave a comment

How to change the message “No bookings found.” on Business Catalyst using JavaScript.

By Mika | Published: 07/08/2010

First wrap your module with an div like: <div id="app">{module...}</div>

Then include the following JavaScript code:

JavaScript

  1.  
  2.  
  3. <script type="text/javascript">
  4.             $(document).ready(function() {
  5.                 var td = document.getElementById(‘app’).innerHTML;
  6.                 if(td=="No bookings found."){
  7.                     document.getElementById(‘app’).innerHTML = "No events at this time";
  8.                 }
  9.             });
  10. </script>
  11.  

Please, remove any blank space or break line between the div and module tag.

Posted in Business Catalyst / GoodBarry | Tagged , , , , , | Leave a comment

How to Force Opt-In automatically instead of having to go into each contacts details – Business Catalyst

By Mika | Published: 07/06/2010

just add: &amp;Optin=True at the form action, see example below:

HTML example

  1.  
  2. <form action="/FormProcessv2.aspx?WebFormID=10090&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}&amp;Optin=True" enctype="multipart/form-data" onsubmit="return checkWholeForm13472(this)" method="post" name="catwebformform13472">
  3.  
Posted in Business Catalyst / GoodBarry | Tagged , , , , , | Leave a comment

How to add a surcharge to the Amex option for the checkout form in the Online Store – Business Catalyst

By Mika | Published: 07/06/2010

Use onchange to alert the customer that a charge will occur and then the function doMath() calculates the surcharge.

JavaScript

  1.  
  2. <script type="text/javascript">
  3.      function checkSel(obj) {
  4.       var ind = obj.selectedIndex;
  5.       if  (ind == 3) {
  6.           alert(‘This Card incurs a 3.5% Surcharge.’);  
  7.       }
  8.      }
  9.    
  10.      function  doMath() {
  11.    
  12.       if (CardType = "AMEX") {
  13.        var one = eval(document.catwebformform7818.Amount.value)
  14.        var prod = one  *   1.03
  15.       document.catwebformform7818.Amount.value=custRound(prod,2);}
  16.       }
  17.      
  18.      function custRound(x,places) {
  19.       return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
  20.      }
  21.     </script>
  22.  

Add the onchange into the dropdown:

HTML

  1.  
  2. <div class="item"><label>Card Type <span class="req">*</span></label> <select class="cat_dropdown" id="CardType" onchange="checkSel(this);" name="CardType">
  3.                             <option value="1" selected="true">Visa</option>
  4.                             <option value="2">Master Card</option>
  5.                             <option value="3">Bank Card</option>
  6.                             <option value="4">American Express</option>
  7.                             <option value="5">Diners Club</option>
  8.                             </select> </div>
  9.  

Then add the onclick to the submit button to action the Maths script:

  1.  
  2. <input id="catwebformbutton" onclick="doMath()" type="submit" value="Submit" />
  3.  

If you want apply this for Diners card as well, use the following:

  1.  
  2.  if (ind == 3 || ind == 4) { alert(‘AMEX incurs a 3% Surcharge.\n Total Amount will be updated upon hitting the submit button.’); }
  3.  
Posted in Business Catalyst / GoodBarry | Tagged , , , , , , , , , , | Leave a comment

How to Create a Drop Down Select with Links without a form submit.

By Mika | Published: 06/30/2010

HTML

  1.  
  2. <form action="../">
  3. <select onchange="window.open(this.options[this.selectedIndex].value,’_top’)">
  4.     <option value="contact.html">Contact Page</option>
  5.     <option value="http://www.apple.com">Apple</option>
  6.     <option value="http://www.yahoo.com">Yahoo</option>
  7.     <option value="http://www.google.com">google</option>
  8.     <option value="about.html">About Us</option>
  9. </select>
  10. </form>
  11.  

Demo

Posted in HTML, JavaScript | Tagged , , , , , , , | Leave a comment

How to Submit Form on Selection of Dropdown Item

By Mika | Published: 03/10/2010

HTML

  1.  
  2. <select class="dropdown" id="form2" name="form2" onchange="this.form.submit();">
  3.     <option value="*">– All –</option>
  4.     <option selected="selected" value="NSW">NSW</option>
  5.     <option value="WA">WA</option>
  6.     <option value="QLD">QLD</option>
  7.     <option value="VIC">VIC</option>
  8.     <option value="ACT">ACT</option>
  9.     <option value="NT">NT</option>
  10.     <option value="NZ">NZ</option>
  11.     </select>
  12.  
Posted in HTML, JavaScript | Tagged , , , | 1 Comment

How to Automatically Re-size Images for iPhones/ iPods

By Mika | Published: 03/09/2010

CSS

  1.  
  2. @media screen and (max-device-width: 480px){
  3.     img{
  4.         max-width:100%;
  5.         height:auto;
  6.     }
  7. }
  8.  
Posted in CSS | Tagged , , , , , | 2 Comments

How to Apply CSS styles to iPhones/iPods only

By Mika | Published: 03/09/2010

CSS

  1.  
  2. @media screen and (max-device-width: 480px){
  3.     /* All iPhone only CSS goes here */
  4. }
  5.  
Posted in CSS | Tagged , , , , , | Leave a comment