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