MS Agent style class for Web Pages. Uses javascript and (x)html only. No Active-X or other plug-ins required.
I recently needed a way to communicate with the users of a web page via a somewhat "interactive" manner, without using flash or java. Alert boxes were simply too obtrusive. I thought about MS Agent, but then it would only be compatible with IE. So I decided to build my own that would, in part, mimic the functionality of MS Agent, but be as cross-browser as possible.
The class itself is pretty easy to use. You supply your own image and small adjustments to make sure everything goes where you want it.
<script src="jcritter.js" type="text/javascript"></script>
<script type="text/javascript">
var newCritter;
window.onload = function()
{
var monkey =
{
width: 128,
height: 128,
src: 'monkey.gif',
adjustTop: 15,
adjustLeft: 20,
speechTop: 45,
speechLeft: 65
}
myCritter = new JCritter(monkey);
myCritter.draw();
myCritter.show();
}
</script>You can also use the jcritter-mini.js or jcritter-micro.js. jcritter-mini.js is a minimized version, with comments and white spaces removed. jcritter-micro.js is an extremely compact version and the code is obfuscated slightly. jcritter-mini.js and jcritter-micro are about half to one third the size of the original jcritter.js.
JCritter.version: Display JCritter version JCritter.isHidden: Boolean value. Shows current display state of the critter JCritter.isSpeaking: Boolean value. Shows current speaking state of the critter JCritter.drawAgent(): Draws the agent on the screen. Shouldn't need to use it JCritter.drawBalloon(): Draws the ballon on the screen. Shouldn't need to use it JCritter.draw(): Draws both the balloon and critter. Use it after creation or to realign your critter JCritter.say(text, alignment): Shows the balloon and says the desired text. alignment is optional and can be any valid css 'text-alignment' value. If say is called with no arguments, the contents of the balloon are returned. JCritter.hush(): Removes the balloon. JCritter.show(): Show critter. JCritter.hide(): Hides critter and balloon. JCritter.mute(): Mutes critter. Critter will ignore say method until unMute is called JCritter.unMute(): Unmutes critter JCritterdestroy(): Destroys critter object. You'll probably want to call this on your body's onunload event. JCritter.play(animationName): Switches the current image to the image specified by the animation name. Used with animated gifs, you can provide your own ad-hoc animations. JCritter.setFontSize(size): Sets the font size JCritter.setFontColor(color): Sets the font color JCritter.setAgent(agent) : Sets the current agent to agent. All Events can be set using the standard javascript method:
object.eventname = function()
{
//do stuff
}
JCritter.onClick: Called when the critter is clicked. JCritter.onMouseIn: Called when the mouse enters the critters boundaries. JCritter.onMouseOut: Called when the mouse moves outside the critter boundaries. It's possible to add your own custom critter images, rather than using the default image that comes with the script. Since it's impossible to determine the exact placement of the speech bubble, outside the square boundary of the image itself, several options have been provided to allow you to "fine tune" the placement of the balloon. All of these adjustments are relative to the top left corner of the critter. You create an javascript object with the properties, and pass it to the JCritter constructor.
//Add your own custom critters!
var penguin =
{
width: 112,
height: 112,
src: 'penguin.gif',
adjustTop: 15,
adjustLeft: 20,
speechTop: 25,
speechLeft: 65
animations:
{
animation_name: 'animation_image.gif'
}
}
width: The width of your critter. height: The height of your critter. src: The image source of your critter. adjustTop: Adjustment of your critter from the top of the viewing area. adjustLeft: Adjustment of your critter from the left of the viewing area. speechTop: Adjustment of your balloon from the top of your critter. speechLeft: Adjustment of your balloon from the left of your critter. animations: An object containing a list of animation name and an image to coincide with that animation. If you supply numerous gif images(probably animated), you can fake some animation. The big drawback to this is that javascript is not capable of knowing when an animation "ends". Because of this, you will want to be careful using looping animations, and your animations should return to the default image you want to display when your critter is idle.
animations:
{
name: imagesrc,
name2: imagesrc,
name3: imagesrc
}
...
JCritter.play('name3');
The first thing we must do is create our divs that will hold the elements we work with. We will be using five divs. The first div will contain divs 2-4. It will hold the bubble image and a div for the text image. The last div will contain the image of the agent or critter that will be speaking.
As you can see, the bubble image is much large than what we need. This is to accommodate large amounts of text. In order to accomplish this, we use a technique called "sliding doors". Using css, we will set the background image of the red and green divs to the top and bottom of the bubble image, respectively.
//the top bubble in red
bubbleTop.style.background = 'url(bubble.gif) no-repeat top';
bubbleTop.style.padding = '25px 8px 0px';
//the bottom bubble in green
bubbleBottom.style.background = 'url(bubble.gif) no-repeat bottom';
bubbleBottom.style.padding = '35px 8px 0px';
You'll notice the bubble is now complete, but there is no text. We need to have a div between the top and bottom with a bit of padding on the left and right.
//the bubble text in blue
bubbleText.style.paddingLeft = '10px';
bubbleText.style.paddingRight = '10px';
Now the only real issue left is positioning. The critter/agent needs to be placed in the bottom left corner of the view port. Unfortunately, there is no built in mechanism to get the view port of a browser window, so after searching the web a bit, I managed to find some code that will identify this allusive property.
//the width of the viewport
window.innerWidth || (document.documentElement.clientWidth || (document.body.clientWidth || 0));
//the height of the viewport
window.innerHeight || (document.documentElement.clientHeight || (document.body.clientHeight || 0));
If all of our checks fail, we'll return an x and y of 0. This isn't ideal, but it's better than returning nothing, which will certainly break the script.
Now that we know the width and height of our view port, we can subtract the width and height of our critter/agent. This will allow us to place it in the corner of the screen. We have to add a few cosmetic pixels here or there to position it as desired. Once the critter/agent is in place, the word balloon can be positioned. The default positioning is relative to the top left corner of the div that contains the critter/agent. Since it's impossible to automatically know what our image looks like(where the mouth is, etc), we adjust our balloon using the speechLeft and speechTop options specified when we created our agent.
Once everything is positioned, we just need to set the properties of our two "master" divs to hidden/visible whenever we need to show/hide the critter/agent or the speech balloon.
Firefox 
Internet Explorer 7 
Internet Explorer 6 
Opera 
Safari 
Konqueror 'fixed' property. As a result, whenever the script detects that the user is using the IE6 browser, it will change the position to absolute, and add the draw() method to the window.onscroll callback.draw() method again to realign your critter.| You must Sign In to use this message board. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
