May 31

javascript – A simple javascript countdown timer

Posted on May 31, 2013 by georgezheng

This is a simple but light weight javascript countdown timer,which can be integrated to your zen cart store by uploading the file to the jscript sub folder of your current zen cart template folder.

I name it as jscript_timer.php, so i can put some php configure variable to the zen cart admin backend. if you dont’ want,you can rename it to jscript_timer.js. This countdown timer countdown 4 days and it will start over again.so no bother to admin setting once and once again.(:

Source code

<?php
$path = '/' . DIR_WS_TEMPLATE . 'jscript/';
$img = $path . 'timer.png';
?>
<script language="javascript" type="text/javascript"><!--
var present;
var future;
var tseconds;
var seconds;
var minutes;
var hours;
var days;
var limit;
limit =4;
// ID=setInterval("countdown();", 1000);
 
function countdown() {
	present = new Date();
	present = present.getTime();
	future = new Date("MAY 27, 2015 11:59:59");
 
	tseconds = (future - present)  / 1000;
 
	days = tseconds /24/60/60;
	days = Math.floor(days);
	odays = days;
	days = days%limit;
	tseconds = tseconds - (odays - days) * 24 * 60 * 60 - (days * 24 * 60 * 60);
 
	hours = tseconds /60/60;
	hours = Math.floor(hours);
	tseconds = tseconds - (hours * 60 * 60);
 
	minutes = tseconds /60;
	minutes = Math.floor(minutes);
	tseconds = tseconds - (minutes * 60);
 
	seconds = tseconds;
	seconds = Math.floor(seconds);
	htmlstr = '<span style="font-weight:bold;font-size:16px">' + days + '</span> days <span style="font-weight:bold;font-size:12px">' +  hours + ':' + minutes + ':' + seconds + '</span>  Left';
	document.getElementById('timerdiv').innerHTML = htmlstr;
	//console.info(days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + ' seconds');
}
window.onload = function () {
    ID=setInterval("countdown();", 1000);
};
//--></script>

Feel free to adapt it to fit your need!!

May 13

javascript — get string utf8 encode and decode

Posted on May 13, 2013 by georgezheng

Source code

<script type="text/javascript">
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
function encode64(input)
{
    input = escape(input)
    var output = ""
    var chr1, chr2, chr3 = ""
    var enc1, enc2, enc3, enc4 = ""
    var i = 0
    do
    {
        chr1 = input.charCodeAt(i++)
        chr2 = input.charCodeAt(i++)
        chr3 = input.charCodeAt(i++)
        enc1 = chr1 >> 2
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
        enc4 = chr3 & 63
        if (isNaN(chr2))
        {
            enc3 = enc4 = 64
        }
        else if (isNaN(chr3))
        {
            enc4 = 64
        }
        output = output +
        keyStr.charAt(enc1) +
        keyStr.charAt(enc2) +
        keyStr.charAt(enc3) +
        keyStr.charAt(enc4)
        chr1 = chr2 = chr3 = ""
        enc1 = enc2 = enc3 = enc4 = ""
    }
    while(i < input.length)
    return output
}
function decode64(input)
{
    var output = ""
    var chr1, chr2, chr3 = ""
    var enc1, enc2, enc3, enc4 = ""
    var i = 0
    // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
    var base64test = /[^A-Za-z0-9\+\/\=]/g
    if (base64test.exec(input))
    {
        alert("There were invalid base64 characters in the input text.\n" +
        "Valid base64 characters are A-Z, a-z, 0-9, '+', '/', and '='\n" +
        "Expect errors in decoding.")
    }
    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "")
    do
    {
        enc1 = keyStr.indexOf(input.charAt(i++))
        enc2 = keyStr.indexOf(input.charAt(i++))
        enc3 = keyStr.indexOf(input.charAt(i++))
        enc4 = keyStr.indexOf(input.charAt(i++))
        chr1 = (enc1 << 2) | (enc2 >> 4)
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
        chr3 = ((enc3 & 3) << 6) | enc4
        output = output + String.fromCharCode(chr1)
        if (enc3 != 64)
        {
            output = output + String.fromCharCode(chr2)
        }
        if (enc4 != 64)
        {
            output = output + String.fromCharCode(chr3)
        }
        chr1 = chr2 = chr3 = ""
        enc1 = enc2 = enc3 = enc4 = ""
    }
    while (i < input.length)
    return unescape(output)
}
</script>

May 11

javascript — a simple progress indicator

Posted on May 11, 2013 by georgezheng

well,the javascript snippet below is a simple js progress indicator

Source code

var start = 0;
  var step = 9;
  var s =  setInterval(function () {
     if (start >= 90) {
         start < 95  ? start = 95 : '';
         start +=1 ;
     } else {
         start += Math.floor(Math.random()*10) + step;
         step = ((step - 1) > 1) ? step: 9;
     }
     if (start >= 100) {
         start = 100;
         clearInterval(s);
     }
     console.info(start + '%');
   }, 600);

Oct 25

hidden animated GIF images stop play in IE browser when submit form

Posted on October 25, 2012 by georgezheng

I had met such a problem:

There is a form,a payment form to collect credit card info,below is the html code of the page.

Source code

<form id="form1" action="PayPage.aspx" method="post">
    <input type="text" name="txtPost" value=""></td>
    <input type="text" name="txtEmail" value=""></td>
    <input type="submit" id="btnPay" onclick="return VerifyPage();" value="Submit" name="btnPay">
