move image with jquery

Question

For school i'm making a website for a mobile. There are multiple columns, 1 for menu for example, 1 for the context of the book and the one next to that will hold footnotes and image information.

On the phone you will only see one column at the time, gyroscope gestures will be used to scroll vertically to the next column.

I only can't get the image moving. So if someone could help with that. What important is is that there should form a empty space in the text of once where the image was. Also if the first column changes then the image should still be correct in column 3. So the image should have it's position relative to the 2nd column. I have a button to change the width of the first colin for testing.

I created a jsfiddle (my first!) but it doesn't work, however on my host the code work's fines except the image doesn't move. So i think i set something wrong in my jsfiddle (if so tell me what please so i can prevent it from happening next time). (ReferenceError: Can't find variable: changeColumnWidth)

http://jsfiddle.net/UpKAM/

Answer 1

Try this instead:

$('.b_image').each(function() {
    var xPos = $(this).offset().left;
    xPos += 200;
    $(this).offset({'left':xPos});
});

http://jsfiddle.net/UpKAM/7/

Answer 2

Your fiddle doesn't work because you declared your event handlers in line. Move these into the javascript area. This is good practice anyways and jsfiddle doesn't support inline declarations.

http://jsfiddle.net/EfDas/

Your code actually works, you just need to add position: relative to the image or it won't move.

Commendations for taking the time to make a fiddle. As another note, don't include head/body tags in your fiddle html. This messes up stuff. Also don't include resources that are already included (like jquery). You can use the left hand panel to add this stuff.