Bubble Chat

[Wormopolis]

Browsers Tested: IE and FF
placement: global or board footer

This code will alternate the MP on each side of the post, as well as add a "bubble" image around the post contents.

I highly recommend getting someone to replace the bubble images since Im not very good with making them.. but I tried. images will need to be transparent, and there are 4 regular corners, 2 alternate corners, 4 straight pieces, and 2 tails.


<style type="text/css">
/*  found at http://stackoverflow.com/questions/1309055/cross-browser-way-to-flip-image-via-javascript-css */
.flip-horizontal {
   -moz-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: fliph; /*IE*/
}
</style>

<script type="text/javascript">
<!--
//  bubble chat system 1.1
//  by Wormopolis - www.wormocodes.com
//  request by
//  do not repost - keep header intact

var flipAvatarRightSide=true;  //set true to flip avatar horizontally when mp is on right
var useBubbles=true;  //set true to surround post with bubble image

//  these are the images for the line around the bubble
var bubble_topleft="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/topleft_bubble.png";
var bubble_top="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/top_bubble.png";
var bubble_topright="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/topright_bubble.png";
var bubble_left="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/left_bubble.png";
var bubble_right="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/right_bubble.png";
var bubble_bottomleft="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/bottomleft1_bubble.png";
var bubble_bottom="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/bottom_bubble.png";
var bubble_bottomright="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/bottomright_bubble.png";

// these are the alternate bottom corner images for mp on right side
var alternate_bottomleft="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/bottomleft2_bubble.png";
var alternate_bottomright="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/bottomright2_bubble.png";

//these are the pointy tail images of the bubble
var tail_leftside="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/bottomlefttail_bubble.png";
var tail_rightside="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/bottomrighttail_bubble.png";

if (pb_action=='display') {
 var sToggle=0;
 for (tds=document.getElementsByTagName('td'), tt=0; tt<tds.length; tt++) {
   if (tds[tt].width=='20%' && tds[tt].className.match(/windowbg/) && tds[tt].vAlign=='top' && tds[tt].parentNode.style.display!='none' && !tds[tt].parentNode.className.match('skippy')) {
     var bubbleTable=document.createElement('table');  bubbleTable.cellSpacing='0';
     bubbleTable.style.width=bubbleTable.style.height='100%';
     var topBubbleRow=bubbleTable.insertRow(-1);
     var middleBubbleRow=bubbleTable.insertRow(-1);
     var bottomBubbleRow=bubbleTable.insertRow(-1);

     topBubbleRow.insertCell(0);
     topBubbleRow.cells[0].style.width=48;
     topBubbleRow.cells[0].style.height=48;
     topBubbleRow.cells[0].style.backgroundImage='url('+bubble_topleft+')';
     topBubbleRow.insertCell(-1);
     topBubbleRow.cells[1].style.backgroundImage='url('+bubble_top+')';
     topBubbleRow.cells[1].style.backgroundRepeat="repeat-x";
     topBubbleRow.insertCell(-1);
     topBubbleRow.cells[2].style.width=48;
     topBubbleRow.cells[2].style.backgroundImage='url('+bubble_topright+')';
     
     middleBubbleRow.insertCell(0);
     middleBubbleRow.cells[0].style.backgroundImage='url('+bubble_left+')';
     middleBubbleRow.cells[0].style.backgroundRepeat="repeat-y";
     middleBubbleRow.insertCell(-1);
     middleBubbleRow.cells[1].id='postData'+tt;
     var tmpHolder=middleBubbleRow.cells[1];
     middleBubbleRow.insertCell(-1);
     middleBubbleRow.cells[2].style.backgroundImage='url('+bubble_right+')';
     middleBubbleRow.cells[2].style.backgroundRepeat="repeat-y";
     
     bottomBubbleRow.insertCell(0);
     bottomBubbleRow.cells[0].style.height=48;
     bottomBubbleRow.cells[0].style.backgroundImage='url('+(sToggle==0 ? bubble_bottomleft : alternate_bottomleft)+')';
     bottomBubbleRow.insertCell(-1);
     bottomBubbleRow.cells[1].style.backgroundImage='url('+bubble_bottom+')';
     bottomBubbleRow.cells[1].style.backgroundRepeat="repeat-x";
     bottomBubbleRow.insertCell(-1);
     bottomBubbleRow.cells[2].style.backgroundImage='url('+(sToggle==0 ? bubble_bottomright : alternate_bottomright)+')';
     
     var tailcell=topBubbleRow.insertCell( (-1*sToggle) );  tailcell.rowSpan=3;
     tailcell.style.width='48';
     tailcell.style.backgroundImage='url('+(sToggle==0 ? tail_leftside: tail_rightside)+')';
     tailcell.style.backgroundRepeat='no-repeat';  tailcell.style.backgroundPosition='center bottom';

     var postcell=tds[tt].nextSibling, mpcell=tds[tt];
     var postRow=tds[tt].parentNode;
     postRow.parentNode.parentNode.cellPadding=postRow.parentNode.parentNode.cellSpacing='0';
     avImage=mpcell.getElementsByTagName('center')[0].firstChild;
     if (avImage.nodeName.match(/img/i) && flipAvatarRightSide && sToggle==1) avImage.className+=' flip-horizontal';
     var postContents=postcell.firstChild.rows[1].cells[0];
     postContents.style.height='100%';
     if (useBubbles) {
       while (postContents.childNodes.length>1) {
         tmpHolder.appendChild(postContents.firstChild.nextSibling);
       }
       postContents.replaceChild(bubbleTable, postContents.firstChild);
     }
     var nwtbl=document.createElement('table');
     nwtbl.cellSpacing='1'; nwtbl.cellPadding='0' ;nwtbl.width='100%';
     nwtbl.insertRow(0);  nwtbl.rows[0].className='skippy';
     if (sToggle==0) {
       nwtbl.rows[0].appendChild(mpcell);
       nwtbl.rows[0].appendChild(postcell);
       sToggle=1;
     } else {
       nwtbl.rows[0].appendChild(postcell);
       nwtbl.rows[0].appendChild(mpcell);
       sToggle=0;
     }
     postRow.insertCell(0);  postRow.cells[0].colSpan=2;
     postRow.cells[0].appendChild(nwtbl);      
   }
 }
}

// -->
</script>