How can I center the loading div before load() with jQuery?

I have this code:

$("#result").html('<div class="loading">Loading results...</div>');
$("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'));

It shows the loading div until the load is done. What I want to do here, I want the loading div exactly in the center of the page/do开发者_Go百科cument?

• That's extra but could be nice - can I also fade the document until the load is done so that the loading div stands out?

Any jquery/css suggestions are welcome.

Thank you :)

---

If understand you question correctly: You need to figure out how to center the loading div both horizontally and vertically? If so, I would take a look at the answers to this question: Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7.

---

Have you looked at jQueryUI? You could use a modal dialog for this. jQueryUi automatically centers the modal dialog and you can make the dialog disappear after it's finished loading. There is a way to remove the title bar from the dialog: http://www.comanswer.com/question/jquery-ui-dialog-how-to-initialize-without-a-title-bar

I don't know if this is what you're looking for, but it might avoid some headaches for you later down the road (and it's pretty and you can have custom themes).

---

you could put a center div around your loading...

$("#result").html('<div align="center" style="width:100%"><div class="loading">Loading results...</div></div>');

---

.loading {
    width:200px;
    height:50px;
    background:#CCC;
    position:absolute;
    top:50%;
    left:50%;
    margin:-25px 0 0 -100px; /* Half of height and width */
    }

If you don't know width/height or it is dynamic, you can use .width() and .height() functions to get values, which should be divided by 2.

---

This might be a bit over-kill but the jQuery UI dialog plugin could achieve those effects (you would just not be using it for a dialog...). Check out the modal option and example. If you are using jQuery ui already, might be worth it...