2014-11-04, 18:20
Tutorial: Merge followed messages of a member in ChatBox! |
Who ever got upset with a post after another in a ChatBox cast the first stone...
Well, I do not particularly like because it is a very polluted visual...
Thinking about this I developed a code that unifies the messages followed by a the same member, making a very pleasant reading, see the code below.
--> Tutorials, tips and tricks <--
Merge followed messages of a member in ChatBox!
Merge followed messages of a member in ChatBox!
1º - Javascript
In the [Javascript codes management], add as follows:
Title * : JS_ChatMSGJoin
Placement : [x] In the home page
- Code:
[panda=js]/**************************************************************************
* Module: JS_ChatMSGJoin
* Description: Join duplicate messages in Chat Box!
* Author: Made and Optimizations by JScript - 2014/11/02
* Version: Beta tester only!
***************************************************************************/
jQuery(function() {
try {
if (jQuery('#frame_chatbox').length) {
if (jQuery('object#frame_chatbox').length) {
// console.log('Replaced by JS_ChatMSGJoin');
var sHtml = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="yes" width="100%" height="100%" type="text/html" style="border: 0px;" />';
jQuery('#frame_chatbox').replaceWith(sHtml);
}
// jQuery(window).load(function() {
var ChatIframeExist = setInterval(function() {
if (document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox') !== null) {
clearInterval(ChatIframeExist);
document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox').style.display = 'none';
jQuery('#frame_chatbox').contents().find('#chatbox').after('<div id="js-chatbox" increment="10" pageincrement="0" maxpos="325" curpos="188"></div>');
// Copy entire CSS style from #chatbox to #js-chatbox id!
// Implemented by JScript...
var oStyleOrign = document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox');
var oStyleCopy = document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox');
oTarget = document.getElementById("frame_chatbox").contentWindow.getComputedStyle(oStyleOrign, "");
for (index = 0; index < oTarget.length; index++) {
oStyleCopy.style.setProperty(oTarget[index], oTarget.getPropertyValue(oTarget[index]), null);
}
document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').style.display = 'block';
document.getElementById("frame_chatbox").contentWindow.refresh_chatbox("?archives=1");
var chatbox_updated = 1,
chatbox_last_update = 0,
oTarget = jQuery('#frame_chatbox').contents().find('#chatbox > p'),
iLen = oTarget.length,
index = 0;
forNext(oTarget, index, iLen);
setInterval(function() {
try {
if (document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox_members').innerHTML !== '') {
if (!chatbox_last_update) {
document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').style.display = 'block';
}
chatbox_updated = document.getElementById("frame_chatbox").contentWindow.chatbox_updated;
chatbox_last_update = document.getElementById("frame_chatbox").contentWindow.chatbox_last_update;
if (chatbox_updated !== chatbox_last_update) {
try {
oTarget = jQuery('#frame_chatbox').contents().find('#chatbox > p');
iLen = oTarget.length;
index = 0;
forNext(oTarget, index, iLen);
document.getElementById("frame_chatbox").contentWindow.chatbox_updated = document.getElementById("frame_chatbox").contentWindow.chatbox_last_update;
} catch (e) {
// console.log(e);
}
// console.log('Changes!');
}
} else if (chatbox_last_update) {
chatbox_last_update = 0;
document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').style.display = 'none';
}
} catch (err) {
// console.log(err)
}
}, 150);
}
}, 80);
// });
}
} catch (err) {
// console.log(err)
}
});
function forNext(oTarget, index, iLen) {
for (; index < iLen;) {
var oThis = jQuery(oTarget[index]),
sHref = oThis.find('.user > a').attr('href'),
oNext = oThis.next();
if (sHref == undefined) break;
if (oNext !== undefined) {
var sHrefP = oNext.find('.user > a').attr('href');
if (sHrefP == sHref) {
oThis.find('.msg').append('<div style="border: 1px solid rgb(240, 240, 240);padding: 2px 0;"><span title="">' + oNext.find('span[title]').text() + '</span> * ' + oNext.find('.msg').html() + '</div>');
oNext.remove();
} else {
index++;
}
} else {
break;
}
}
document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').innerHTML =
document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox').innerHTML;
document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').scrollTop = 999999;
}
2º - Preview
Without the code:
With the code:
- Notice
Works under all versions and the code checks if there is already an "iframe" for ChatBox, if there is not created one!
© PunBB Design
If you have any questions related to this topic create a topic with the following title: Merge followed messages of a member in ChatBox! |