Question

I am writing a plugin to use to make a loading-like gif using Raphael js. The base of the code is modeled after this.

A demo of my plugin can be found on jsfiddle.

My problem is that I cannot seem to get the svg to be in the center of whatever jquery element is selected. My idea in that fiddle was to place the svg inside a div that is created and try to center that div but I can’t seem to get that to work either.

Any ideas?

EDIT:
I can get it centered by hacking the margin property of the containing div. Something like this works:

$loadingContainer = $('<div class="loading"></div>').css({margin: -(this.innerHeight()/2) + 'px auto'}).appendTo(this),

Notice the negative margin… But I am trying to avoid doing that and actually use Rahpael to position the loading-like “gif”

Answer 1

You need to find the position and dimensions of the element using

• .offset()
• .outerWidth()
• .outerHeight()
• the closest positioned element to the .loading element, with .offsetParent(), so you can adjust the positioning.

and use those to position your .loading element (with position:absolute)

demo at http://jsfiddle.net/gaby/Aaqaf/2/