Category Archives: Javascript

Invoicer by Suren Dias – Free invoicing tool for freelancers

HI I created this free invoicing tool aimed at freelancers. Its currently at a very early stage. Can only create pdf invoice at the moment from the data that user enters.

Tool – http://invoicer.surendias.com/

Source – https://github.com/surendias/Invoicer

When embedding YouTube videos, page jumps to the video

Ok. this is a problem I noticed today. Let me explain the situation,

I have embedded a YouTube video on one of my client websites. That video is placed at the end of the page. And when the page is loading the page jumps to that video instead of loading the page from the top. This is happening without me entering any anchor tags in the iframe of the YouTube embed code.

When checking the iframe code I noticed it is loading a # tag called #document within the iframe. This is causing the page to jump.

Solution,

Add following code to prevent #tag in iframe from loading on page load,

 style="display: none;" onload="this.style.display='block';"

Update

If your using WordPress this method is more suitable, Add the following code in the footer section. This will make the page jump back to top.

window.onload=function() {location.href='#';};

Regular Expression – Javascript- To check filename to see if alpha numeric characters

Ok here is a quick regular expression to check if a file name only contains alpha numeric characters  also we need to allow the period sign.

/^[0-9a-zA-Z\.]*$/

This allows numbers, letters and the period symbol.

The full code,

var filename = fullfilepath.replace(/^.*[\\\/]/, ''); // this is to get only the file name, file upload field gives the full path

 if (!filename.match(/^[0-9a-zA-Z\.]*$/)) {
 alert('File name should only containg letters and numbers, please rename image file and upload.');

 }

Allow only Numbers and Decimals in a text box

To allow only Numbers and Decimals in Text boxes you can use the following JavaScript code,

<SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>

And at the Text box call the function on Key Press event,

onkeypress="return isNumberKey(event)"

Embedding Fonts Different Methods

If your a front end web developer you might have received a design of a website that has some uncommon font. Normally fonts like Arial, Times New Roman are commonly present in all browsers/Operating systems, that websites designed with those fonts are rendered more or less same in all browsers. But for websites that has custom fonts or fonts that are not available in a normal users computer the web page will get rendered differently depending on the availability of fonts in the client computer or device.

Some really artisitic and creative web designs requires us to use the specific font the website was designed with. So how to do this? Let the user download the fonts required to view the website properly? hmmm not practical… Develop the entire website in Flash? hmmm seo nightmare :-/

Method to embed fonts on a website so that it may be rendered properly at the client.

Method – Embedding the font files in the website. Using @font-face

What you need,

.ttf or .otf font file. these will work on firefox and other modern browsers.

.eot file for internet explorer -> you can convert .ttf files to .eot using online font file converters like http://fontface.codeandmore.com/ and http://www.kirsle.net/wizards/ttf2eot.cgi

after you get those two files put them in your website directory and at the top of your css file add the following code to define the font-face

/* custom fonts */

@font-face {
font-family: gillsans; /* this could be any name but for clarity use the font name */
src: url(“fonts/gillsans.eot”) /* path of EOT file for IE */
}

@font-face {
font-family: gillsans;
src: url(“fonts/gillsans.ttf”) /* path of  TTF file for CSS3 browsers */
}

Make sure to put the .eot file code first.

Then when you want to apply the font just use like following,

p {

font-family: gillsans; /* font family should be what you defined earlier */

}

This method will work on IE and other browsers but is sometimes difficult due to convert difficulties of font files from .ttf and .otf to .eot format.

 

WordPress Tabs and Slides Plugin Customization

Hi Guys after a long time 🙂

I got a project that required to have a tabbed layout on its pages. This was easily achievable with numerous plugins out there. I did some research and decided to use “WordPress Tabs Slides” Plugin.

After customizing it according to the customers need I realized that the url wasnt changing to reflect the tab the user was on. The SEO company I was working was adamant about having seperate urls for each tab for SEO optimization.

So Me and my friend(Shammi) decided to customize it to show the #tag for the tab on the url. The effort was successful and I decided to share what we learned with you guys.

After installing the plugin go to the plugin directory,

C:\wamp\www\[urwpinstallation]\wp-content\plugins\wordpress-tabs-slides\ts

and replace the tabs_slides.js file with following content,

/*
// JoomlaWorks “Tabs & Slides” Plugin for Joomla! 1.5.x – Version 2.4
// License: http://www.gnu.org/copyleft/gpl.html
// Copyright (c) 2006 – 2008 JoomlaWorks, a Komrade LLC company.
// More info at http://www.joomlaworks.gr
// Developers: Fotis Evangelou
// ***Last update: May 20th, 2008***
*/

