How to collapse div same like facebook chat


Tags: jquery,css

Problem :

I try to do something similar like facebook chat but this for personal use. Everything work fine except some css part.

I try with position absolute to arrage the div, yes can do but problem when i loop chat box in php.. and i need to use float (float div box to right).

you can check my jsfiddle here

Below is some code snippet in jquery

//Close
$('.closed1').click(function () {
    $('.wrap_box1').hide();
    $('.main_chat1').addClass('hide_wrap_box');
});

//Open
$('.open_chat1').click(function () {
    $('.wrap_box1').show();
    $('.main_chat1').removeClass('hide_wrap_box');
});

If you see my jsfiddle the chat box is collapse to top but how to collapse to bottom ? , try click close button.



Solution :

The way I would approach this is something like this:

Steps:

  • make an chat area that surrounds the chat-boxes
  • chat-boxes to display as inline-blocks
  • position the user boxes to bottom:0

On your example:

I would use display:inline-block on the chat_box class ... this way the parent will respond to the size of the box.

And float right the parent of the chat_box

#chat_area {
    float:right;
}

but the user_box itself would just be aligned to the bottom of the chat_box.

.user_box {
    ...
    bottom:0;
}

This way the whole chat area will float to the right ... and resize shrink to the bottom when all chat boxes are closed.

Here is a fiddle for illustration: http://jsfiddle.net/mazzt/7/


    CSS Howto..

    How to combine grouped inputs with aligned forms?

    How do I select immediate children in jQuery [closed]

    Showing different in Internet Explorer and Google Chrome

    How to add header in a row of a table

    Learning Bootstrap Thumbnails…why is that bullet showing?

    How to enlarge footer on mobile only?

    JSSOR slider: Image Gallery demo keeps showing highlight image on mobile

    How to link to an image from a CSS file when using the resource plugin 1.2.14

    How to add Video from project directory in the background of Div

    How to pass the output of CSS Selector to beautiful soup?

    How to set min-height using css [closed]

    How to create rolldown content with css?

    How to showing expanding text with javascript and css

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    How to style a UL/LI drop down

    How to check if the current page is a plugin admin panel in wordpress

    How to put bootstrap glow (used in the 'form-control' CSS class) on a div?

    disabling stylesheets to increase the speed of showing/hiding divs

    How do I apply css to second level menu items?

    How to vertically center div in floated div?

    How to add a background image or theme through CSS?

    How to know values of all attributes and properties of a tag element in HTML

    Flotcharts: How to place the legend on the right of the chart

    How to force an empty page in a paged HTML document?

    CSS / Javascript: hidden div does not take full width after being shown

    How to set footer responsive?

    CSS how do you stretch to fit and maintain the aspect ratio?

    How to get resultant HTML after executing all scripts?

    How to style CSS role

    Dynamically loaded thumbnail image shows other thumbnails full size image instead of its own (using javascript hover over effect)