Really stupid jQuery question >_<
Posted: Thu May 07, 2015 9:09 pm
I'm in the process of building version 15 of WithinMyWorld.org, trying some new stuff as usual. For this version, I'm attempting to vertically center a div using jQuery (so that the centering will be responsive to screen height).
I found this snippet that purports to do that:
(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2);
$(this).css('margin-top', mh);
});
};
})(jQuery);
and it also has this line:
$('#example').vAlign();
(At this point, I am so new to jQuery that I can't even read any of this code to figure out if it's correct or not--I'm just taking it on faith.)
My question: how do I connect up this jQuery to the HTML element I want centered? I've loaded the jQuery library, I've created a div id="example", and yet no centering happens. I think it's because I really have no idea where to stick that last line of code. I know the block of jQuery goes in <script></script> tags in the <head> of the HTML document, but that's about where my knowledge stops. I tried sticking that last line of code in with the rest of it, but it didn't change anything, and I also tried putting it in the div id blank (for lack of a better idea), with no luck.
None of the tutorials/resources I've looked at have had any implementation procedures, probably because this should be common basic knowledge to advanced jQuery users. Unfortunately, I am not advanced, LOLOL. Any advice?
I found this snippet that purports to do that:
(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2);
$(this).css('margin-top', mh);
});
};
})(jQuery);
and it also has this line:
$('#example').vAlign();
(At this point, I am so new to jQuery that I can't even read any of this code to figure out if it's correct or not--I'm just taking it on faith.)
My question: how do I connect up this jQuery to the HTML element I want centered? I've loaded the jQuery library, I've created a div id="example", and yet no centering happens. I think it's because I really have no idea where to stick that last line of code. I know the block of jQuery goes in <script></script> tags in the <head> of the HTML document, but that's about where my knowledge stops. I tried sticking that last line of code in with the rest of it, but it didn't change anything, and I also tried putting it in the div id blank (for lack of a better idea), with no luck.
None of the tutorials/resources I've looked at have had any implementation procedures, probably because this should be common basic knowledge to advanced jQuery users. Unfortunately, I am not advanced, LOLOL. Any advice?