The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Pop-Out (Sliding) Chatbox

View previous topic View next topic Go down

Solved Pop-Out (Sliding) Chatbox

Post by Bones! on July 4th 2015, 8:24 pm

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.

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by SLGray on July 4th 2015, 8:36 pm

Are you referring to the Avacweb chatbox?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35660
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! on July 5th 2015, 1:26 am

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

Would a screenshot help?

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! on July 5th 2015, 1:31 am


Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Royer Blaze on July 10th 2015, 1:55 am

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();
});
});

Royer Blaze
Forumember

Male Posts : 87
Reputation : 1
Language : English

http://thegoldendarkage.motionsforum.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! on July 10th 2015, 3:37 am

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

So how do?

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Royer Blaze on July 10th 2015, 7:48 am

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?

Royer Blaze
Forumember

Male Posts : 87
Reputation : 1
Language : English

http://thegoldendarkage.motionsforum.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! on July 10th 2015, 7:34 pm

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.

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Guest on July 17th 2015, 3:00 pm

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. Hide

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;
  }


Last edited by Helvetii on July 20th 2015, 4:03 pm; edited 1 time in total

Guest
Guest


Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Pizza Boi on July 17th 2015, 3:29 pm

Hi Very Happy

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
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by darki on July 17th 2015, 5:24 pm

@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. Smile

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Pizza Boi on July 17th 2015, 5:58 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! on July 18th 2015, 3:29 am

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.)

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by SLGray on September 18th 2015, 3:44 am

Moved from the Garbage


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35660
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! on September 18th 2015, 3:45 am

Bumping, hoping someone figured out the transition code.

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Zed is Not Dead on September 18th 2015, 4:34 pm

In all honesty I wouldn't mind knowing this aswell

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Ange Tuteur on September 18th 2015, 4:53 pm

Hey @Kaseki,

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

Anyway, I don't know if you're using the toolbar, but I published this tutorial recently :
http://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. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! on September 18th 2015, 8:24 pm

@Ange Tuteur wrote:Hey @Kaseki,

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

Anyway, I don't know if you're using the toolbar, but I published this tutorial recently :
http://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. Smile
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.

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Zed is Not Dead on September 18th 2015, 8:42 pm

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

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Ange Tuteur on September 18th 2015, 9:08 pm

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. Razz 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. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! on September 18th 2015, 9:14 pm

Yes, thank you. This is splendid.

Now to change the speed at which is slides~

Which I'll play around myself. Thank you!

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by SLGray on September 18th 2015, 9:15 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35660
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum