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?
Really stupid jQuery question >_<
-
Robin
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Really stupid jQuery question >_<
To further explain my problem, this is what I put into the <head> of my HTML layout:
<script>
(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);
$('#example').vAlign();
</script>
This did not work, though I thought it should have. There's likely something wrong with the syntax but I can't figure out what.
<script>
(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);
$('#example').vAlign();
</script>
This did not work, though I thought it should have. There's likely something wrong with the syntax but I can't figure out what.
Re: Really stupid jQuery question >_<
-
Robin
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Really stupid jQuery question >_<
@Mikari: Yeah, I usually vertically center with tables--but since I'm trying to teach myself jQuery anyway, I figured I'd see if it could be done in jQuery.
Also, I found out the problem--the function and everything was capable of working, it was just never being called in to work. My developer buddy and I ended up figuring that out, and finally amended the last line of code like this:
$(document).ready(function(){
$('#contentside').vAlign();
})
Now when the page loads, the function runs and centers the div vertically (well, more or less, LOL). I had no idea you had to tie jQuery functions to specific DOM events (like a page load, window resize, etc.) to make it run--I thought you just, well, loaded the page and sh!t just magically happened, like how HTML and CSS work. xD
The silliest thing? NONE of the tutorials I read said a darn thing about connecting jQuery to HTML using DOM events. NONE of them. It's almost like it's so basic that advanced programmers take it for granted. I, however, felt like I was trying to solve for x when I didn't know 2+2! LMAO
Also, I found out the problem--the function and everything was capable of working, it was just never being called in to work. My developer buddy and I ended up figuring that out, and finally amended the last line of code like this:
$(document).ready(function(){
$('#contentside').vAlign();
})
Now when the page loads, the function runs and centers the div vertically (well, more or less, LOL). I had no idea you had to tie jQuery functions to specific DOM events (like a page load, window resize, etc.) to make it run--I thought you just, well, loaded the page and sh!t just magically happened, like how HTML and CSS work. xD
The silliest thing? NONE of the tutorials I read said a darn thing about connecting jQuery to HTML using DOM events. NONE of them. It's almost like it's so basic that advanced programmers take it for granted. I, however, felt like I was trying to solve for x when I didn't know 2+2! LMAO
Re: Really stupid jQuery question >_<
I'm glad you figured it out. I'll keep this in mind for when I eventually start getting into JQueary.
-
Robin
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Really stupid jQuery question >_<
@Mikari: Me too--it was just a case of me making it 200x harder than it was, LOLOLOL.
(You're good with the server-side nature of PHP, though, so jQuery probably won't be as hard for you to pick up as it has been for me.)
(You're good with the server-side nature of PHP, though, so jQuery probably won't be as hard for you to pick up as it has been for me.)
Re: Really stupid jQuery question >_<
I feel like I still have such a long way to go. I'm going to have to reread my own tutorials when I get back into studying code, since it's been such I long time since I've tried to figure out anything new. I'm planning to look up some stuff related to touch screens, which is slightly different from clicks, but hopefully not too much.
-
Robin
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Really stupid jQuery question >_<
Oh, wow, I hadn't even thought about touch screen taps differing from "clicks" as we usually think of them. Soooooo much I still need to learn when it comes to code! LOL
Re: Really stupid jQuery question >_<
I haven't really investigated too much yet, but if there are significant differences, I'll report on it when I add that to my notes. :)