Facebook Style Footer Admin Panel Part 2
Blog » CSS/XHTML » Facebook Style Footer Admin Panel Part 2Facebook Style Footer Admin Panel Part 2
December 7th, 2009
This is Part 2 of the Facebook Style Footer Admin Panel, if you haven’t checked out Part 1 this is the perfect time to check it out.
Step 2. Styling the Chat Panel & Alert Panel – HTML & CSS
Just like developing a drop-down menu, have a nested sub-panel within the list item. Look at the image below to get an overview of how this is layed out.
HTML
<li id="alertpanel">
<a href="#" class="alerts">Alerts</a>
<div class="subpanel">
<h3><span> – </span>Notifications</h3>
<ul>
<li class="view"><a href="#">View All</a></li>
<li>
<a href="#" class="delete">X</a>
<p><!--Content--></p>
</li>
<li>
<a href="#" class="delete">X</a>
<p><!--Content--></p>
</li>
</ul>
</div>
</li>
<li id="chatpanel">
<a href="#" class="chat">Friends (<strong>18</strong>) </a>
<div class="subpanel">
<h3><span> – </span>Friends Online</h3>
<ul>
<li><span>Family Members</span></li>
<li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
<li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
</ul>
</div>
</li>
CSS
Since we declared a list item link style already (with the text replament technique), override the properties so we can use regular links in the sub-panels.
#footpanel ul li div a { /*--Reset link style for sub-panel links--*/
text-indent: 0;
width: auto;
height: auto;
padding: 0;
float: none;
color: #00629a;
position: static;
}
#footpanel ul li div a:hover { text-decoration: underline; } /*--Reset hover style for sub-panel links--*/
Style the sub-panel container with an absolute positioning that will sit at the top of the main footer panel (27px from the bottom of the footer panel). Then create the headings using an <h3>.
#footpanel .subpanel {
position: absolute;
left: 0; bottom: 27px;
display: none; /*--Hide by default--*/
width: 198px;
border: 1px solid #555;
background: #fff;
overflow: hidden;
}
#footpanel h3 {
background: #526ea6;
padding: 5px 10px;
color: #fff;
font-size: 1.1em;
cursor: pointer;
}
#footpanel h3 span { /*--Right aligned "-" icon--*/
font-size: 1.5em;
float: right;
line-height: 0.6em;
font-weight: normal;
}
The following section is the area that will be scrollable. Use an overflow: auto; to allow the scroll to appear when the content exceeeds the <ul> height.
#footpanel .subpanel ul{
padding: 0; margin: 0;
background: #fff;
width: 100%;
overflow: auto;
padding-bottom: 2px;
}
#footpanel .subpanel li{
float: none; /*--Reset float--*/
display: block;
padding: 0; margin: 0;
overflow: hidden;
clear: both;
background: #fff;
position: static; /*--Reset relative positioning--*/
font-size: 0.9em;
}
Chat Panel
#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
padding: 5px;
background: #fff;
color: #777;
float: left;
}
#chatpanel .subpanel li a img {
float: left;
margin: 0 5px;
}
#chatpanel .subpanel li a{
padding: 3px 0; margin: 0;
line-height: 22px;
height: 22px;
background: #fff;
display: block;
}
#chatpanel .subpanel li a:hover {
background: #3b5998;
color: #fff;
text-decoration: none;
}
Alert Panel
#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
border-top: 1px solid #f0f0f0;
display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
background: url(delete_x.gif) no-repeat;
float: right;
width: 13px; height: 14px;
margin: 5px;
text-indent: -9999px;
visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
text-align: right;
padding: 5px 10px 5px 0;
}
Step 3. Activating the Subpanel – jQuery
Adjust the Subpanel Height
The tricky part about the collapsible sub-panel is to make sure the content does not stretch beyond the height of the viewport when active.
To make sure the height does not exceed past the viewport, use the following function to calculate and resize the sub-panel according to the viewport size.
The following script contains comments explaining which jQuery actions are being performed.
jQuery
//Adjust panel height $.fn.adjustPanel = function(){ $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset sub-panel and ul height var windowHeight = $(window).height(); //Get the height of the browser viewport var panelsub = $(this).find(".subpanel").height(); //Get the height of sub-panel var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of sub-panel) var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel if ( panelsub > panelAdjust ) { //If sub-panel is taller than max height... $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust sub-panel to max height $(this).find("ul").css({ 'height' : panelAdjust}); ////Adjust subpanel ul to new size } else if { //If sub-panel is smaller than max height... $(this).find("ul").css({ 'height' : 'auto'}); //Set sub-panel ul to auto (default size) } }; //Execute function on load $("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel $("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel //Each time the viewport is adjusted/resized, execute the function $(window).resize(function () { $("#chatpanel").adjustPanel(); $("#alertpanel").adjustPanel(); });
Add the Toggle Function
Since both of the chat and alert panels are collapsible, we must treat this like the logic of an accordion (when one opens, the other closes). We also need to allow the panels to collapse when clicking out of the sub-panels.
The following script contains comments explaining which jQuery actions are being performed.
//Click event on Chat Panel and Alert Panel $("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel... if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active... $(this).next(".subpanel").hide(); //Hide active subpanel $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger } else { //if subpanel is not active... $(".subpanel").hide(); //Hide all subpanels $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger } return false; //Prevent browser jump to link anchor }); //Click event outside of subpanel $(document).click(function() { //Click anywhere and... $(".subpanel").hide(); //hide subpanel $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger }); $('.subpanel ul').click(function(e) { e.stopPropagation(); //Prevents the subpanel ul from closing on click }); //Show/Hide delete icons on Alert Panel $("#alertpanel li").hover(function() { $(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover },function() { $(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out });
Conclusion
The footer panel can be useful for admin driven applications and much more. There are many useful techniques that we covered today like the fixed footer, CSS tooltips, height calculation function, and multiple toggle function, that can be used in various ways for your future projects.
If you have any questions, concerns, or suggestions, please do not hesitate to let me know!
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: css, Intermediate, jQuery, navigation
This entry was posted on Monday, December 7th, 2009 at 11:41 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Thanks Soh Tanaka,
Couldnt wait for this one to be released, sucked in all the content from the final demo you showed last week.
I’m now thinking it would be really cool to get the panels pop-up using ajax, cos the panel content could be data intensive and wouldnt make sense since the footerpanel is rendered for each request.
Also wanted to let you know that your eye for picking colours and combination is the one of the best i’ve seen on the web. Way to go!!
Write more!!!
Cheers,
Aditya
Awesome tutorial! This covered some great features and functionality. Great job!
thats what I want. thanks friend.
This is awesome stuff. Thanks for sharing!
You write f*cking good article! Thanks!
Woooow, awesome Two Thumb thanks
is a awesome…from biger web become bigest…ck ck ck
In I.E. 8.06 (I didn’t try other I.E. versions) the scroll bar on chat subpanel doesn’t work well. It scrolls down only items: Family Members and Other Friends, however it doesn’t scroll any of the regular items: such as Your Friend. In Mozilla it works fine.
Thanks again for sharing this beautiful code with us.
Regards
Hey Soh ! Really good post as usual… Can’t wait for the next one !
@Grga, thanks for catching that!
Just add a
position: static;on the#footpanel ul li div aand your good to go~#footpanel ul li div a { /*--Reset link style for subpanel links--*/ text-indent: 0; width: auto; height: auto; padding: 0; float: none; color: #00629a; position: static; }Great tip here for IE6:
top:expression(eval(document.compatMode &&document.compatMode==’CSS1Compat’) ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
Excellent tutorial i must say…
Keep going
Great post, like always. been looking for something along these lines for awhile. great job and thanks!
Great tutorial..Thanks for sharing it…
Hi, great article. Can I translate part 1 and 2 in italian language ? Tnx.
I’ve seen this done on a lot of other websites, but this is definitely the most graceful and easiest to implement. Thanks for the tut!
I have a problem in opera. Can you look at my site and help on this? http://www.mnyk.net
This is not adversite. I’m using your fb like foobar codes in my site.
Forget it my last comment. I fix my problem just add “z-index:1;” proirity in minipanel div.
The Inspiration button is wrong in Chromium & Firefox on Linux. The label is too far to the right and the balloon tooltip isn’t tall enough and only covers half of the word “Design”. Cheers
Very impressive!
wow, impressive work. I’ll be back to read it true. Too lazy for a Sunday evening.
i am having problem can you take a look on my site http://www.ocalavibe.com
this is not a adversitesment i’m using the your fb like foobar codes in my site
i am having the problem with part 2
Thank You In Advance
this is perfect amazing, i have used it for may website not yet published i just have a question?, what do you use to click on the online users to open another chat subpannel (when you click on the specific user to chat) i am trying to combine your tutorial with gmail chat and i am not successfull.
thanks Titi
Nice tutorial, keep up the good work, think i found 1 typo used panelAdjust where you meant ulAdjust:
$(this).find(”ul”).css({ ‘height’ : panelAdjust});
meant to be:
$(this).find(”ul”).css({ ‘height’ : ulAdjust});
Think that’s right but since I’m jQuery beginner and haven’t actually tested the code I could be wrong.
Awesome, thx for sharing !
Hi! thanks for sharing your great work! I am a newbie and in need of a menu like the one you can see at my site (wich is a database driven recursive menu with a you are here helper at right) but would like to add all the gimmics and style you master; to be precise, a menu like the one found at smartmoney.com or elpais.es is what I stribe to achieve; a tutorial would be very appreciated!
thank you again.
Carlos
Mexico
You dont know how greatful I personally am. Thanks for sharing your knowledge with us.
I am a newbie using Jquery. I implemented all the htm, css and jquery, line by line. I have 1 issue though. I believe with the
text-indent: -9999;
part.
When I click on a link form the list, it moves the bar a bit to the left and the border shows up. What can i do plz??
Hi Soh, fantastic pair of tutorials you put up here. I’m encountering an issue that may seem a bit difficult to explain. When a subpanel is open and I scroll down the page, I notice a sort of “flickering” in the toolbar. This only occurs in Firefox, and some Googling came up with it being a Firefox for PC rendering issue when overlays or fixed elements are used. As a comparison, Facebook’s toolbar does not exhibit this issue. I’ve looked at their toolbar using Firebug and it’s a horrid mess, so I wanted to ask you first if you have encountered a similar issue and whether or not you had any solutions off the top of your head.
I can actually sort of reproduce the effect I’m speaking of using your demo. Open the Friends panel or Alerts panel and, with it open, resize the window vertically. You may notice a “jumping” or “flickering” as the panel resizes (I’m using FF 3.5.7 on Vista). Do the same thing in IE (I’m using IE7) – it renders smoothly. It may not work on FF for Mac. Thoughts?
The wordpress plugin just got published! http://wordpress.org/extend/plugins/facebook-foot-panel/
Nice tutorial. Great work.
notifications:
when i press “open in a new tab”
the notification UL bar disappers
can u please fix it ?
i was about to use this in my website
hello my friend, help me, how to put what should make it databse or in a sub domain or use the root alone, I’ve pluginya pairs, but also do not want to actively
Enlightenment please his pen or his explanation
I am very happy but I can not put on my website foter
Thanks
please send his or her book that details how to install it to my email address
by Hesty
Hello
This is Awesome facebook footer
http://www.dreamcss.com/2009/04/10-beautiful-sliding-panel-with-jquery.html
Man, you write really nice tutorials. Thanks for this one!
How do you make the chat part work?
Chat panel and alertpanel not working?where i can put java script code?
Nice tutorial but ajax not working?where i can put ajax code?
Nice tutorial but chat panel and alert panel are not working. One more thing, you didn’t mention where to use AJAX code. Please make it clear.
Thanks anyway
The alert and chat panels are not working!
Great tutorial champ, This makes it a lot easier thanks again.
I think you have a good tutorial but I dont think you have a best. There are many problems must fixed when you want to deploy to production, just my personal views
really nice tutorials. Thanks for this one!
Thanks for a great tutorial Soh!
Do you know of a way to make this bar work in mobile browsers?
When viewing pages with this bar on via iPhone it floats in the middle of the screen.
In standard browsers though, the bar is excellent!
İt’s Perfect!
this is a very very nice and important article to all web developer.
I need Help!
(first sorry for my bad English!)
I am a Fresh jQery user and I need help for the 2nd part on Step 3. “Activating the Subpanel – jQuery”.
were comes the jQuery code in? i have a Folder js with jsjquery.js is it right ? to write the Code into this jsjquery.js?
greetings from Germany
can I Download anywere to Learn more about this Script
i need it! please
i worked now 8 hours on this script and I am CRAZY
please ……
First talk to the website and blog and perfect.
In this issue there is the possibility of someone completing or yourself and make the chat work know that must have an administrator user but something simple.
tanks
This is a very grate tutor
Please check the jQuery code in line 8 and 12…
in line 8 should be
if ( panelsub >= panelAdjust )
and line 12 should be
else if ( panelsub < panelAdjust )
HElp guys!i dont know what is wrong here,but the Chatpanel and alertpanel
Are not working at all.
Can You please explain where i`m i supposed to fix the code so that it can open??
i solved the problem after downloading @janvier wordpress Plugin)),so from the plugin i used only the jquery function and its working))
This is amazing tutorial! One of the best I’ve ever read! Thanks!