Member Avatar for bittuthegr8

hey
could someone explain how you could make the facebook presence bar with the chat tabs(structure only not back end) [IMG][/IMG]

i got a link to a Gmail like chat tab 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.

  • 3 Contributors
  • 6 Replies
  • 233 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by bittuthegr8

Dani AI

Generated

Short answer and immediate fix:
Your markup shows the nudge: you put inline jQuery code inside the same <script> tag that has a src attribute. Browsers ignore inline content when src is present, so the toggle never runs. Load jQuery first, then put your script in a separate <script> block (and run it on DOM ready). That single change will likely get the slide toggle working.

Corrected script pattern (use after jQuery is loaded):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  $('.toggle-button').on('click', function(e){
    e.preventDefault();
    $('#chatPanel').slideToggle(200);
    $(this).toggleClass('open');
  });
});
</script>

Layout tips for a Facebook-style bar:

  • Make one fixed container for the bar: position:fixed; left:0; right:0; bottom:0; z-index:1000. Keep its height small (30–50px).
  • Position chat panels relative to the viewport (fixed) or absolutely inside the fixed bar. Example: place the panel at right:16px; bottom:barHeight+gap.
  • Use max-height + overflow-y:auto on panels so long lists scroll inside the box instead of pushing the page.
  • Prefer transform/opacity transitions for smoothness; sliding height can reflow and be janky on low-end devices.

Troubleshooting checklist:

  • Confirm scripts load in order (jQuery then your script). Check the console for errors.
  • Watch z-index and stacking contexts: any ancestor with transform/create stacking context can change how fixed children behave.
  • Replace embedded SWF/object with HTML markup for stable layout.
  • For multiple tabs, calculate available width or stack tabs; avoid fixed widths that overflow when the window is narrow.

Notes on the thread:
— fix the script tag order first. ’s examples are good inspiration; combine those CSS ideas with the corrected JS. ’s idea of copying the bottom bar layout is fine for structure only, but avoid copying external scripts wholesale — keep the behavior simple and maintainable.

Recommended Answers

All 6 Replies

Member Avatar for bittuthegr8

that really helps thanks

Member Avatar for LukeBennett

Is it fixed? If not then get a facebook copy script and steal the bottom bit.

Member Avatar for 1337cookie

No worries bro :D hope you got what you wanted out of it.

Member Avatar for bittuthegr8

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="" width="160" height="250"><param name="movie" value="">
<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][/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.