The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Pop-Out (Sliding) Chatbox

+3
Royer Blaze
SLGray
Bones!
7 posters

Go down

Solved Pop-Out (Sliding) Chatbox

Post by Bones! 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!
Bones!
Forumember

Posts : 173
Reputation : 20
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 July 4th 2015, 8:36 pm

Are you referring to the Avacweb chatbox?


Pop-Out (Sliding) Chatbox Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! 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!
Bones!
Forumember

Posts : 173
Reputation : 20
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! July 5th 2015, 1:31 am

Bones!
Bones!
Forumember

Posts : 173
Reputation : 20
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 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
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! 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!
Bones!
Forumember

Posts : 173
Reputation : 20
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 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
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! 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!
Bones!
Forumember

Posts : 173
Reputation : 20
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 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
avatar
Guest
Guest


Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Pizza Boi 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
Pizza Boi
Hyperactive

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

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by darki 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
avatar
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 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
Pizza Boi
Hyperactive

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

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! 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!
Bones!
Forumember

Posts : 173
Reputation : 20
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 September 18th 2015, 3:44 am

Moved from the Garbage


Pop-Out (Sliding) Chatbox Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

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

Bumping, hoping someone figured out the transition code.
Bones!
Bones!
Forumember

Posts : 173
Reputation : 20
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 September 18th 2015, 4:34 pm

In all honesty I wouldn't mind knowing this aswell
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Ange Tuteur 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 :
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. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! 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 :
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. 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!
Bones!
Forumember

Posts : 173
Reputation : 20
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 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
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Pop-Out (Sliding) Chatbox

Post by Bones! 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!
Bones!
Forumember

Posts : 173
Reputation : 20
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 September 18th 2015, 9:15 pm

Topic solved and archived


Pop-Out (Sliding) Chatbox Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


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