How Can I Make This Chatbox V2.0 On The Left Side

Dec

2011

I Was trying To Put Chatbox V2.0 Chatbox On The Left Side But I Cant Get It To Work Here's The Link I Found It At: /t88458-how-to-create-a-pop-out-chat-box-v20

And I Did Everything To Do But I Just need Some Help Please

1 kirk, on 06/12/2011 at 10h33

well in the code you will have to change where it says border-left: to border-right:

Then down where it says position: fixed; bottom: 0pt; right: you will have to change to position: fixed; bottom: 0pt; left:

and that should do it, however let me see what code you have, because i adjusted the one i am using a little bit.

2 Mr DarkHaxers2, on 06/12/2011 at 16h21

Ok Here's The Code:

Code:: var cb_new=1; var cbmp3='http://bit.ly/rupblD'; jQuery(document).ready(function(){ jQuery('body').append('<span id="cbalarm"></span>'); }); jQuery('body').append('<div style="border-top: 7px solid #000000;border-left: 7px solid #000000; border-radius: 20px 0 0 0; z-index: 10000; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; background-color: #FFFFFF; position: fixed; bottom: 0px; right: 0px;" onMousever="stopINT()" onClick="stopINT()" onClick="stopINT()" onMouseOut="stopINT()" id="chatbox_ret_cont"><div style="font-size: 12px; font-family: \'trebuchet ms\', serif; cursor: pointer; padding: 3px;" onClick="(document.getElementById(\'chatbox_ret\').style.display==\'block\')?my_setcookie(\'chatbox_ret\',\'0\',0,0):my_setcookie(\'chatbox_ret\',\'1\',0,0); jQuery(\'#chatbox_ret\').toggle(\'normal\');"><span style="color:black" id="chat1"><font color= #000000>ChatBox</font></span><span id="chat2"></span></div><iframe src="/chatbox/index.forum" id="chatbox_ret" name="chatbox_ret" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="width: 740px; height: 400px; display: none;" onLoad="if(cb_new) { cb_start(); cb_new=0; }"></iframe></div>') if(parseInt(my_getcookie('chatbox_ret'))==1) document.getElementById('chatbox_ret').style.display='block'; if(!document.getElementById('i_icon_mini_login')){var oldCCB;var oldDCB;var pageTitle=document.title; var INTCB;function stopINT(){ if(INTCB!=undefined){clearInterval(INTCB);document.title=pageTitle;} return true;} function checkCB(){ if(parent.chatbox_ret.connected){ if(parent.chatbox_ret.document.getElementById('chatbox_members').childNodes.length==2) { if(parent.chatbox_ret.document.getElementById('chatbox_members').childNodes[0].className=='member-title away') { document.getElementById('chat1').innerHTML="Chat";document.getElementById('chat2').innerHTML="<font color= #000000>Box</font>"; } else { document.getElementById('chat2').innerHTML="<font color= #000000>Box</font>";document.getElementById('chat1').innerHTML="Chat"; } } else if(parent.chatbox_ret.document.getElementById('chatbox_members').childNodes.length>2) { document.getElementById('chatbox_ret_online').innerHTML=parent.chatbox_ret.document.getElementById('chatbox_members').childNodes[1].childNodes.length;document.getElementById('chatbox_ret_offline').innerHTML=parent.chatbox_ret.document.getElementById('chatbox_members').childNodes[5].childNodes.length; } parent.chatbox_ret.document.getElementById('refresh_auto').checked=true; var newDCB= parent.chatbox_ret.document.getElementById('chatbox').childNodes[ parent.chatbox_ret.document.getElementById('chatbox').childNodes.length-1].firstChild.innerHTML; if(newDCB!=oldDCB){oldDCB=newDCB;var newCCB= parent.chatbox_ret.document.getElementById('chatbox').childNodes[ parent.chatbox_ret.document.getElementById('chatbox').childNodes.length-1].childNodes[2].innerHTML; stopINT();if(newCCB!=oldCCB){ oldCCB=newCCB; jQuery('#cbalarm').html('<object id="cbalarm" type="application/x-shockwave-flash" data="http://tinyurl.com/minidew-fa" width="0" height="0" style="visibility:hidden"><param name="movie" value="http://tinyurl.com/minidew-fa" /><param name="flashvars" value="mp3='+cbmp3+'&autoplay=" /></object>');INTCB=setInterval("document.title=(document.title==pageTitle)?'':pageTitle;",500); setTimeout('stopINT()',300000);}}}else { stopINT();}} function cb_start() { if(parent.chatbox_ret.connected) { oldDCB= parent.chatbox_ret.document.getElementById('chatbox').childNodes[ parent.chatbox_ret.document.getElementById('chatbox').childNodes.length-1].firstChild.innerHTML;oldCCB= parent.chatbox_ret.document.getElementById('chatbox').childNodes[ parent.chatbox_ret.document.getElementById('chatbox').childNodes.length-1].childNodes[2].innerHTML; } else { oldDCB=''; oldCCB=''; } setInterval('checkCB()',1000); parent.chatbox_ret.onfocus= parent.chatbox_ret.onkeypress= parent.chatbox_ret.onclick= parent.chatbox_ret.onblur=stopINT;}}

3 xiaohong, on 20/12/2011 at 10h20

Content Removed - Member Banned

4 kirk, on 20/12/2011 at 12h35

