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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts

    Prototype: get all childElements with <img> & combine their height for 1 value

    I don't really know where to start even in theory, but I know there is a way. Could someone point me into the right direction?

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    $$('img') would pull all img tags

    http://www.prototypejs.org/api/utility/dollar-dollar

    suffix it with an each statement to walk through and get all the values:

    http://www.prototypejs.org/api/array/each

    and use getHeight to get the height and add them up...

    http://www.prototypejs.org/api/element/getheight

    Code:
    function(){
    
    var total = 0;
    
    $$('img').each(function(s){ elval = s.getHeight();   
    
    total = total + elval;
    }) return total; }
    play around with it, i'm sure i made a couple dumb mistakes and it's untested. anyone else feel free to double check that for retardation.

  • Users who have thanked ohgod for this post:

    rhinodog8 (11-29-2008)

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Wow, thanks so much. Your code worked right out of the box. But i modified it a little for an each function inside a specific div containing imgs and to include the offset width of the imgs.

    also eval threw an error, although it got the heights, so I just used s as the variable.

    Heres what my code if anyone was wandering...
    Code:
    total=0;
    //search picture li for first div's images and combines all the widths of each image
    
    b.childElements()[0].select('img').each(function (w) {s=w.offsetWidth;total= total+s;});
    
    //Set the inner pcture div to all the images combined width & plus 3 for IE6
    
    b.childElements()[0].setStyle({width: total+3+'px'});
    Last edited by rhinodog8; 11-29-2008 at 01:35 AM.


  •  

    Posting Permissions

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