/* Copyright (c) 2006 Patrick Fitzgerald – Version 1.9 */
// Temporarily hide tabs
document.write(‘<style type=”text/css”>.jwts_tabber{display:none;}<\/style>’);
var pageURL = window.location.toString().slice(0, -1);
var urlArray = new Array();
urlArray = pageURL.split(‘//’)[1];
var pageId = urlArray.split(‘/’)[urlArray.split(‘/’).length-1];

var tabberOptions = {
//start on DOM ready
‘manualStartup’:true,
‘cookie’:”jwts_tc_”+pageId, /* Name to use for the cookie */
‘onLoad’: function(argsObj)
{
/* var t = argsObj.tabber;
var i;
if (t.id) {
t.cookie = t.id + t.cookie;
}
i = parseInt(getCookie(t.cookie));
if (isNaN(i)) { return; }
t.tabShow(i);
*/
$(‘#jwts_tab ul li’).find(‘a’).each(function(index){
var str = $(this).text().toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
//alert(str);
str = str.replace(“Echo”, “ECHO”);
str = str.replace(“Faq”, “FAQ”);
$(this).text(str.replace(/-/gi, ” “));

});
$(‘#jwts_tab’).find(‘a’).addClass(‘capitalise’);
var t = argsObj.tabber;
var show_type=unescape(document.location.hash.substring(1));
var i;

// alert(‘hash = ‘ + i);
if ((show_type==””) || (show_type==null))
{
if (t.id) {
t.cookie = t.id + t.cookie;
}
i = parseInt(getCookie(t.cookie));
if (isNaN(i)) {return;}
t.tabShow(i);
}
else
{
t.tabShowByName(show_type);
}
// $(‘#jwts_tab’).find(‘a’).text() = $(‘#jwts_tab’).find(‘a’).text().replace(“-“, ” “, flags);
//alert($(‘#jwts_tab’).find(‘a’).html().replace(“-“, ” “));

/*while($(‘#jwts_tab’).find(‘a’).next()){
$(‘#jwts_tab’).find(‘a’).html($(‘#jwts_tab’).find(‘a’).html().replace(“-“, ” “));
}*/

//console.log(attrib);
//var strVal = attrib;
// alert($(‘#jwts_tab’).find(‘a’).attr(‘href’));
// alert($(‘div.jwts_tabberlive ul li’).find(‘a’).attr(‘href’));
// $(“ul.jwts_tabberlive > ul > li”).css(“border”, “3px double red”);
//alert(‘getCookie(‘ + t.cookie + ‘) = ‘ + i);
},
‘onClick’:function(argsObj)
{
var c = argsObj.tabber.cookie;
var i = argsObj.index;
//alert(‘setCookie(‘ + c + ‘,’ + i + ‘)’);
setCookie(c, i);
var urloftab = this.tabs[i].headingText;
//alert(urloftab);
window.location.hash = urloftab;

// $(“#tabs > ul”).bind(“tabsshow”, function(event, ui) {
// window.location.hash = ui.tab.hash;
//})
//var urloftab = $(‘.jwts_tabberactive’).find(‘a’).attr(‘href’);
// alert(urloftab);
//window.location.hash = urloftab;
}
};
// Cookie handling
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + “=” + escape(value) +
((expires) ? “; expires=” + expires.toGMTString() : “”) +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
((secure) ? “; secure” : “”);
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + “=”;
var begin = dc.indexOf(“; ” + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(“;”, begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + “=” +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
“; expires=Thu, 01-Jan-70 00:00:01 GMT”;
}
}
// The tabs!
function tabberObj(argsObj)
{
var arg;
this.div=null;
this.classMain=”jwts_tabber”;
this.classMainLive=”jwts_tabberlive”;
this.classTab=”jwts_tabbertab”;

this.classTabDefault=”jwts_tabbertabdefault”;

this.classNav=”jwts_tabbernav”;

this.classTabHide=”jwts_tabbertabhide”;this.classNavActive=”jwts_tabberactive”;

this.titleElements=[‘h2′,’h3′,’h4′,’h5′,’h6′];

this.titleElementsStripHTML=true;

this.removeTitle=true;

this.addLinkId=false;

this.linkIdFormat='<tabberid>nav<tabnumberone>’;

for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp(‘\\b’+this.classMain+’\\b’,’gi’);

this.REclassMainLive=new RegExp(‘\\b’+this.classMainLive+’\\b’,’gi’);

this.REclassTab=new RegExp(‘\\b’+this.classTab+’\\b’,’gi’);

this.REclassTabDefault=new RegExp(‘\\b’+this.classTabDefault+’\\b’,’gi’);

this.REclassTabHide=new RegExp(‘\\b’+this.classTabHide+’\\b’,’gi’);

this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;

if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;

if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement(“ul”);DOM_ul.className=this.classNav;

for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;

if(this.removeTitle){t.div.title=”;}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];

if(headingElement){t.headingText=headingElement.innerHTML;

if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi,” “);t.headingText=t.headingText.replace(/<[^>]+>/g,””);}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement(“li”);

