Pop-Out (Sliding) Chatbox

I've seen it before, and I've done similar things, yet I cannot find the code for it.

I know there's a script to create a Pop-Up Chatbox, but the one I'm looking for slides in from the right side of the site. It has the button you can click (And GFX to make a different button). 

So... Anyone know where it sits on this site? I've been lookin' for just over an hour now, to no avail.

Are you referring to the Avacweb chatbox?

No. It's a widget that clones the Forumotion one, and turns it into some pop-out chatbox.

Would a screenshot help?

This is what I use for mine, if you put it in your Javascript code management. I named mine Pop-up Chatbox, and you can set it for every page.

Code:

jQuery(document).ready(function(){
jQuery('body').append('<span id="chatButton" title="Open/Close Chatbox">Open Chat</span><div id="chatBox"><iframe src="/chatbox/index.forum"></iframe></div>');
jQuery('#chatBox').hide();
jQuery('#chatButton').css('position', 'fixed').css('right', '0px').css('bottom', '0px');
jQuery('#chatBox iframe').css('position', 'fixed').css('right', '10px').css('bottom', '45px');
if(!document.getElementById('logout')){
jQuery('#chatButton').hide();
jQuery('#chatBox').hide();}
jQuery('#chatButton').click(function(){
jQuery('#chatBox').fadeToggle();
});
});

It's nice, but I want it to slide from the side all fancy like.

So how do?

Looking closer at your images I see what you mean now, I thought you was wanting a box at the bottom to click on and it pop up.

Perhaps a variation of what I posted? Can anyone else help him with this?

I had similar codes to what you had gave me, but for some reason the ones that just appear always have some weird format issue with my main site... yet works perfectly on my other forums.

I found this link with the possibility to create a draggable box, because I am trying to do it too. However I am not good at scripting so I don't know how to implement it correctly.  

http://jsfiddle.net/dX8N3/

Code:

var div = $('#resizable');
div.resizable(
    {
        stop: function(event, ui)
        {                        
            var top = getTop(ui.helper);
            ui.helper.css('position', 'fixed');
            ui.helper.css('top', top+"px");            
        }        
    });
    div.draggable(
    {
        stop: function(event, ui)
        {            
            var top = getTop(ui.helper);
            ui.helper.css('position', 'fixed');
            ui.helper.css('top', top+"px");
        }
    });
    function getTop(ele)
    {
        var eTop = ele.offset().top;
        var wTop = $(window).scrollTop();
        var top = eTop - wTop;
        
        return top;    
    }

Hi

Add this in your General Templates < overall_header:

Code:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:10000; "><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 950px; height: 350px; display: none; float:right;box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);margin-left: 6px; -moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="cursor :pointer; float:left; box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;  padding: 6px 3px 6px 3px; position:relative; top:120px;"><img src="http://i.imgur.com/KQBvsFY.png" id="chatboxopen"><img src="http://i.imgur.com/GVa6Z5S.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>


Regards,
Pizza Boi

@Pizza Boi Althoug I don't have asked for that, I have seen this fortunately and I am using it now in my forum.
I only modified it with deleting the images and adding text with css sytle (font, color...). With the shadow it looks great.

Hi

Oh, well I was giving you something that you specified as to what you liked. I'm sorry if I got it wrong.

Regards,
Pizza Boi

Once again that is a toggle code. I'm trying to find one that animates and slides in and out from the side.

(Though that does look really nice too.)

Bumping, hoping someone figured out the transition code.

In all honesty I wouldn't mind knowing this aswell

Hey @Kaseki,

I apologize for the late reply. Things have been hectic..

Anyway, I don't know if you're using the toolbar, but I published this tutorial recently :
https://help.forumotion.com/t143414-add-the-chatbox-to-your-toolbar

If that's not going to work, I should be able to write something up. Let me know.

Ange Tuteur wrote:Hey @Kaseki,

I apologize for the late reply. Things have been hectic..

Anyway, I don't know if you're using the toolbar, but I published this tutorial recently :
https://help.forumotion.com/t143414-add-the-chatbox-to-your-toolbar

If that's not going to work, I should be able to write something up. Let me know.

This is helpful, but still isn't the thing I asked. (Though that is helpful, and I might have to use that as well.)

I'm like 90% what I'm looking for is a Javascript that allows the chatbox to "slide" from the right of the web browser. It's the FM chatbox, and not some third party thing, so... I'm not exactly sure how else to explain it, other than that I know it's possible, as other forums that use Forumotion use it.

Maybe I can help clarify it. He would like a pop out chatbox window in which it has a tab of an image of his choice which will say Open Chat horizontally against the vertical end of the scroll bar to navigate through the page. Once clicked on the chat box will slide out from the right to left and has a tab on the end of it that now says close chat with another image of his choosing. All with the Forumotion Chat box. In all honesty I think it uses both CSS, Template, and Java Script. Because it seems like a hover over code but that is just me but hoped I helped to clarify

Don't worry, I know what you were talking about, so I wrote up a little fallback. ^^

Go to Modules > JavaScript codes management > Create a new script

Placement : All pages, or your chocie

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;
        this.src = $chatBoxLateral.close;
      } else {
        container.width = '0px';
        this.src = $chatBoxLateral.open;
      }
     
    }
  };

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

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

  button.id = 'chatbox_button';
  button.src = $chatBoxLateral.open;
  button.style.position = 'absolute';
  button.style.left = '-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);
});

There's some simple config at the top :

Code:

    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',

open : The URL of the open image
close : The URL of the close image
You may want to change those since I took the images from a similar tutorial in french. If you make the images greater or less than 30px wide you'll need to edit this part with the new width, but make sure to keep the minus :

Code:

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

height : The height of the chatbox
width : The width of the chatbox

I think that's pretty much it. If any questions let me know.

Yes, thank you. This is splendid.

Now to change the speed at which is slides~

Which I'll play around myself. Thank you!