How can I make a div collapse in the same way as the Facebook chat

Question

How can I make a div collapse in the same way as the Facebook chat

I am working on creating a chat feature similar to Facebook chat for personal use. Everything is functioning correctly, except for some issues with the CSS.

I attempted using position absolute to arrange the div, which worked fine, but encountered problems when looping the chat box in PHP. I needed to use float to align the div boxes to the right.

You can view my jsfiddle here

Below are snippets of code 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');
});

In my jsfiddle demo, you'll notice that the chat box collapses to the top. How can I make it collapse to the bottom? Try clicking the close button.

jquery css

Answer 1

Answer №1

If I were to tackle this problem, I would take the following approach:

My Approach:

Create a chat area that contains the chat-boxes
Set the chat-boxes to display as inline-blocks
Position the user boxes at the bottom of the chat area

In your specific scenario:

I suggest using display:inline-block for the chat_box class so that the parent element adjusts to the size of the box.

Also, float the parent element of the chat_box to the right:

#chat_area {
    float:right;
}

Meanwhile, align the user_box itself to the bottom of the chat_box:

.user_box {
    ...
    bottom:0;
}

This way, the entire chat area will float to the right and resize accordingly when all chat boxes are closed.

For a visual representation, check out this fiddle: http://jsfiddle.net/mazzt/7/

Answer 2

If I were to tackle this problem, I would take the following approach:

My Approach:

Create a chat area that contains the chat-boxes
Set the chat-boxes to display as inline-blocks
Position the user boxes at the bottom of the chat area

In your specific scenario:

I suggest using display:inline-block for the chat_box class so that the parent element adjusts to the size of the box.

Also, float the parent element of the chat_box to the right:

#chat_area {
    float:right;
}

Meanwhile, align the user_box itself to the bottom of the chat_box:

.user_box {
    ...
    bottom:0;
}

This way, the entire chat area will float to the right and resize accordingly when all chat boxes are closed.

For a visual representation, check out this fiddle: http://jsfiddle.net/mazzt/7/

Answer 3

Answer №2

After studying your example, I attempted to implement it!

 $(document).ready(function () {
        $('.main_chat2').toggle("bounce",{ times: 3 }, "slow");
    $('.user_box').click(function () {
        if ($('.wrap_box2').is(":visible")) {
            $('.wrap_box2').hide();
            $('.main_chat2').addClass('hide_wrap_box');
            $('#icon').html('^');
        }
        else {
            $('.wrap_box2').show();
            $('.main_chat2').removeClass('hide_wrap_box');
            $('#icon').html('x');
        }
    });
   });

You can check out the results at the following link: http://jsfiddle.net/ernestoarbitrio/DyfBW/31/

Answer 4

After studying your example, I attempted to implement it!

 $(document).ready(function () {
        $('.main_chat2').toggle("bounce",{ times: 3 }, "slow");
    $('.user_box').click(function () {
        if ($('.wrap_box2').is(":visible")) {
            $('.wrap_box2').hide();
            $('.main_chat2').addClass('hide_wrap_box');
            $('#icon').html('^');
        }
        else {
            $('.wrap_box2').show();
            $('.main_chat2').removeClass('hide_wrap_box');
            $('#icon').html('x');
        }
    });
   });

You can check out the results at the following link: http://jsfiddle.net/ernestoarbitrio/DyfBW/31/

Answer 5

Answer №3

Experiment with slideToggle(); and perhaps even toggleClass();

Answer 6

Experiment with slideToggle(); and perhaps even toggleClass();

How can I make a div collapse in the same way as the Facebook chat

Answer №1

Answer №2

Answer №3

Similar questions

Positioning two images at the bottom left and bottom right corners of a container

Checking for the existence of a specific key in JSON data from the Twitter API using

A div element springs forth into a new window and seamlessly transitions back to its original position with fresh content

What is the best way to ensure that a parent element with a nowrap property can inherit the width of

Setting overflow sizes manually for parent containers when child elements are transformed using CSS can be done by following these steps

How come my Django application is returning an empty response when using jQuery.ajax?

What is the best way to perform a multi-link latency check, display the ping results, and use JavaScript to determine the fastest URL?

The textbox fails to update when the condition in the IF statement is met

Struggling with adding auto-suggestions using data retrieved from a RESTful API

Troubleshooting Cascading Style Sheet problem on Samsung Galaxy S5

Fill a dropdown menu in HTML with data from a parsed JSON object array

Removal of div elements based on checkbox being unchecked - a step-by-step guide

Is there a way to load jQuery after the page has loaded? Any suggestions on how

Exciting possibilities with jQuery and dynamic queries in PHP

Split the input string into individual characters for each entry

The issue arises when using IE8/9 with $.get and .html() functions, as the retrieved data

What is the best way to halt a window.setInterval function in JavaScript?

Generate separation among the navigation links in HTML/CSS

Issue with div element not functioning properly within table declaration on Internet Explorer

Utilizing a CSS file within a YAML configuration in R Quarto