hey
could someone explain how you could make the facebook presence bar with the chat tabs(structure only not back end) [IMG]http://img199.imageshack.us/img199/8696/barbao.png[/IMG]
i got a link to a Gmail like chat tab http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/ but couldn't figure out how to fit it onto a fixed bar.
I'm intermediate at HTML and CSS but haven't learned JavaScript that much
thanks for the help.
found another article http://zharmin.blogspot.com/2007/06/floating-bar-using-css.html
anyone got any soltions
http://gausarts.com/iblog/create-facebook-chat-panel-your-own-website
this is for drupal i think but its still relevant, all the css is there. There are also some good links on that page to similar projects.
that really helps thanks
Is it fixed? If not then get a facebook copy script and steal the bottom bit.
No worries bro :D hope you got what you wanted out of it.
hey ive coded thismuch so far
![[IMG]](http://img199.imageshack.us/i/barbao.png/){kind=link}
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
$(".toggleup").click(function(){
$("#chat").slideToggle("slow");
$(this).toggleClass("toggledown"); return false;
});
</script>
<style>
/********************************/
/* DOCKBOTTOMS REGIONS */
/********************************/
#dockbottoms {
position:fixed;
bottom:0;
clear:both;
width:90%;
padding:2px 0 0;
border:1px solid #999;
border-bottom:0;
background-color:#fff;
z-index:11000;/*Allow layering*/
margin: auto;
}
#dockbottoms-inner {
float:left;
width:100%;
height:35px;
padding:0;
position:relative;
background-color:#ccc;
}
/*Reset defaults in the narrow space*/
#dockbottoms-inner .block {
padding-bottom:0;
margin-bottom:0;
padding-top:5px;/*Match .slider for chat*/
}
#dockbottoms-inner #dockbottom-first {
margin-left:15px
}
/* Dockbottoms regions
* first | middle | last
---------------------------*/
#dockbottoms-inner.dockbottoms-1 .column {
float:left;
width:100%
}
#dockbottoms-inner.dockbottoms-2 .column {
display:block;
float:left;
margin:0 14px;
width:47%
}
#dockbottoms-inner.dockbottoms-3 .column {
display:block;
float:left;
margin:0 14px;
width:30%
}
/*Chat block sample, adjust everything here*/
#chat-wrapper {
width:160px;
position:absolute;
bottom:5px;
right:16px;
z-index:11002;/*value above #dockbottoms-inner*/
text-align:center;
border:1.5px solid #ADADAD
}
#chat {
height:500px;
background-color:#E8E9ED;
text-align:left;
display:none;/*hide the chat block, let jquery toggles*/
}
.slider {
position:relative;
z-index:11003;/*value above #chat*/
height:28px;
padding:0;
background-color:#E8E9ED;
margin-top:-5px;/*Match #dockbottoms-inner .block */
}
/*Add image if necessary, such close or open buttons*/
.toggleup,.toggledown {
text-align:center;
display:block;
line-height:22px;
background-color:#E8E9ED;/*Match .slider*/
}
/*Menu links in the dock. Correct disturbing stuffs from system*/
#dockbottoms li.collapsed,#dockbottoms li.leaf {
list-style-image:none;
list-style-type:none;
margin:0;
padding:0.2em 0.5em 0 0
}
#dockbottoms ul.menu {
list-style-position:inside
}
</style>
</head>
<body>
<div id="dockbottoms">
<div id="dockbottoms-inner" class="dockbottoms-3 clearfix">
<div id="dockbottom-first" class="column">
<div id="block-author_pane-0" class="block block-author_pane region-odd odd region-count-1 count-9 block-inner content author-pane author-pane-inner">
<div class="author-pane-name-status author-pane-section">
<div class="author-pane-line author-name">Gaus Surahman</div>
<div class="picture"><img src="http://dev.gausarts.com/sites/dev.gausarts.com/files/imagecache/avatar/sites/dev.gausarts.com/files/pictures/picture-3.jpg" alt="" title=""></div>
<div class="author-pane-line author-pane-online"><span class="author-pane-online-icon"><img src="/sites/all/modules/author_pane/images/user-offline.png" alt="User offline. Last seen 12 weeks 2 days ago." title="User offline. Last seen 12 weeks 2 days ago." width="16" height="16"></span> <span class="author-pane-online-status">Offline</span></div>
</div>
<div class="author-pane-stats author-pane-section">
<div class="author-pane-line author-joined"><span class="author-pane-label">Joined:</span> 05/09/2009</div>
<div class="author-pane-line author-posts"><span class="author-pane-label">Posts:</span> 36</div>
</div>
<div class="author-pane-admin author-pane-section"></div>
<div class="author-pane-contact author-pane-section"></div>
</div>
</div>
<div id="dockbottom-middle" class="column">
<div id="block-system-0" class="block block-system region-odd even region-count-1 count-10 block-inner content"><a href="http://drupal.org"><img src="/misc/powered-blue-80x15.png" alt="Powered by Drupal, an open source content management system" title="Powered by Drupal, an open source content management system" width="80" height="15"></a></div>
</div>
<div id="dockbottom-last" class="column">
<div id="block-block-1" class="block block-block region-odd odd region-count-1 count-11">
<div class="block-inner content" id="chat-wrapper">
<div id="chat"><object type="application/x-shockwave-flash" data="http://widget.meebo.com/mm.swf?xsWyJwDhKU" width="160" height="250"><param name="movie" value="http://widget.meebo.com/mm.swf?xsWyJwDhKU">
<param name="quality" value="high">
<param name="wmode" value="transparent"></object></div>
<div class="slider"><a href="#" class="toggleup">Chat with Me</a></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>but turns out like this [IMG]http://img21.imageshack.us/img21/2600/55277323.png[/IMG]
please help
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
![[IMG]](http://img21.imageshack.us/i/55277323.png/){kind=link}