jquery-ui modal window, make only one part of it scroll like new Facebook photo tagging window

Question

In the newly introduced photo tagging window layout of Facebook, the commenting part is located to the right of the photo instead of keeping it beneath the photo. If commenters leave more than a certain number of comments, then a vertical scroll bar appears on the right side. But the image on the left side has no relation with the scroll bar .. ie scrolling the bar downward does not make the image disappear gradually from its upper part.

To achieve that,

my html snippet:

<style type="text/css">

.my_image{

float:left;

}


.comments{

float:left;

}
</style>

<div id="dialog" title="Basic dialog">
<div class="my_image"><img src="my_img.img"/></div>
<div class="comments"></div>

</div>

javascript snippet:

<script>
    $(function() {
        $( "#dialog" ).dialog();
    });
    </script>

what I need to do is to keep the 'my_image' div size fixed while getting the 'comments' div scroll vertically as necessary.

But whenever the scroll bar appears , it makes the whole window (not part of it) scroll.

How to do that in jquery-ui? Is my html mark-up appropriate for that ?

Answer 1

Try setting overflow-y: scroll; for .comments. You might need to also set height the height of this div. You can read more of overflow here: http://www.w3schools.com/jsref/prop_style_overflow.asp