Bottom Aligning Images with JavaScript?

[adlb]

I am trying to replicate the way in which images in the feed on this website (http://haw-lin.com/) are bottom-aligned.

From copying and tinkering with the code on the site, I conclude that the bottom alignment is not being achieved through pure CSS—at least not evidently through the use of linked style sheets as opposed to inline style definitions. I determined this by commenting out all the linked style sheets; many other aspects of the site appeared wonky when I did this, but the bottom alignment of the images was not broken. The images only began top aligning relative to each other when I commented out included javascript files or sections of js code.

Any help in diagnosing what specifically is making the bottom alignment of images on this site possible and/or advice on how to similarly implement this effect on my site would be greatly appreciated.

Thanks!

[blaze4218]

If you have js code that you don't understand and it is affecting the alignment of your images, then you have not eliminated CSS... the CSS could be working fine, but the javascript might be overriding the values. Showing the code you are working on that is failing would be more helpful in diagnosing your problem than showing the working site that might have lots more includes.

[adlb]

Hi, blaze. Thanks very much for your reply and explanation of how the CSS and javascript may be interacting. I'm not yet at the stage where I have my own code for it to fail; I wanted to get my head around how this alignment was accomplished before I attempted to implement it. My experience with javascript doesn't extend past using simple jQuery snippets, so I turned here to ask for guidance.

At the moment, as a workaround I've been specifying margin-top values for images within divs of a known maximum height in order to have them bottom align with each other, but this solution is not practical nor scalable for my purposes.

[blaze4218]

Originally Posted by adlb

I'm not yet at the stage where I have my own code for it to fail;

But you did say that you started removing js includes and commenting out lines of js, so you may not have code of your own in there, but you do have someones code, my concern is that you don't understand their code. Also I was hoping that you could post what you do have, so we can get a better look at what the problem might be. You've turned to the right place indeed, but we can't debug code that we can't see.

[adlb]

Originally Posted by blaze4218

But you did say that you started removing js includes and commenting out lines of js

True, I copied the source code of the haw-lin.com site in its entirety and began commenting out and removing both stylesheets as well as js in an effort to pinpoint what section of code was responsible for the bottom alignment.

Originally Posted by blaze4218

Also I was hoping that you could post what you do have, so we can get a better look at what the problem might be.

Here are the sections of js that, when commented out individually or en masse, the bottom alignment broke:

<script type='text/javascript' src='http://haw-lin.com/_js/cargo.jquery.package.js?11.8.04'></script>
<script type='text/javascript' src='http://haw-lin.com/_js/cargo.site.package.js?11.8.04'></script>
<script type='text/javascript' src='http://haw-lin.com/_js/cargo.tools.package.js?11.8.04'></script>
<script type="text/javascript" src="http://haw-lin.com/designs/feed/feed/template.js?11.8.04" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function() {
   projectLoadComplete();
    
     try {
            if(document.getElementById('content_container')) $("#content_container img").lazyload({ placeholder : "_gfx/whiterati.gif",  threshold : 100, effect : "fadeIn" });
            else $(".index img").lazyload({ placeholder : "_gfx/whiterati.gif",  threshold : 100, effect : "fadeIn" });
            
        } catch(err) {
            return false;
        }
});

function projectLoadComplete() {
    $(".project_content img").removeAttr("align");
    $(".project_content").each(function() { 
        $(this).removeAttr("align");
        $("#content_container").append($(this).html());
    });
    $(".entry").remove();
    $(".project_bottom").remove();
    $(".project_footer").remove();
    $("#content_container").append($("#moreload")).append($("#moreload_link"));
}
</script>

[blaze4218]

And where's the CSS?

[adlb]

Hi blaze. The best thing to do would be to go to the url given in my initial post where the bottom alignment is working properly and view its source code. Any tinkering I did with the code was very minimal, so best to just look at the original.

[blaze4218]

I'm not sure I agree. I don't have the skills to fix code that isn't broken. If it works, there is nothing to debug.

Any tinkering I did with the code was very minimal

It my have been minimal, but we must assume that the tinkering is what caused the failure.

If you just want a blanket statement on how to bottom align an image then here it is:
Fromhttp://www.wpdfd.com/forums/wpdfd/la...bottom_in_css/

all you have to do is something like this. position: absolute; bottom: 0px; are the main ingredients.

#footer
{
color: #f0c;
font-size: 9px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #c00;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 18px
}

If you want help fixing your code, then show the part of the code that is broken.

[blaze4218]

Ok, I must sound like a whackjob right about now... I just realized that I misunderstood your question.

[blaze4218]

advice on how to similarly implement this effect on my site

#images 
{
position: absolute;
bottom: 0px;
}

[adlb]

Hi blaze. I appreciate your patience with me and this question.

