Advanced Pop Out Chat

So the site I work for would like to have our pop out chat completely removed which is easy but they want a chat that pops out from the bottom via an image and expands from the corner. Now I looked all over for an example on here but I couldn't find one however I did find a site that had what they wanted. So here is a image of what I would like to have I hope that you can help.

Hi @Zed is Not Dead,

You should be able to achieve the same effect by modify the script I wrote a little while back. Go to Modules > JavaScript codes management > Create a new script

Placement : In all the pages

Code:

$(function() {
  window.$chatBoxLateral = {
    open : 'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png',
    close : 'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png',
    height : '400px',
    width : '800px',

    toggle : function() {
      var container = document.getElementById('chatbox_container').style;

      if (this.src == $chatBoxLateral.open) {
        container.width = $chatBoxLateral.width;
        container.height = $chatBoxLateral.height;
        this.src = $chatBoxLateral.close;
      } else {
        container.width = '100px';
        container.height = '0px';
        this.src = $chatBoxLateral.open;
      }
     
    }
  };

  var container = document.createElement('DIV'),
      button = document.createElement('IMG'),

      // container styles
      style = {
        height : '0px',
        width : '100px',
        position : 'fixed',
        right : '0px',
        bottom : '0px',
        zIndex : '99999',
        transition : '300ms'
      }, i;

  button.id = 'chatbox_button';
  button.src = $chatBoxLateral.open;
  button.style.position = 'absolute';
  button.style.top = '-30px';
  button.onclick = $chatBoxLateral.toggle;

  container.id = 'chatbox_container';
  container.innerHTML = '<iframe src="/chatbox" style="width:100%;height:100%;border:none;"></iframe>';
  container.insertBefore(button, container.firstChild);

  for (i in style) container.style[i] = style[i];

  document.body.appendChild(container);
});

Make sure to change the images at the top. Something that's around 30x30 should work good.

uh how come when i scroll up and down the code breaks and the image doesn't follow?

What do you mean ? It scrolls fine for me.
http://generaltesting.forumotion.com/

Just got to change the image though.

Okay I changed the image but no if you look at my site the code breaks and it slices the image in half also for whatever reason the cb image will pop out the chat but it won't retract it back in also I would like to make the image a bit wider if possible.

http://www.fairytailonline-rp.com/

Oooh.. for the button to retract the images have to have a different URL..

I think the problem may be due to the custom scroll bar on your body. Try removing that for a second to see if it does it still. As for the size of the image, how big are you thinking ?

what scroll bar is that ange? and this big



fixed the broken image part it was because this code was in it

Code:

open : 'http://i.imgur.com/K35psfT.png',
    close : 'http://i.imgur.com/WufHouL.png',
height : '450px',
    width : '1000px',
position :'fixed',
left :'30px',
   

button.style.left = '-30px';
.avatar {width: 150px !important; height: 220px !important ;}
.avatar img {width: 150px !important; height: 220px !important ;}

The custom webkit scrollbar for chrome, the bluish one on the side. I noticed when I wheel on it, everything goes wonky.

As for the image, change the 30px in this :

Code:

button.style.top = '-30px';

to 40px since your image is that tall.

the problem was this was still in the css

Code:

open : 'http://i.imgur.com/K35psfT.png',
    close : 'http://i.imgur.com/WufHouL.png',
height : '450px',
    width : '1000px',
position :'fixed',
left :'30px',
   

button.style.left = '-30px';
.avatar {width: 150px !important; height: 220px !important ;}
.avatar img {width: 150px !important; height: 220px !important ;}

why that was the issue I will never know lol but this is solved thank you ange

Ah, sure no problem. ^^

Topic archived

Have a good day.