SVG -Welcome to the new XML Based Graphics

Scalable Vector Graphics

SVG is a language for describing two-dimensional graphics and graphical applications in XML.(see here for W3C Specifications)

What is SVG?

Its the future of HTML graphics. starting from vector shapes to gradients and what not? you can draw anything using SVG. The coding requires a little knowledge of XML and a few SVG specific tags. you can draw simple as well as complex vectors using SVG.

Advantages:

• Simple text based vectors are easy to load (just as a text file)
• Can be modified easily- no complex editors required to edit the SVG vector files, all it need is text editor
• Quick rendering and Scalable to any dimension
  

Disadvantages:

The only disadvantage is that SVG is not supported by IE browser (till version 7). since its been added to W3C standards , sooner IE will be forced to add SVG support. but we can use Adobe SVG viewer to add this feature to IE

JavaScript Calender

simple JavaScript calender

The text box script looks like this:




Here is the script to include in "calender.js: file


function getObj(objID)
{
if (document.getElementById) {return document.getElementById(objID);}
else if (document.all) {return document.all[objID];}
else if (document.layers) {return document.layers[objID];}
}

function checkClick(e) {
e?evt=e:evt=event;
CSE=evt.target?evt.target:evt.srcElement;
if (getObj('fc'))
if (!isChild(CSE,getObj('fc')))
getObj('fc').style.display='none';
}

function isChild(s,d) {
while(s) {
if (s==d)
return true;
s=s.parentNode;
}
return false;
}

function Left(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}

function Top(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;

}

