On Oct 29, 2007, at 7:36 PM, jmancor wrote:
Hello everyone!
I got this question going around my head and its just because i can't
find a proper solution.
Thing is i got a project on which i want to show a preloader whenever
something is sent or some event has been triggered. How could i set
the preloader to show itself right on the middle of the screen??
I mean how could i show it on the right middle of the screen even if
got a huge scrollbar on the right side!?
I know i should be using <div>'s for every thing i want to show like
this preloader for example but i could perform this with
prototype....errmmmm don't want to use it anymore... cuz we got
Jquery!!!
So any hints???
Thanks in advance!!
Jmancor.
Hi there,
I grabbed some stuff from the Dimensions plugin because the latest
(non-svn) jQuery build incorrectly shows $(window).height() to be the
same as $(document).height(). So here is one way you could get
vertical centering in the viewport (only tested in FF 2 Mac) ...
// vertically center something in the viewport
(function($){
$.fn.vCenter = function(options) {
var pos = {
sTop : function() {
return window.pageYOffset || $.boxModel &&
document.documentElement.scrollTop || document.body.scrollTop;
},
wHeight : function() {
if ( $.browser.opera || ($.browser.safari && parseInt
($.browser.version) > 520) ) {
return window.innerHeight - (($(document).height() >
window.innerHeight) ? getScrollbarWidth() : 0);
} else if ( $.browser.safari ) {
return window.innerHeight;
} else {
return $.boxModel && document.documentElement.clientHeight
|| document.body.clientHeight;
}
}
};
return this.each(function(index) {
if (index == 0) {
var $this = $(this);
var elHeight = $this.height();
$this.css({
position: 'absolute',
marginTop: '0',
top: pos.sTop() + (pos.wHeight() / 2) - (elHeight / 2)
});
}
});
};
})(jQuery);
// center an element
$(document).ready(function() {
$('#foo').vCenter();
});
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
