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.

Advanced Pop Out Chat

View previous topic View next topic Go down

Solved Advanced Pop Out Chat

Post by Zed is Not Dead on October 11th 2015, 10:36 am

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.


Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Ange Tuteur on October 12th 2015, 1:10 pm

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.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Zed is Not Dead on October 12th 2015, 4:02 pm

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

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Ange Tuteur on October 12th 2015, 4:05 pm

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

Just got to change the image though.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Zed is Not Dead on October 12th 2015, 4:11 pm

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/

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Ange Tuteur on October 12th 2015, 4:13 pm

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

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 ?

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Zed is Not Dead on October 12th 2015, 4:21 pm

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

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Ange Tuteur on October 12th 2015, 4:33 pm

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.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Zed is Not Dead on October 12th 2015, 4:38 pm

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 Very Happy

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

Solved Re: Advanced Pop Out Chat

Post by Ange Tuteur on October 12th 2015, 8:33 pm

Ah, sure no problem. ^^

Topic archived

Have a good day. Smile

Ange Tuteur
Forumaster

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

http://fmdesign.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