Search code examples
javascriptdynamicnestedheightfixed

How to dynamically switch the fixed height of a parent div between two values (while inside one of the nested divs's Javascript functions)

I am calling this Javascript function: 

var facing = "First";

function switchit(list){
      if (list != facing){
          document.getElementById(facing).style.display="none";
  };
 var listElementStyle=document.getElementById(list).style;
      if (listElementStyle.display=="none"){
          listElementStyle.display="block";
  } else {
          listElementStyle.display="none";
  }
 facing = list;
 }
</script>

inside a nested div so that when a hyperlink is clicked it will show one element and hide the other like this snippet:

    <div id="bio">



            <!--Ty Expansion -->
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bioEmphasis">What</span> O.L.L.I.E. Lifestyle represents is very personal to me. It has been an aspiration of mine to dedicate myself to the betterment and empowerment of our youth.  <a href="javascript:switchit('First')">Click to read more..</a><br />
         <div id="First" style="display: none;">   

            </p>

           <hr/><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bioEmphasis">Apart</span> of a society where the vast majority of youth are growing up in single parent homes (many in low income neighborhoods). I have witnessed first hand how heavily influenced the youth are by television, music and movies. More Educators, Athletes and Professionals are needed to lend encouragement and guidance on becoming productive members to our environment instead of adapting to a fatal cliché of being a product of their environment.</p>
    </div>

    <p>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bioEmphasis">Life is</span> a crazy game!! The trick is to learn how to play! Growing up in New Jersey, the second youngest out of eight, I was fortunate enough to see how the game is NOT supposed to be played.  I watched my brothers and sister go through dealing with the law, drugs, and a “content” way of life. This was the beginning of me really wanting to live my life in excellence.  <a href="javascript:switchit('Second')">Click to read more..</a><br />
         <div id="Second" style="display: none;">   


         </p>
         <hr/><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bioEmphasis">All through</span> middle and high school, I was an honor student. Unfortunately, I always was attracted to the “under life”. It seemed like the more popular, in crowd thing to do. I felt like this because of some of my earlier struggles. Having a distinct name and a handicapped brother would fuel my want to be a part of the normal crowd. I can fondly remember being constantly made fun of for being different. Little did I know, what I was doing all along was the right thing and would pay off.</p>
    <hr />

    </div>
</div>

The functions work perfectly to expand one div element at a time inside the larger div container. The problem is that when I expand either of the elements by clicking the hyperlink...The larger div container(red gradient square) pushes everything past the background (solid grey square) and screws up the look of the entire page because the div, (which is a few levels up), containing the background is a fixed width, (as a percentage width would not work). I know the exact two widths the background would need to expand to dynamically as a result of the hyperlink being click by a user, but I do not have any idea how to do this from within the aforementioned Javascript function I posted. Does anyone have any idea or help for me? It is very confusing as the div I need to resize is a full 3 levels outside of the function call I am working with. As an example the function call is happening in the last div of this flow:

div#topwrapper-->div#greySquareH-->div#LeftSide-->div#bioWrapper-->div#bio

and results in either a div#First or div#Second being generated inside the div#bio. I need to resize the div#greySquareH height property. Thanks for any help in advance guys!

Solution

  • I'm not sure I follow your question exactly - you've put in a lot of detail that is hard to read, and seems to be hiding your main point.

    I think you're just asking how to dynamically change the height of the div#greySquareH

    In which case, what you want is

    document.getElementById("greySquareH").style.height="40px";

    Obviously, you'd replace "40px" with whatever height you want

    If you're looking for more info than that, please leave a brief comment explaining what else you're after.

    Update: There is only 1 document for the whole HTML page, so you can put that line of code into any function you want and it will do the same thing.

    The switchit function that you have already written isn't restricted to only working on the DIVs that you've attached it to.

    Just drop it in your existing function right before your facing = list; line.