I don't have the skills to fix code that isn't broken.

I'm not trying to fix anything that is broken. I'm simply trying to determine what in the code of the page given in my initial post is responsible for bottom aligning the images relative to one another (so that in their rows, they sit on the same baseline) so that I can use the same technique in the page I'm building.

It my have been minimal, but we must assume that the tinkering is what caused the failure.

Agreed. As I stated in my original post that is why after copying over the entirety of the haw-lin.com source code and commenting out select sections (first CSS and then JS) I deduced that something in the JS was responsible for the images bottom aligning with each other after I commented out JS and the alignment broke. So, knowing next to nothing about JavaScript, that is why I posted here.

all you have to do is something like this. position: absolute; bottom: 0px; are the main ingredients.

I am not trying to bottom align a container div, footer, whatever relative to the page. What I want to do is have the images sit on a common baseline in their rows rather than have a common hangline/top line as is the default.

If you want help fixing your code, then show the part of the code that is broken.

I don't know how else to say this, but that I don't have code as of yet. I am examining code of someone else's page that has an effect I desire for my own. I screwed around with it and, as I explained above, found the bottom aligning of the images relative to each other stopped working when I commented out stretches of JavaScript.

[blaze4218]

try this full example and let me know if you don't understand anything

<div style="width:98%;height:100px;position:relative">
<p style="position:absolute;top:0px;right:0px">Positioning can be tricky sometimes!</p>
	<div style="width:55%;height:60%;position:absolute;top:0px;left:0px;border:1px solid #c3c3c3;background-color:#e5eecc;padding:0px 10px;z-index:1;">
	<h2>Decide which element to display in front!</h2></div>
	<div style="width:55%;height:60%;position:absolute;bottom:0px;right:0px;border:1px solid #c3c3c3;background-color:#e5eecc;padding:0px 10px;">
	<h2 style="margin-top:25px">Elements can overlap!</h2></div>
</div>

[adlb]

Ok, I must sound like a whackjob right about now... I just realized that I misunderstood your question.

You don't sound like a whackjob—I was just starting to think I wasn't being clear enough.

try this full example and let me know if you don't understand anything

Fantastic, thanks so much blaze. I am cutting out for the day so probably won't test this snippet until tomorrow, but I sincerely appreciate your help with my question!

[ironboy]

Here's another solution:

<!DOCTYPE HTML>
<html>
<head>
<style>
/* Just to mark out the img in this example */
img {background:#ddd}

/* Here our real CSS starts */
div.oneRow div {
  margin:0 20px 40px 20px;
  float:left
}

div.oneRow div.clearer {
  clear:both;
  float:none;
  margin:0
}
</style>

<script type="text/javascript">
// This would be faster using a library such as jQuery
// where you can grab elements by className etc...
// but for your enjoyment: pure javascript

var alignImgs = function(){
  var divs = document.getElementsByTagName('div');
  for(var i = 0; i< divs.length;i++){
    if (divs[i].className.indexOf('oneRow')>=0){
      // in each row get the inner divs
      var innerDivs = divs[i].getElementsByTagName('div');
      // get their heights
      var heights = [];
      for(var j=0;j < innerDivs.length - 1; j++){
        heights.push(innerDivs[j].offsetHeight)
      };
      // calculate the biggest height
      var maxHeight = Math.max.apply(Math,heights);
      // adjust the margin top to the difference between height and maxHeight
      for(var j=0;j < innerDivs.length - 1; j++){
        innerDivs[j].style.marginTop = (maxHeight - heights[j]) + 'px'
      };
    }
  }
};

onload =alignImgs;
</script>
</head>
<body>
<div class="oneRow">
  <div><img src="whatever" width="200" height="400"/></div>
  <div><img src="whatever" width="200" height="500"/></div>
  <div><img src="whatever" width="200" height="450"/></div>
  <div class="clearer"></div>
</div>
<div class="oneRow">
  <div><img src="whatever" width="200" height="370"/></div>
  <div><img src="whatever" width="200" height="350"/></div>
  <div><img src="whatever" width="200" height="420"/></div>
  <div class="clearer"></div>
</div>
</body>
</html>

[adlb]

blaze and ironboy—thanks to you for your help on this question. Your solution, ironboy, works well if I have defined rows, which is not the case; the layout for the site I'm working on needs accommodate for fluid width, so if the browser window is made wider or narrower by the user, images come up to the row above or break nicely to the row below, respectively, all while remaining bottom aligned.

I got an answer from someone on another forum and I'm kicking myself for not figuring this out, since it's a pretty simple fix (but then again, just like with JS, I'm not too savvy with CSS though I am a bit more competent). Here it is:

img {
	vertical-align:baseline;
	display:inline;
}

That's it!