how do I move the image to half the div?

Ok so I have this Page and as you can see if you scroll down below the map you will see the logo and header for "Barinos Market"...if you click on the read more link the text expands ..which is exactly what i want. The problem I am trying to resolve is when the user clicks read more I need the barinos market image on the left to scroll down with the text and be half way down the div....here is the code...

<div id="barino_info">
<div id="barino_header"></div>
<div class="info_body">
<div id="barino_left_body">
</div>
<div class="right_body">
    <div class="right_body_outer">
        <ul class="play_navigation">
            <li class="active"><a href="#" class="navlinks barino_story_bottom" ref="right_body_inner">The Story</a></li>
            <li><a href="#barino_video" class="navlinks barino_video_bottom" ref="bottom_barino_video">The Video</a></li>
            <li><a onclick="show_gallery('barino');" href="#" class="navlinks barino_gallery_bottom" ref="bottom_barino_gallery">The Gallery</a></li>
            <li><a href="#" class="navlinks barino_equipment_bottom" ref="barino_equipment">The Equipment</a></li>                          
        </ul>
    <div class="right_body_inner tab_content">
        Barino's Market is an ......

The image is a background url on #barino_left_body

Any ideas on a strategy on how to achieve开发者_如何学C this..i was thinking of maybe jquery offset or something like that

I am using this plugin to do the expanding...here is my jquery to do it

$('.right_body_inner, .doughboy_right_body_inner, .haw_right_body_inner, .river_right_body_inner, .vib_right_body_inner, .barino_equipment, .dough_equipment, .river_equipment, .haw_equipment, .vib_equipment').expander({
   slicePoint:       355,  // default is 100
   expandEffect:     'fadeIn',
   expandSpeed:      '8',       // speed in milliseconds of the animation effect for expanding the text
   userCollapseText: '(less..)'  // default is '[collapse expanded text]'
 });

After the "read more" is clicked, you can calculate the height of the surrounding <div> and add (or animate) the top margin of #barino_left_body to half the surrounding <div> height plus half the height of #barino_left_body.

$('.read-more').click(function(event){
  var parentHeight = $(this).parents('.info_body').height();
  var imageHeight = $('#barino_left_body').height();
  var centerImage = (parentHeight-imageHeight)/2;

  $('#barino_left_body').animate({"marginTop": centerImage}, 250);

  event.preventDefault();
});

P.S. I'm curious as to why you made it a background image.

Try this code on for size, I might get some references wrong with those parent/prev, if you can't figure it out, post the errors.

JS

$('.right_body_inner, .doughboy_right_body_inner, .haw_right_body_inner, .river_right_body_inner, .vib_right_body_inner, .barino_equipment, .dough_equipment, .river_equipment, .haw_equipment, .vib_equipment').expander({
    slicePoint:       355,  // default is 100
    expandEffect:     'fadeIn',
    expandSpeed:      '8',       // speed in milliseconds of the animation effect for expanding the text
    userCollapseText: '(less..)',  // default is '[collapse expanded text]',
    afterExpand: function($thisElement) {
        $thisElement.parent().prev().height($thisElement.height())
    },
    onCollapse: function($thisElement, byUser) {
        $thisElement.parent().prev().css('height','');
    }
});

I add 2 callbacks basically.

The first one afterExpand sets the height to the height of the expanded div. The CSS you have already sets the position of the image properly.

The second one onCollapse sets removes my previous definition for height, returning to the div to it's CSS definition and bringing the layout back to it's original design.

Used .css() in the second function just so you can see the different approaches to setting height, you can decide between the two.

I'm not sure if you can move a background image with jQuery. I think you cannot. However you do can move a normal image, so that's what I would do.

I would select the image through jquery and then use animate() to set the new position of it. css() would work too. The top will be ((the total size of the div) - (the size of the image))/2

var h1 = $("#barino_left_body").height();
var h2 = $("#myimage").height();
var position = (h1-h2)/2;
$("#myimage").animate({"top":position},250);

You do this when expanding the text.

This should do the trick. But if you really need to use the image as background I don't know your answer. :(

I hope it helped.