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/