Adding chatbox to floating bar



You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1
Adding chatbox to floating bar on Wed May 18, 2011 4:45 am

Jordan


avatar
Ex-staff
Hi, what i need is a a floating toolbar at the bottom of the screen, which can open and close with showhide javascript.
WHICH IVE NOW GOT! :)

BUT, i need to have within that bar the forumotion chatbox, which will open and close with the showhide javascript too.

So what i need someone to do is; look at my codes, and then modify it so the Chatbox show/hide is within the toolbar.


Here is my floating toolbar code:
(this is will show/hide fine, this works. try it out.
Code:

<DIV style="POSITION: fixed; PADDING-BOTTOM: 10px; PADDING-LEFT: 20px; BOTTOM: -10px; PADDING-RIGHT: 1px; RIGHT: 0px; PADDING-TOP: 10px">

<A onclick="javascript:ShowHide('HiddenDiv_1')" href="javascript:;">
<DIV style="BORDER-BOTTOM: #777 2px solid; BORDER-LEFT: #777 2px solid; WIDTH: 100px; BACKGROUND: #660066; HEIGHT: 20px; BORDER-TOP: #777 1px solid; BORDER-RIGHT: #777 1px solid">
<FONT color=white size=3>Show/Hide</FONT></DIV></A>

<DIV style="DISPLAY: true" id=HiddenDiv_1>

// Floating Bar
<DIV style="POSITION: fixed; MARGIN: 0px auto; WIDTH: 100%; BOTTOM: 0px; HEIGHT: 30px; TOP: auto; RIGHT: 0px; LEFT: 0px" id=myfooter><DIV align=center>

<!-- Contents of toolbar starts here -->
<A href="/chatbox/index.forum?"><IMG title="pop up title of page" border=0 src="URL of icon"></A>


<A href="link to second forum page or social site"><IMG title="pop up title of page 2" border=0 src="URL of 2 icon"></A>

<!-- Contets of toolbar end here -->
</DIV>
</DIV>

<A onclick="javascript:ShowHide('HiddenDiv_1')" href="javascript:;">
<DIV style="BORDER-BOTTOM: #777 2px solid; BORDER-LEFT: #777 2px solid; WIDTH: 100px; BACKGROUND: #660066; HEIGHT: 24px; BORDER-TOP: #777 1px solid; BORDER-RIGHT: #777 1px solid"><FONT color=white size=3>Show/Hide</FONT></DIV></A>


<SCRIPT language=JavaScript>
function ShowHide(divId){if(document.getElementById(divId).style.display == 'none'){document.getElementById(divId).style.display='block';}else{document.getElementById(divId).style.display = 'none';}}</SCRIPT>

and the CSS part:
Code:
#myfooter{
background-image: url('http://i25.servimg.com/u/f25/16/35/08/55/backgr10.png');
background-repeat: repeat;
}
#myfooter img{
border: 2px;
margin-top: 0px;
padding-right: 20px;
}

and here is a link to the chatbox tutorial from Irian;
http://brush-land.co.cc/t218-bottom-chatbox

Basucally what i want is, my toolbar to be able to show and hide, then within my toolbar, i need the chatbox to be able to show and hide.

Thanks.

View user profile http://www.leopardgeckoforum.com

2
Re: Adding chatbox to floating bar on Fri Jun 03, 2011 10:23 am

Guest



Guest
Try this code:
Code:
<DIV style="POSITION: fixed;  BOTTOM: -10px;"><DIV style="DISPLAY: none;" id=HiddenDiv_2>
<iframe src=/chatbox width=700 height=500></iframe>
</div></center></div>
<DIV style="POSITION: fixed; PADDING-BOTTOM: 10px; PADDING-LEFT: 20px; BOTTOM: -10px; PADDING-RIGHT: 1px; RIGHT: 0px; PADDING-TOP: 10px">
<A onclick="javascript:ShowHide('HiddenDiv_1')" href="javascript:;">
<DIV style="BORDER-BOTTOM: #777 2px solid; BORDER-LEFT: #777 2px solid; WIDTH: 100px; BACKGROUND: #660066; HEIGHT: 20px; BORDER-TOP: #777 1px solid; BORDER-RIGHT: #777 1px solid">
<FONT color=white size=3>Show/Hide</FONT></DIV></A>



<DIV style="DISPLAY: true" id=HiddenDiv_1>

// Floating Bar
<DIV style="POSITION: fixed; MARGIN: 0px auto; WIDTH: 100%; BOTTOM: 0px; HEIGHT: 30px; TOP: auto; RIGHT: 0px; LEFT: 0px" id=myfooter><DIV align=center>

<!-- Contents of toolbar starts here -->
<A onclick="javascript:ShowHide('HiddenDiv_2')" href="javascript:;"><IMG title="pop up title of page" border=0 src="URL of icon"></A>


<A href="link to second forum page or social site"><IMG title="pop up title of page 2" border=0 src="URL of 2 icon"></A>

<!-- Contets of toolbar end here -->
</DIV>
</DIV>

<A onclick="javascript:ShowHide('HiddenDiv_1')" href="javascript:;">
<DIV style="BORDER-BOTTOM: #777 2px solid; BORDER-LEFT: #777 2px solid; WIDTH: 100px; BACKGROUND: #660066; HEIGHT: 24px; BORDER-TOP: #777 1px solid; BORDER-RIGHT: #777 1px solid"><FONT color=white size=3>Show/Hide</FONT></DIV></A>


<SCRIPT language=JavaScript>
function ShowHide(divId){if(document.getElementById(divId).style.display == 'none'){document.getElementById(divId).style.display='block';}else{document.getElementById(divId).style.display = 'none';}}</SCRIPT>

View previous topic View next topic Back to top  Message [Page 1 of 1]

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


Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum