Question

So what i want.

There will be some content centered on a page (horizontally & vertically).
The user will be able to click to load the previous/next bit of content.
This content will load dynamically with Ajax.

When

everything will happen in reverse for the Next>

To center the content i am using jQuery as i will not know the content size.

heres the code i am using:

 // Jquery, CENTER
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

$("div.item1").center(true);

To make sure it centers when the browser resizes i’m using :

$(window).bind('resize', function() {
    var that = this;

    if (!('balancer' in that)) {
        that.balancer = setTimeout(function() {
            $("div.item1").center(true);           
            delete that.balancer;
        }, 200);
    }
});

I’ve attempted to use this code to do the animations required. So far no luck.
item1 appears how i want it to but not quite in the right place (the left: -=100 putting it off)

$('.item1').animate({
    opacity: 1,
    left: '-=100'
}, 1000);

$('.item2').animate({
    opacity: 1,
    left: '+=100'
}, 1000);

Ive set up a jsfiddle here to show where i’m at:

http://jsfiddle.net/GmRJ9/

I’m not too hot on my jQuery in general so go easy on me but i feel it’s not too complicated.

However the fact that i want to use it with dynamically loading items might cause some problems. So with that in mind I should probably ask if i’m approaching this in the right manner?

Any guidance would be much appreciated!
thanks in advance,

J

Answer 1

Struggling first I was doubting the formulae for the middle. But maken the container an rectangle (change height!) you see it’s working.
Also you see, when taking away the margin for item1, that the position behaves the same for both items.

So assuming the JS is fine I thought maybe some CSS error. Some hidden margin or padding but setting both to zero revealed nothing.

After Swapping browser for developer tools I repeated the steps and realised the items seemed to be placed relative to the container.

<div class="container"></div>
<div class="item1">
    <p>item1</p>
</div>
<div class="item2">
    <p>item2</p>
</div>

Bingo!

Here is an example spiced up with a 2 seconds delay. I always struggle to set the timeout right. Might be nice to see it =) http://jsfiddle.net/3xLAD/
Strangely I couldn’t set the items’ margin-top via CSS. This made the div move slightly horizontal (ò.O)-> http://jsfiddle.net/9ydrQ/