SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problems with a function applying only once...

    The following function was intended to apply a re-size process to various ULs found within DIVs that have the class name of "block". The problem is that it only applies the functionality to only 1 UL and I think it's because I haven't used an array in all this... Anyway, the function is below and I would really appreciate any input on this because I think it's almost there, but you'll be the better judge:

    Code:
    function list_resize(z){
    	var w = document.getElementById(z).childNodes;
    	var div_height = 0;
    	var item_height = 0;
    	for(var a in w){//for each element in 'w'...
    		if(w[a].tagName == 'DIV' && w[a].className.match(/block/i)){
    			div_height = w[a].offsetHeight;
    			var ul = w[a].childNodes;
    			for(var b in ul){//for everything inside the DIVs...
    				if(ul[b].tagName == 'UL'){
    					var list_items = ul[b].getElementsByTagName('li');
    					for(var c=0;c<list_items.length;c++){//for every LI...
    						item_height += list_items[c].offsetHeight;
    						if(item_height > div_height){
    							list_items[c].style.visibility = "hidden";
    						}else{
    							list_items[c].style.visibility = "inherit";
    						}
    						
    					}
    				}
    			}
    		}
    	}
    }
    If you need to test it out, just create 1 DIV and pass the ID of it to this function. Make sure this primary DIV contains at least 1 DIV with the class name of "BLOCK" and ensure that this child DIV has a couple ULs that go beyond the height confines of their containing DIV parent's height, i.e. - "try to make the UL bust out of the DIV" (or just copy and paste the following markup and throw the function into an window.onload):

    Code:
    <div id="w"><div id="block" class="inline block">
    	<ul id="test">
    		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    	</ul>
    	<ul id="test">
    		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    	</ul>
    </div>		
    <div id="block2" class="inline block">
    	<ul id="test2">
    		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    	</ul>
    </div></div>
    Again, any input on why the function isn't working would help this Javascript dummy out a lot.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just glancing at it, are you sure you meant to increment item_height here, rather than assign it?
    Code:
    item_height += list_items[c].offsetHeight;
    Tab-indentation is a crime against humanity.

  3. #3
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this could be a good opportunity to build on your debugging skills with some basic debugging.

  4. #4
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Logic, the rationale behind that decision was to maintain a continuous record of the given total height each LI added up to at that given LIs turn in the flow.

    After the height of each LI is added up, the total number will either equal a number that is accommodated by the height of the containing DIV or else be categorized as requiring the "hidden" attribute. That += was a way for me to keep a tally on this.

    Kalon, trust me, I realize that! Ha. I've been trying to unit test this thing to the point where I'm driving myself nuts. I came on here because I began to smell smoke from my tires... Maybe I just need to think about it some more.

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wolf_22 View Post
    Kalon, trust me, I realize that! Ha. I've been trying to unit test this thing to the point where I'm driving myself nuts. I came on here because I began to smell smoke from my tires... Maybe I just need to think about it some more.
    if you've tested it as thoroughly as I describe in the link I posted then you would have eventually come to a line in your code that resulted in either some variables containing wrong values, not existing or whatever, or some other logic or syntax error.

    Now I have 3 options here:

    1) I go through your code line by line with alert()'s and find the problem for you.

    2) wait for someone else to debug it for you

    3) you go through the debugging process again more thoroughly.

    I am assuming you wrote all this code and didn't copy and paste it from somewhere.

  6. #6
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nobody needs anymore legwork. I was just hoping that I might have overlooked something obvious.

    I'll sit on it for awhile and see what I can come up with.

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm a bit unclear of your problem... When I ran your code the li height counter did it's job and hid the li's when the parent div height was reached. Can you please clarify, many thanks...

  8. #8
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for being unclear, Karl. I'll admit that this is hard to explain and I'm just happy to have some patient people to bring this to. Let me give this another try...

    What I'm trying to do here is create a function that assists with the presentation of lists. I have many ULs whose exact number of LIs is always unknown due to the back-end being employed.

    1 or more ULs will be contained in multiple DIV tags that all have the class attribute of "BLOCK" (i.e. - <div class="block">). Each of these DIVs also have a given height, albeit 100px or 25%--whatever the theme requires.

    Since each UL maintains a dynamic height due to the dynamic number of LIs it's populated with, it's not uncommon for one of the ULs to overload a given height of its parent DIV. Because of this, I needed a function in Javascript that could hide only those LIs contributing to this overloading of height. Overflow:hidden isn't a solution here because it doesn't "cleanly" hide the LIs and the DIVs can't have their height altered, either.

    This function begins by being given the ID of a generic container (some div or whatever). This container is the guy that holds every DIV containing the ULs. From there, what this function is supposed to do is cycle through each DIV in search for only childNodes of tagName "UL" but that also require the hiding routine given their DIV's height isn't enough for the total UL height based off of the tallied total gathered from each LI's height. Understand? In other words, if the DIV isn't big enough, this function only displays however many LIs it can without breaking the height of the DIV.

    The problem I keep running up against in all this is how this function only seems to work for only 1 DIV. If multiple DIVs containing 1 or more UL elements require this functionality, it takes the hiding style of the DIV and applies it to the other DIVs / ULs, regardless of whether or not the height processing is required. So if the first DIV contains 1 UL and the re-sizing routine is applied, it will seemingly do this same exact calculation to the other DIVs as well. It's like it thinks there's only 1 DIV on the whole page...

    I hope that helps clear things up. I apologize if it only makes things worse!

    Here's an attempt at a visual example of what I'm trying to achieve:


    DIV with 1 UL BEFORE having functionality applied (border represents containing DIV) -

    ---------------
    | Lorem Ipsum |
    | Lorem Ipsum |
    | Lorem Ipsum |
    | Lorem Ipsum |
    | Lorem Ipsum |
    | Lorem Ipsum |
    ---------------
    Lorem Ipsum <-- LI is beyond DIV confines.
    Lorem Ipsum <-- LI is beyond DIV confines.
    (The LIs go beyond the confines of the DIV's accomodating height.)


    Now a DIV with 1 UL AFTER having functionality applied -

    ---------------
    | Lorem Ipsum |
    | Lorem Ipsum |
    | Lorem Ipsum |
    | Lorem Ipsum |
    | Lorem Ipsum |
    | Lorem Ipsum |
    ---------------

    No LIs break outside of the DIV confines and each is "cleanly" hidden without vertically being chopped in half or horizontally dropped at odd characters (like overflow:hidden often does.) Again, this functionality works perfectly on the first DIV containing a UL, but if you try to simultaneously apply this to multiple DIV.BLOCKs, you'll see that the first application of it is somehow spread across the board. It's weird... Anyway, I hope this helps.

    Here's 1 more example of what I'm currently getting when applying this function to multiple DIVs:

    --------------- --------------------
    | Lorem Ipsum || ///////////////////// |
    | Lorem Ipsum || ///////////////////// |
    | Lorem Ipsum || // EMPTY SPACE // |
    | Lorem Ipsum || ///////////////////// |
    | Lorem Ipsum || ///////////////////// |
    | Lorem Ipsum || ///////////////////// |
    --------------- --------------------
    The second DIV appears completely devoid of anything due to the hiding routine being incorrectly applied to every UL in the other DIV. To me, it seems as if the function thinks the other ULs are the first UL.

  9. #9
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, do you not need to just reset your item height after every container div iteration, like so...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
        div#w div { background-color: #f00;
              height: 100px; }
        </style>
        <title></title>
    </head>
    <body>
    
    <div id="w"><div id="block" class="inline block">
    	<ul id="test">
    		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    	</ul>
    	<ul id="test1">
    		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    	</ul>
    </div>		
    <div id="block2" class="inline block">
    	<ul id="test2">
    		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    	</ul>
        	<ul id="test3">
    		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    		<li>Nullam accumsan lectus id sapien tincidunt eleifend</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    		<li>Nunc eu tortor velit, vel aliquet turpis</li>
    	</ul>
    </div></div>
    
    <script type="text/javascript">
    
    function list_resize(z){
    	var w = document.getElementById(z).childNodes;
    	var div_height = 0;
    	var item_height = 0;
    	for(var a in w){//for each element in 'w'...
            if (w[a].tagName == 'DIV' && w[a].className.match(/block/i)) {
    	        // reset item height  KO
    	        item_height = 0;
    			div_height = w[a].offsetHeight;
    			var ul = w[a].childNodes;
    			for(var b in ul){//for everything inside the DIVs...
    			    if (ul[b].tagName == 'UL') {
    			        console.log(div_height);
    					var list_items = ul[b].getElementsByTagName('li');
    					for(var c=0;c<list_items.length;c++){//for every LI...
    						item_height += list_items[c].offsetHeight;
    						if(item_height > div_height){
    							list_items[c].style.visibility = "hidden";
    						}else{
    							list_items[c].style.visibility = "inherit";
    						}
    						
    					}
    				}
    			}
    		}
    	}
    }
    window.onload = list_resize("w");
    </script>
    
    </body>
    </html>
    This will cut off the li's if the container div height is reached, hope this helps.

  10. #10
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Karl, if I could, I would give you a million dollars!

    Working like a charm!

    I feel like Tim Robbins at the end of "The Shawshank Redemption" when he flops out into that pond...

  11. #11
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, my first post and I helped somebody


Bookmarks

Posting Permissions

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