colorbox and scroller

Question

I'm having problem with colorbox when loading content first time after opening the page. I was making a list of people with button description for each person. after pressing a button opens a colorbox "window" with info that is taken from db according to person_id in address tab. so it loads a content from another section of page. List is in index.php?page=list and description link is index.php?page=list&person_id (opens different file). In that other file is mysql query etc and info is taken form db and then echo'ed.. so do div(div is not in db). div has css class:

.see_profile {
    background-color:#ececec;
    width:400px;
    height:auto;
    overflow:auto;
    padding:30px;
    font-size:14px;
    text-align:justify
}

Information is in the div. When I open page and press description button, it opens colorbox but box has srollers on the bottom and right side. after closing box and opening it again srollers are gone.. Couldn't figure it out what is the problem.. Chrome, FF and Opera have this problem except IE6.

In header I have:

<script type="text/javascript">
    $(document).ready(function(){
    $(".member").colorbox();
    });
</script>

I also noticed that it happens after inserting image in the div

I have the same issue. Did you find a fix? – maectpo Jan 18 '11 at 11:06 — maectpo, Jan 18 '11 at 11:06

score 0 · Answer 1 · edited Jan 31 '11 at 01:30

I've investigated the problem.

Try to see which content you load by ajax. If it has some images without "height" and "width" attributes, the scroll bars can appear.

It happens because the browser does not know about the image's size and doesn't wait until it loads to calculate the page layout. After the first load the image is in the cache and the browser can calculate the size.

Try to specify the size for you images. For me it works.

colorbox and scroller

1 Answers1