</form>

When click on the button to submit the form, we need to show a loading gif image to customer. That means we are processing their request.Here is the js code below:

Source code

function VerifyPage() {
    //do some validate
	//if all passed,show alert message box and the animated loading gif image
    sAlert("Connecting to bank......Please wait......<br/><img id='img123' alt='loading......' src='../resources/images/jindutiao.gif' />");
    return true;
}
 
function sAlert(str) {
    var msgw,msgh,bordercolor;
    msgw=400;
    msgh=100;
    titleheight=25;
    bordercolor= "#336699 ";
    titlecolor= "#99CCFF ";
    var sWidth,sHeight;
    sWidth=document.body.offsetWidth;
    sHeight=screen.height;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.display = "none";
    bgObj.style.top= "0";
    bgObj.style.background= "#777 ";
    bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 ";
    bgObj.style.opacity= "0.6";
    bgObj.style.left= "0";
    bgObj.style.width=sWidth   +   "px";
    bgObj.style.height=sHeight   +   "px";
    bgObj.style.zIndex   =   "10000";
    document.body.appendChild(bgObj);
    var msgObj=document.createElement("div");
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.background= "white ";
    msgObj.style.border= "1px solid "   ;
    msgObj.style.position   =   "absolute";
    msgObj.style.left = "50%";
    msgObj.style.display = 'none';
    msgObj.style.top   =   "50%";
    msgObj.style.font= "14px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";
    msgObj.style.marginLeft   =   "-225px"   ;
    msgObj.style.marginTop   =   -75+document.documentElement.scrollTop+ "px";
    msgObj.style.width   =   msgw   +   "px";
    msgObj.style.height   =msgh   +   "px";
    msgObj.style.textAlign   =   "center";
    msgObj.style.lineHeight   = "60px";
    msgObj.style.zIndex   =   "10001";
    document.body.appendChild(msgObj);
    var txt=document.createElement("p");
    txt.style.margin= "1em   0"
    txt.setAttribute("id", "msgTxt");
    txt.innerHTML=str;
    document.getElementById("msgDiv").appendChild(txt);
}

This works fine in all major browsers except IE.When the user click the submit button, the message dialog show,but the animated loading image is frozen.This is another know bug in IE browsers.IE didn’t play any hidden animated image after submit event.

To get around this bug,you need to let IE browser to reaload the image in a timeout. That means you need to change the image elements src attribute every moments.

Source code

function sAlert(str) {
    var msgw,msgh,bordercolor;
    msgw=400;
    msgh=100;
    titleheight=25;
    bordercolor= "#336699 ";
    titlecolor= "#99CCFF ";
    var sWidth,sHeight;
    sWidth=document.body.offsetWidth;
    sHeight=screen.height;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.display = "none";
    bgObj.style.top= "0";
    bgObj.style.background= "#777 ";
    bgObj.style.filter= "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 ";
    bgObj.style.opacity= "0.6";
    bgObj.style.left= "0";
    bgObj.style.width=sWidth   +   "px";
    bgObj.style.height=sHeight   +   "px";
    bgObj.style.zIndex   =   "10000";
    document.body.appendChild(bgObj);
    var msgObj=document.createElement("div");
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.background= "white ";
    msgObj.style.border= "1px solid "   ;
    msgObj.style.position   =   "absolute";
    msgObj.style.left = "50%";
    msgObj.style.display = 'none';
    msgObj.style.top   =   "50%";
    msgObj.style.font= "14px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif";
    msgObj.style.marginLeft   =   "-225px"   ;
    msgObj.style.marginTop   =   -75+document.documentElement.scrollTop+ "px";
    msgObj.style.width   =   msgw   +   "px";
    msgObj.style.height   =msgh   +   "px";
    msgObj.style.textAlign   =   "center";
    msgObj.style.lineHeight   = "60px";
    msgObj.style.zIndex   =   "10001";
    document.body.appendChild(msgObj);
    var txt=document.createElement("p");
    txt.style.margin= "1em   0"
    txt.setAttribute("id", "msgTxt");
    txt.innerHTML=str;
    document.getElementById("msgDiv").appendChild(txt);
 
    //added the following code to walk around IE BUG
    var imgurl = document.getElementById('img123').src;
    setTimeout(function() {
        document.getElementById('img123').src = imgurl;
    },200);
 
}

Aug 19

javascript — open lots of urls in new tab

Posted on August 19, 2012 by georgezheng

Sometimes,i need to open a lot of url to finish some work.so i need a javascript code to save time.i can run them from firebug console.

Source code

var domains = ['url1','url2','url3'];
for(i in domains) {
    window.open(domains[i]);
}

The url to assign main shared ip to a reseller acct in WHM:

/cpsess3712993106/scripts2/dodelegatemainip?mainip=212.117.179.142&user=share033

The url to change ip of a domain/acct

/cpsess3808654605/scripts2/changeip?oldip=212.117.179.90&customip=212.117.179.96&user=airjoruk

magento and zen cart developer

magento and zen cart module and template development

Category Archives: javascript

javascript – A simple javascript countdown timer

javascript — get string utf8 encode and decode

javascript — a simple progress indicator

hidden animated GIF images stop play in IE browser when submit form

javascript — open lots of urls in new tab