Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Bottom Aligning Images with JavaScript?

    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!

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Quote Originally Posted by adlb View Post
    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.

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by blaze4218 View Post
    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.

    Quote Originally Posted by blaze4218 View Post
    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:

    Code:
    <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>

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    And where's the CSS?

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Ok, I must sound like a whackjob right about now... I just realized that I misunderstood your question.

  • #10
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    advice on how to similarly implement this effect on my site
    Code:
    #images 
    {
    position: absolute;
    bottom: 0px;
    }

  • #11
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    try this full example and let me know if you don't understand anything
    Code:
    <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>

  • #13
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #14
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Here's another solution:
    Code:
    <!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>
    Last edited by ironboy; 09-28-2011 at 11:28 PM.

  • #15
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    img {
    	vertical-align:baseline;
    	display:inline;
    }
    That's it!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •