Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

MS Agent style critters for your web pages

, 13 Feb 2009 BSD
Implementing MS Agent style critters for your web pages.
jcritters.zip
bubble.gif
monkey.gif
penguin.gif
//see jcritter.js for license information
function JCritter(agent){var me,div,divArray,i,e;me=this;this.isHidden=true;this.isSpeaking=false;this.isMute=false;this.internal={};this.internal.IE6=(document.all&&window.external&&(typeof document.documentElement.style.maxHeight==='undefined'))?true:false;this.internal.agent=agent;this.internal.getPageWidth=function(){return window.innerWidth||(document.documentElement.clientWidth||(document.body.clientWidth||0));};this.internal.getPageHeight=function(){return window.innerHeight||(document.documentElement.clientHeight||(document.body.clientHeight||0));};divArray=['bubbleDiv','bubbleTop','bubbleBottom','bubbleText','critterDiv'];for(i=0,e=divArray.length;i<e;i++){this.internal[divArray[i]]=document.createElement('div');}this.internal.critterImg=document.createElement('img');this.internal.bubbleDiv.style.position=this.internal.IE6?'absolute':'fixed';this.internal.bubbleDiv.style.visibility='hidden';this.internal.bubbleDiv.style.width='275px';this.internal.bubbleTop.style.background='url(bubble.gif) no-repeat top';this.internal.bubbleTop.style.padding='25px 8px 0px';this.internal.bubbleBottom.innerHTML='&nbsp;';this.internal.bubbleBottom.style.background='url(bubble.gif) no-repeat bottom';this.internal.bubbleBottom.style.padding='35px 8px 0px';this.internal.bubbleText.style.paddingLeft='10px';this.internal.bubbleText.style.paddingRight='10px';this.internal.bubbleText.style.textAlign='center';this.internal.critterDiv.style.position=this.internal.IE6?'absolute':'fixed';this.internal.critterDiv.style.visibility='hidden';this.internal.critterImg.onclick=function(){me.onClick();};this.internal.critterImg.onmouseover=function(){me.onMouseIn();};this.internal.critterImg.onmouseout=function(){me.onMouseOut();};this.internal.bubbleTop.appendChild(this.internal.bubbleText);this.internal.bubbleDiv.appendChild(this.internal.bubbleTop);this.internal.bubbleDiv.appendChild(this.internal.bubbleBottom);this.internal.critterDiv.appendChild(this.internal.critterImg);document.body.appendChild(this.internal.critterDiv);document.body.appendChild(this.internal.bubbleDiv);if(this.internal.IE6){window.onscroll=function(){me.draw();};}}JCritter.prototype={drawBalloon:function(){this.internal.bubbleDiv.style.left=this.internal.critterDiv.offsetLeft-this.internal.bubbleDiv.offsetWidth+this.internal.agent.speechLeft+'px';this.internal.bubbleDiv.style.top=this.internal.critterDiv.offsetTop-this.internal.bubbleDiv.offsetHeight+this.internal.agent.speechTop+'px';},drawAgent:function(){var pageY,pageX;this.internal.critterImg.src=this.internal.agent.src;this.internal.critterImg.style.width=this.internal.agent.width+'px';this.internal.critterImg.style.height=this.internal.agent.height+'px';pageY=this.internal.IE6?(window.pageYOffset||(document.documentElement.scrollTop||0)):0;pageX=this.internal.IE6?(window.pageXOffset||(document.documentElement.scrollLeft||0)):0;this.internal.critterDiv.style.left=this.internal.getPageWidth()+pageX-this.internal.agent.width-this.internal.agent.adjustLeft+'px';this.internal.critterDiv.style.top=this.internal.getPageHeight()+pageY-this.internal.agent.height-this.internal.agent.adjustTop+'px';},draw:function(){this.drawAgent();this.drawBalloon();},show:function(){this.isHidden=false;this.internal.critterDiv.style.visibility='visible';},say:function(text,align){if(!text){return this.internal.bubbleText.innerHTML;}if(this.isHidden||this.isMute){return;}this.isSpeaking=true;this.show();if(align){this.internal.bubbleText.style.textAlign=align;}this.internal.bubbleText.innerHTML=text;this.drawBalloon();this.internal.bubbleDiv.style.visibility='visible';},hush:function(){this.isSpeaking=false;this.internal.bubbleText.innerHTML='';this.internal.bubbleDiv.style.visibility='hidden';},hide:function(){this.isHidden=true;this.hush();this.internal.critterDiv.style.visibility='hidden';},play:function(animationName){this.internal.critterImg.src=this.internal.agent.animations[animationName];this.draw();},mute:function(){this.isMute=true;this.hush();},unMute:function(){this.isMute=false;},setFontColor:function(color){this.internal.bubbleText.style.color=color;},setFontSize:function(size){this.internal.bubbleText.style.fontSize=size;},setAgent:function(agent){this.internal.agent=agent;this.draw();},onClick:function(){this.hush();},onMouseIn:function(){return;},onMouseOut:function(){return;},destroy:function(){var i,prop;for(i in this.internal){if(this.internal[i].parentNode){this.internal[i].onclick=null;this.internal[i].onmousein=null;this.internal[i].onmouseout=null;this.internal[i].parentNode.removeChild(this.internal[i]);delete this.internal[i];}else
{delete this.internal[i];}}for(prop in this){if(true){this[prop]=null;delete this[prop];}}this.onClick=null;this.onMouseIn=null;this.onMouseOut=null;}};

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The BSD License

Share

About the Author

Helbrax
Web Developer
United States United States
No Biography provided

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150123.1 | Last Updated 13 Feb 2009
Article Copyright 2007 by Helbrax
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid