0

The idea is simple get the height of the bigger-objet (h1) and of the smaller-object (h2), substract them and divide over 2. In other words h3=(h1-h2)/2. And use said h3 as margin-top and margin-bottom for the smaller-object.

From what I understood from this reference. I came up with this:

(function($) {
 $.fn.vAlign = function() {
  return this.each(function() {
   var bigger_height_object = document.getElementsByClassName('object-aligned-against');
   var smaller_height_object = document.getElementsByClassName('aligned-object');
   var h1 = bigger_height_object.height();
   var h2 = smaller_height_object.height();
   var h3 = (h1-h2) / 2;
   smaller_height_object.css('margin-top', h3);
   smaller_height_object.css('margin-bottom', h3);
  });
 };
}) (jQuery);

From what I read, it is possible to use multiple selectors, so would it be possible to call the plugin as something like this: $('.aligned-object' '.object-aligned-against').vAlign() ? Or what would be the appropriate way to do it?

Edit: missed the . on the selector classes.

Edit2: removed the , on the selector, since I'm looking for both of the classes independentlty.

RaulS
  • 43
  • 6
  • I generally avoid using js for styling purposes. Yes, it can work but very often it causes more problems than it solves. – nurdyguy Oct 11 '17 at 16:40
  • On a more helpful note, it is very important to remember that `$('aligned-object', 'object-aligned-against')` is not the same as `$('aligned-object object-aligned-against')`. In the first, you are looking for a `aligned-object` _inside_ of `object-aligned-against`. In the second you are looking for both independently. I don't think either suites your purpose here though. I would recommend creating a wrapper (like a div) and passing that in instead. – nurdyguy Oct 11 '17 at 16:45
  • @nurdyguy, how would you do it? Using CSS media queries seems like an endless job, since I have no idea of which _break points_ should I use. 2 break points seem too little for me. On my phone, and laptop it may look aligned but what about the rest of the screens? How do you test that? – RaulS Oct 11 '17 at 16:49
  • I agree that media queries probably aren't the best for this. What kind of things are you trying to vertically align? There are a ton of tricks for creating vertical allignment, I always just google them until I find one that works. – nurdyguy Oct 11 '17 at 16:58
  • Two `
    `s inside the same `w3-row`, some `
    `s have an `` inside, while others have a `

    `

     – RaulS Oct 11 '17 at 17:09
  • Target the outer `w3-row`, something like `$('#theRow').vAlign();` then inside the package you can find the divs nested inside of it. This way it will be properly encapsulated. I would suggest trying something like this first though: https://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div?rq=1 – nurdyguy Oct 11 '17 at 18:00
  • @nurdyguy, It seems I need to define the height of the container, right? What would be a good way of defining it? Thanks, BTW, seems I was trying to do something harder than it should. – RaulS Oct 13 '17 at 18:36

0 Answers0