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.

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

<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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.