where did you get that code, it's not even working on my test forum,
You have the wrong code, i will have to re-modify my code to what you want,
So you want the tab to be black border,white background and black text,
then on the left hand side of the forum right. Smile

here you go, dunno where you got that code above but it dose not work,
(to much code/jquery thats not needed) shakng2

It wont come up at all if you add to a java page and in a template it shows a lot of the text code along with the chat tab, but dose not open? dunno

Anyway place this code at the very top of either in your overall header template or the footer template.. hit save then be sure to go back and click publish.

This is the best i could get it, you can always adjust the code to your liking as well Smile

like if you want the tab a lil bigger or something?

Code:: <div id="chatbox_ret_cont" onmouseout="" onclick="" onmousever="" style="border-top: 7px solid rgb(148, 11, 11); border-right: 5px solid rgb(148, 11, 11); z-index: 10000; -moz-border-radius: 20px 0pt 0pt 0pt; background-color: #FFFFFF; position: fixed; bottom: 0pt; left: 0pt; border-color: #000000;"><div onclick="(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); $('#chatbox_ret').toggle('normal');" style="font-size: 12px; font-family: 'trebuchet ms',serif; cursor: pointer; padding: 3px;"><span id="chatbox_ret_online" style="color: black;"></span><span id="chatbox_ret_offline" style="color: black;">chat box</span></div><iframe scrolling="no" frameborder="1" onload="if(cb_new) { cb_start(); cb_new=0; }" style="width: 1125px; height: 550px; display: none;" marginheight="0" marginwidth="0" name="chatbox_ret" id="chatbox_ret" src="/chatbox/index.forum"></iframe></div>

Oh you might want to change the width: 1125px; height: 550px,
As you will see i have mine 1125px - 550px and opens very large, so just change the width and height to what you like.

5 Rideem3, on 20/12/2011 at 13h04

The code above does work, however you must follow te instructions in the topic. The excessive jQuery is used to determine id's and when you receive a message sound will play along with a window bar title saying new message.

6 Mr DarkHaxers2, on 20/12/2011 at 20h12

I DOnt Like The Sound Its Annoying

7 Rideem3, on 20/12/2011 at 20h46

A new smoother chatbox is in development so if you don't want the sound, I'll post the code to just the v1.5 chatbox later. Wink

8 Mr DarkHaxers2, on 20/12/2011 at 21h25

9 Rideem3, on 20/12/2011 at 21h42

Follow every step, except put this in the HTML page:

Code:: jQuery('body').append('<div style="border-top: 7px solid COLORHERE;border-right: 7px solid COLORHERE; border-radius: 0 20px 0 0; z-index: 10000; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; background-color: COLORHERE; position: fixed; bottom: 0px; left: 0px;" onMousever="stopINT()" onClick="stopINT()" onClick="stopINT()" onMouseOut="stopINT()" id="chatbox_ret_cont"><div style="font-size: 12px; font-family: \'trebuchet ms\', serif; cursor: pointer; padding: 3px;" onClick="(document.getElementById(\'chatbox_ret\').style.display==\'block\')?my_setcookie(\'chatbox_ret\',\'0\',0,0):my_setcookie(\'chatbox_ret\',\'1\',0,0); jQuery(\'#chatbox_ret\').toggle(\'normal\');"><span style="color:black">ChatBox</span></div><iframe src="/chatbox/index.forum" id="chatbox_ret" name="chatbox_ret" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="width: 740px; height: 400px; display: none;" onLoad="if(cb_new) { cb_start(); cb_new=0; }"></iframe></div>')

10 ioncube, on 20/12/2011 at 21h54

Code:: onLoad="if(cb_new) { cb_start(); cb_new=0; }"

can you make me understand whats this ^

11 Rideem3, on 20/12/2011 at 21h55

It's for the iFrame... it's not really important to know, it's just needed.

12 Mr DarkHaxers2, on 20/12/2011 at 23h36

Rideem3 wrote:Follow every step, except put this in the HTML page:

Code:
jQuery('body').append('<div style="border-top: 7px solid COLORHERE;border-right: 7px solid COLORHERE; border-radius: 0 20px 0 0; z-index: 10000; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; background-color: COLORHERE; position: fixed; bottom: 0px; left: 0px;" onMousever="stopINT()" onClick="stopINT()" onClick="stopINT()" onMouseOut="stopINT()" id="chatbox_ret_cont"><div style="font-size: 12px; font-family: \'trebuchet ms\', serif; cursor: pointer; padding: 3px;" onClick="(document.getElementById(\'chatbox_ret\').style.display==\'block\')?my_setcookie(\'chatbox_ret\',\'0\',0,0):my_setcookie(\'chatbox_ret\',\'1\',0,0); jQuery(\'#chatbox_ret\').toggle(\'normal\');"><span style="color:black">ChatBox</span></div><iframe src="/chatbox/index.forum" id="chatbox_ret" name="chatbox_ret" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="width: 740px; height: 400px; display: none;" onLoad="if(cb_new) { cb_start(); cb_new=0; }"></iframe></div>')

Where Do i Put This At

13 Rideem3, on 20/12/2011 at 23h45

In the HTML page.

14 Mr DarkHaxers2, on 21/12/2011 at 00h49

but i want the left side chatbox

15 Rideem3, on 21/12/2011 at 00h50

The code I gave you puts it on the left side.

16 Mr DarkHaxers2, on 21/12/2011 at 00h53

Thanks

17 Sanket, on 21/12/2011 at 05h05

Topic Solved & Locked