document.write('');
document.write('');
document.write('');
for(var kk=1;kk<=6;kk++) {
document.write('');
for(var tt=1;tt<=7;tt++) {
num=7 * (kk-1) - (-tt);
document.write('');
}
document.write('');
}
document.write('

S	M	T	W	T	F	S

');

document.all?document.attachEvent('onclick',checkClick):document.addEventListener('click',checkClick,false);


// Calendar script
var now = new Date;
var sccm=now.getMonth();
var sccy=now.getFullYear();
var ccm=now.getMonth();
var ccy=now.getFullYear();

var updobj;
function lcs(ielem) {
updobj=ielem;
getObj('fc').style.left=parseInt(Left(ielem))+'px';
getObj('fc').style.top=(parseInt(Top(ielem))+ielem.offsetHeight)+'px';
getObj('fc').style.display='';

// First check date is valid
curdt=ielem.value;
curdtarr=curdt.split('/');
isdt=true;
for(var k=0;k if (isNaN(curdtarr[k]))
isdt=false;
}
if (isdt&(curdtarr.length==3)) {
ccm=curdtarr[0]-1;
ccy=curdtarr[2];
prepcalendar(curdtarr[1],curdtarr[0]-1,curdtarr[2]);
}

}

function evtTgt(e)
{
var el;
if(e.target)el=e.target;
else if(e.srcElement)el=e.srcElement;
if(el.nodeType==3)el=el.parentNode; // defeat Safari bug
return el;
}
function EvtObj(e){if(!e)e=window.event;return e;}
function cs_over(e) {
evtTgt(EvtObj(e)).style.background='#FFCC66';
}
function cs_out(e) {
evtTgt(EvtObj(e)).style.background='#C4D3EA';
}
function cs_click(e) {
var dt;
dt=calvalarr[evtTgt(EvtObj(e)).id.substring(1,evtTgt(EvtObj(e)).id.length)].split("/");
if(parseInt(dt[1])<10){dt[1]='0'+dt[1];}
if(parseInt(dt[0])<10){dt[0]='0'+dt[0];}
updobj.value=dt[1]+'/'+dt[0]+'/'+dt[2];
getObj('fc').style.display='none';

}

var mn=new Array('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC');
var mnn=new Array('31','28','31','30','31','30','31','31','30','31','30','31');
var mnl=new Array('31','29','31','30','31','30','31','31','30','31','30','31');
var calvalarr=new Array(42);

function f_cps(obj) {
obj.style.background='#C4D3EA';
obj.style.font='10px Arial';
obj.style.color='#333333';
obj.style.textAlign='center';
obj.style.textDecoration='none';
obj.style.border='1px solid #6487AE';
obj.style.cursor='pointer';
}

function f_cpps(obj) {
obj.style.background='#C4D3EA';
obj.style.font='10px Arial';
obj.style.color='#ABABAB';
obj.style.textAlign='center';
obj.style.textDecoration='line-through';
obj.style.border='1px solid #6487AE';
obj.style.cursor='default';
}

function f_hds(obj) {
obj.style.background='#FFF799';
obj.style.font='bold 10px Arial';
obj.style.color='#333333';
obj.style.textAlign='center';
obj.style.border='1px solid #6487AE';
obj.style.cursor='pointer';
}

// day selected
function prepcalendar(hd,cm,cy) {
now=new Date();
sd=now.getDate();
td=new Date();
td.setDate(1);
td.setFullYear(cy);
td.setMonth(cm);
cd=td.getDay();
getObj('mns').innerHTML=mn[cm]+ ' ' + cy;
marr=((cy%4)==0)?mnl:mnn;
for(var d=1;d<=42;d++) {
f_cps(getObj('v'+parseInt(d)));
if ((d >= (cd -(-1))) && (d<=cd-(-marr[cm]))) {
dip=((d-cd < sd)&&(cm==sccm)&&(cy==sccy));
htd=((hd!='')&&(d-cd==hd));
if (dip)
f_cpps(getObj('v'+parseInt(d)));
else if (htd)
f_hds(getObj('v'+parseInt(d)));
else
f_cps(getObj('v'+parseInt(d)));

getObj('v'+parseInt(d)).onmouseover=(dip)?null:cs_over;
getObj('v'+parseInt(d)).onmouseout=(dip)?null:cs_out;
getObj('v'+parseInt(d)).onclick=(dip)?null:cs_click;

getObj('v'+parseInt(d)).innerHTML=d-cd;
calvalarr[d]=''+(d-cd)+'/'+(cm-(-1))+'/'+cy;
}
else {
getObj('v'+d).innerHTML=' ';
getObj('v'+parseInt(d)).onmouseover=null;
getObj('v'+parseInt(d)).onmouseout=null;
getObj('v'+parseInt(d)).style.cursor='default';
}
}
}

prepcalendar('',ccm,ccy);
//getObj('fc'+cc).style.visibility='hidden';

function caddm() {
marr=((ccy%4)==0)?mnl:mnn;

ccm+=1;
if (ccm>=12) {
ccm=0;
ccy++;
}
cdayf();
prepcalendar('',ccm,ccy);
}

function csubm() {
marr=((ccy%4)==0)?mnl:mnn;

ccm-=1;
if (ccm<0) {
ccm=11;
ccy--;
}
cdayf();
prepcalendar('',ccm,ccy);
}

function cdayf() {
if ((ccy>sccy)|((ccy==sccy)&&(ccm>=sccm)))
return;
else {
ccy=sccy;
ccm=sccm;
cfd=scfd;
}
}


enjoy.....

Simplest Ajax Engine script

Simplest Ajax Engine script

Here is the simplest version of the Ajax Engine which can be use without any "DLL" or "Class" or "Frame work" . All you need is a server side technology such as ASP,PHP,JSP etc.

function fetchData(url,objectID)
{
var pageRequest = false;
if (window.XMLHttpRequest)pageRequest = new XMLHttpRequest();
else if (window.ActiveXObject) pageRequest = new ActiveXObject('MSXML2.XMLHTTP.3.0');
else return false;
pageRequest.onreadystatechange = function() {
try
{
if (pageRequest.readyState > 3)
{
var object = document.getElementById(objectID);
object.innerHTML = pageRequest.responseText;
}
}
catch(err)
{}

}

pageRequest.open('get',url,true);
pageRequest.send(null);
}

working method

Make an HTML container such as div,span,p,b or table. Give 'id' attribute with some name say 'div id="dynamicdiv" '. Now you can write a server side page with some content.

From the first page you can call this function with parameters, where first parameter is the URL of the server side page u created and second parameter is the id of the HTML container you created.... this will retrieve the output of the server side page and display it in the HTML container you created.

The script is compatible with IE 5.5+ and Firefox so that there is no browser issues.
Also i have tweaked the script to use a minimum number of HTTP requests.

Have fun enjoy the Ajax technology, start using it.

Regards
Clain D'silva