Tag Archives: css

Horizontal icon (footer) layout for Facebook chat contacts window… kind of like the Mac OSX app bar

If you came here looking for the code, that will be a bit further down the road. Here is the plan…

Take this…

Note: The above screen has my hide offline users mod applied 😉

And make it look more like this…

This is a “for fun” project and will be completed as time permits. So check back soon for progress updates.

 

Hide offline contacts from Facebook chat

If you’re like me, you stay logged into Facebook throughout the day. I work online so this is not uncommon.

One thing I have always hated is that there are no preferences for how you want to filter that list. Personally I find it pointless to show you offline contacts in an instant chat interface. I know some people use it to leave messages, but I am not one of them.

Assuming you know how to modify your browser’s custom style sheet, this is all you need to add and those offline users will no longer be visible!

.fbChatOrderedList li.item,
.fbChatOrderedList li.separator {
    display: none !important;
}
.fbChatOrderedList li.active,
.fbChatOrderedList li.mobile {
    display: block !important;
}

Feel free to post questions, comments or even improvements.

Calculate the total height of child elements of a clipped (overflow: hidden) parent tag

Ever have an element with clipped content and wanted to know the total height of the elements contained therein? I have a client who wants the height of the main content to be clipped to a preset height (don’t ask me why). Which means I need to dynamically add a “read more” link to expand the container and show all the content.

Well, here’s how you calculate the combined height of the children with jQuery… Continue reading

Adding mouse events to table rows using jQuery

In my example I will only be modifying the row’s css classes. The behavior would be very similar to what you may already be familiar with in phpMyAdmin’s interface.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
 $('tr').hover(function() {
  $(this).toggleClass('highlight');
 });
 $('tr').click(function() {
  $(this).toggleClass('selected');
 });
 $('tr:even').addClass('odd');
 $('tr:odd').addClass('even');
});
</script>

Everything should be pretty easy to understand except for the last 2 addClass commands. jQuery’s “:odd” and “:even” selectors behave differently than you may expect. You could assume the “odd” selector to start at the “first” row but that is not the case (an array’s first element zero-index unless otherwise defined). Unless I included a heading row, my “first” row is actually an even row since it is referenced as an array and has an index of zero. That’s why it looks like I am doing it backwards 😉

Set element’s CSS min-height using JavaScript minHeight

Recently I have been doing a lot of work on new sites that incorporate fixed-position footers (similar to the Facebook chat bar). A few examples sites are: Power Core USA and Douglas Stevens, MD (both of which I coded, graphic design by Brand Chemist). I ran into an issue with Power Core layout where the main content borders were not reaching the footer on larger displays in pages with small amounts of content (eg: not enough to activate scrollbars). So I ended up writing a quick JavaScript function to set the minHeight property of the DIVs causing the issue. Continue reading