t.li=DOM_li;DOM_a=document.createElement(“a”);

DOM_a.appendChild(document.createTextNode(t.headingText));

DOM_a.href=”#”+t.headingText;DOM_a.title=t.headingText;

DOM_a.onclick=this.navClick;DOM_a.tabber=this;

DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);

aId=aId.replace(/<tabnumberone>/gi,i+1);

aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,”));

DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);

e.className=e.className.replace(this.REclassMain,this.classMainLive);

this.tabShow(defaultTab);if(typeof this.onLoad==’function’){this.onLoad({tabber:this});}
return this;};

tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();

if(typeof self.onClick==’function’){onClickArgs={‘tabber’:self,’index’:tabberIndex,’event’:event};

if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};

tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=’ ‘+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};

tabberObj.prototype.tabShowByName=function(tabberName){var i;for(i=0;i<this.tabs.length;i++){if(this.tabs[i].headingText==tabberName){this.tabShow(i);break;}}return this;};

tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;

div.className=div.className.replace(this.REclassTabHide,”);

this.navSetActive(tabberIndex);if(typeof this.onTabDisplay==’function’){this.onTabDisplay({‘tabber’:this,’index’:tabberIndex});}
return this;};

tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;
// var urloftab = this.tabs[tabberIndex].headingText;
// alert(urloftab);
// window.location.hash = urloftab;
return this;};

tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=”;return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName(“div”);for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!=’function’){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions==’undefined’){tabberAutomaticOnLoad();}else{if(!tabberOptions[‘manualStartup’]){tabberAutomaticOnLoad(tabberOptions);}}

/* WordPress Slides */

wtsslide = function(wrapper,speed, obj){
//alert(jQuery(obj).text());

//jQuery(obj).text(jQuery(obj).text().replace(‘.’, ”));
if (jQuery(obj).text().indexOf(“(Hide)”) >= 0) {
jQuery(obj).text(jQuery(obj).text().replace(‘(Hide)’, ”));
jQuery(wrapper).slideToggle(speed);
return true;
}

jQuery(obj).text(jQuery(obj).text() + ‘ (Hide)’);
jQuery(wrapper).slideToggle(speed);

}

wtsaccordion = function(group,wrapper,speed){
jQuery(group).hide();
jQuery(wrapper).slideToggle(speed).toggleClass(“active”);
}

Please pay attention to the Bolded code, those are what we added. Hope this is helpful feel free to contact me if you have any questions.

Regular Expressions – validating the NIC number

Regular expressions!!! kind of a scary thing for most developers.. 🙂 Well it is scary because its not something that is really user friendly for developers, its a combination of letters, special characters and numbers that kind of make our eyes go the wrong way when we look at them.

Well I normally don’t like to use regular expressions, I just copy from some web site and paste the regular expression when I really need to use one. But I needed to learn how to build my own regular expression and I couldn’t find one on the Internet. What a bummer that was 🙂

What I wanted to do was to validate a National Identity Card (NIC) number (Sri Lankan). Which is 9 number followed by one letter that is v, V, x or X.

So how to write the regular expression for this?

Well you start with

/^

that means that the regular expression is started.

Now we need to tell them that next nine characters should be numbers,

[0-9]

that is how you say numbers 🙂 , how to tell them that next 9 digits are numbers???

[0-9]{9}

the number in curly brackets is the number of times to repeat.

Next we need to tell the regular expression that next letter should be x, X, v or V.

[xXvV]

and then we need to tell that the regular expression is over. you do that by,

$/

The final version of the regular expression for validating the NIC number is,

/^[0-9]{9}[vVxX]$/

It is really easy when you break it down like that. 😀