Web Analytics Made Easy -
StatCounter Need a script to dynamically set the height of one div based on that of another - CodingForum

Announcement

Collapse
No announcement yet.

Need a script to dynamically set the height of one div based on that of another

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need a script to dynamically set the height of one div based on that of another

    Hi,

    I'm trying to create the following visual feature on my page (www.enviromark.ca/Collab/study.html). if you notice, there is a border-right: 1px solid grey; on the 'links' div. I would like to do the following:
    • onload, i would like the height of the 'links' div to be saved into a variable
      • i assume this would be done using a variation of 'var minHeight = document.getElementByID('links').offsetHeight'
    • onclick, i would like the height of the div about to be loaded (aka unhidden) to be saved into a variable... say var newHeight for ex.
    • IF newheight > minHeight, set document.getElementByID('links').height = 'newHeight' + px;


    here's how i tried to code it:
    Code:
    <script language="JavaScript">
    function setBorderHeight(divName) 
    {
    	var minHeight = document.getElementByID('links').offsetHeight;
    	var newHeight = document.getElementByID(divName).offsetHeight;
    
    	if (newHeight > minHeight) 
    		{
    			document.getElementByID('links').style.height = 'newHeight' + px;
    		}
    }
    </script>

    here's an example of a link:
    Code:
    <a class="mainLinks" href="learnMore" onclick="setBorderHeight('learnMore'); ball(this.previousSibling); return toggle('learnMore', 0);"
    onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Learn More</a>
    what went wrong?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Its document.getElementById not document.getElementByID. Since newheight is a variable, it shouldn't be in quotes. px however should be in quotes. And the language attribute is deprecated, don't use it anymore.
    Code:
    <script type="text/javascript">
    function setBorderHeight(divName) 
    {
    	var minHeight = document.getElementById('links').offsetHeight;
    	var newHeight = document.getElementById(divName).offsetHeight;
    
    	if (newHeight > minHeight) 
    		{
    			document.getElementById('links').style.height = newHeight + 'px';
    		}
    }
    </script>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      mmm, it doesn't seem to be doing it.

      for this to work, do i have to have hardcoded the height of all the divs into the CSS, or does offsetHeight measure out how much of the div is used?

      apart from that i can't guess as to why it wont work. any ideas?

      here's the code if you want a look
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <title>The Concordia Collaboration Lab</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      
      <script language="JavaScript" type="text/javascript" src="js/borderFade.js"></script>
      
      <script type="text/javascript">
      function setBorderHeight(divName) 
      {
      	var minHeight = document.getElementById('links').offsetHeight;
      	var newHeight = document.getElementById(divName).offsetHeight;
      
      	if (newHeight > minHeight) 
      		{
      			document.getElementById('links').style.height = newHeight + 'px';
      		}
      }
      </script>
      
      <script type="text/javascript"> 
        var arrPrevDiv = [null, null];
      
        function toggle(id, linkGroup) {
      
      	if (arrPrevDiv[linkGroup] != null) {
      		arrPrevDiv[linkGroup].style.display = "none"; 
      	}         
      
      	var s = document.getElementById(id);
      				
      	if (id != 'intro') {
      		document.getElementById("intro").style.display = "none"	
      		}
      		
      	s.style.display = (s.style.display=="") ? "block" : (s.style.display=="none") ? "block" : "none"; 
      	arrPrevDiv[linkGroup] = s; 
      	// window.location.href='#'+ id;
      	window.status=''
      
      /* if (linkGroup==0 && arrPrevDiv[1] && arrPrevDiv[1].id=="stopShow") { 
       		alert("Please stop the slideshow before continuing.");
      	 	return false; 
      	} 
      	
      	window.onload = function(){
      	arrPrevDiv[1] = document.getElementById("startShow");
      	}
      */
      	}  
      
      </script>
      
      <script type="text/javascript">
      function ball(s){ 
              while(s.nodeType!=1){ 
                  s=s.previousSibling; 
              } 
              var balls=document.getElementById('links').getElementsByTagName('img'); 
              var i=0, b 
              while(b=balls[i++]){ 
                  if(b.id!='noGreen'){ 
                      b.className=b==s?'vis':'hid'; 
                      b.style.float = 'left'; 
      				b.style.display = 'inline';
      				b.style.position = 'absolute';
                  }
              } 
          }  
      
      </script>
      
      <style type="text/css">
      * {
      padding: 0;
      margin: 0;
      }
      html, body {
      height: 100%;
      text-align: center;
      font-family: "verdana", trebuchet ms, arial, sans-serif;
      font-size: 11px;
      background-color: white;
      }
      #pageContainer {
      min-height: 100%;
      }
      * html #pageContainer {
      height: 100%;
      }
      A:link, A:visited, A:active {
      text-decoration: none; 
      color: #0000a0;
      font-size: 8pt
      }
      #welcome {
      margin-left: auto;
      margin-right: auto;
      margin-top: 50px;
      margin-bottom: 50px;
      position: relative;
      font-size: 14pt;
      }
      #links {
      float: left;
      display: inline;
      width: 200px;
      margin-top: 75px;
      position: relative;
      text-align: right;
      border-right: 1px #ccc solid;
      line-height: 0.7cm;
      padding-bottom: 10px
      }
      .mainLinks {
      position: relative;
      text-decoration: none;
      margin-left: 25px;
      margin-right: 25px;
      }
      #mainDisplay {
      position: relative;
      margin-right: 100px;
      margin-left: 175px;
      }
      #mainDisplay p {
      margin-bottom: 15px;
      text-indent: 1cm
      }
      #mainDisplay ul {
      list-style: url(images/check_ul.gif) none outside;
      padding-left: 50px;
      margin:5px 0px 2px 0px;
      }
      #mainLogo {
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      height: 315px;
      width: 417px;
      padding: 20px;
      }
      #Link2, #Link3, #Link4, #Link5, #Link6, #Link7, #Link8, #Link9  {
      display: none;
      margin-top: 175px;
      margin-left: 60px;
      text-align: left;
      font-size: 10pt;
      }
      #intro {
      margin-left: 205px;
      margin-top: -25px;
      }
      #mainLogo {
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      height: 315px;
      width: 417px;
      padding: 20px;
      }
      .vis{
      visibility:visible;
      }
      .hid{
      visibility:hidden;
      display: inline;
      position: absolute;
      z-index: -2
      }
      .clear {
      clear:both;
      font-size:0;
      line-height:0px;
      }
      .emailLinks a{
      font-size: 10pt
      }
      #formanPic {
      float: left;
      margin-right: 20px
      }
      #sara {
      clear: both;
      height: 350px;
      width: 275px;
      position: relative;
      float: left;
      margin-right: 25px;
      margin-top: 50px;
      text-align: center;
      }
      #MP {
      display: inline;
      height: 350px;
      width: 275px;
      position: relative;
      float: right;
      margin-right: 25px;
      margin-top: 50px;
      text-align: center;
      }
      #liane {
      clear: left;
      position: relative;
      display: block;
      height: 350px;
      width: 275px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      margin-top: 25px
      }
      </style>
      
      </head>
      
      <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
      <div id="pageContainer">
      	<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
      	<div id="links">
      		<img src="images/green_google_ball.gif" class="vis" id="normalBall"><a href="#intro" onclick="ball(this.previousSibling); return toggle('intro', 0);"><img src="images/no_green_google_ball.gif" id="noGreen" border="0"></a>
      		<br><br>
      		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link2" onclick="ball(this.previousSibling); return toggle('Link2', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">General Information</a>
      		<br>
      		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link3" onclick="setBorderHeight('Link3'); ball(this.previousSibling); toggle('Link3', 0);  return false" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">The Investigator</a>
      		<br>
      		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link4" onclick="ball(this.previousSibling); return toggle('Link4', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">What to Expect</a>
      		<br>
      		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link5" onclick="ball(this.previousSibling); return toggle('Link5', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Eligibility</a>
      		<br>
      		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link6" onclick="ball(this.previousSibling); return toggle('Link6', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Advantages and Risks</a>
      		<br>
      		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link7" onclick="ball(this.previousSibling); return toggle('Link7', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Confidentiality</a>
      		<br>
      		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link8" onclick="ball(this.previousSibling); return toggle('Link8', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Reimbursement</a>
      		<br>
      		<img src="images/green_google_ball3.gif" class="hid"><a class="mainLinks" href="#Link9" onclick="ball(this.previousSibling); return toggle('Link9', 0);" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Learn More</a>
      	</div>
      	<div id="mainDisplay">
      		<div id="intro">
      			<div id="mainLogo"><img src="images/happy.gif"></div>
      		</div>
      		<div id="Link2">
      			<p>We are studying what makes young children eager to learn through imitation. It is well understood that imitation is important for young children, both for learning skills and for learning right and wrong. We are also interested in parent-child relationships and in children’s responsiveness more generally.</p>
      			<p>This work will deepen our understanding of children’s eagerness to learn through imitation. It could also potentially inform our understanding of teaching and learning processes, and of child social responsiveness more generally.</p>
      			<p>This study is funded by a grant from the Social Science and Humanities Research Council under the title “Social Determinants of Children's Imitation”</p>
      		</div>
      		<div id="Link3">
      			<img src="images/David_Forman.jpg" id="formanPic">
      			<p>This study is directed by Dr. David R. Forman, an Associate Professor in the department of Psychology at Concordia University and a member of the Center for Research on Human Development. Dr. Forman received his PhD in psychology at the University of Iowa where he studied collaboration in young children and the mother-child relationship.</p>
      			<p>Dr. Forman works with a team of psychology students who study early-childhood development and have a great deal of experience working with young children.</p>
      			<p></p>
      			<div id="sara">
      				Sarah Vannier: Research Manager
      				<br>
      				<br>
      				<img src="images/S_Vannier.jpg">
      			</div>
      			<div id="MP">
      				Marie-Pierre Gosselin: Masters Student
      				<br>
      				<br>
      				<img src="images/MP_Gosselin.jpg">
      			</div>
      			<p></p>
      			<div id="liane">
      				Liane Kandler: Research Assistant
      				<br>
      				<br>
      				<img src="images/L_Kandler.jpg">
      				<br>
      			</div>
      		</div>
      		<div id="Link4">
      			<p>If you decide to participate in our study you will be asked to come with your child to our lab at Concordia University’s Loyola campus for two visits about 1 to 2 weeks apart. Each visit will last approximately 90 minutes.</p>
      			<p>During each visit you will complete several activities with your child. All activities will be filmed. The activities are designed to observe eagerness to learn from parents, the development of child responsiveness to parents’ requests, and routine parent-child interactions. The activities are things parents often do with their children and include:</p>
      		<ul>
      			<li>Showing your child a sequence of actions to imitate</li>
      			<li>Building something together with wooden blocks</li>
      			<li>Showing your child toys which are “off-limits” and enforcing this rule throughout your visit</li>
      			<li>Asking your child to help cleanup after playing with toys</li>
      			<li>Having a snack together</li>
      			<li>Reading a story together</li>
      			<li>Completing a questionnaire about your child’s personality while your child must keep him/herself occupied</li>
      			<li>Completing a questionnaire that asks bout your well-being</li>
      		</ul>		
      		</div>
      		<div id="Link5">
      			You are eligible for our study if:
      			<p></p>
      			<ul>
      				<li>Your child is between 24 and 30 months old</li>
      				<li>You speak to your child primarily in English or in French</li>
      				<li>You are the child’s primary caregiver (you are the parent who spends the most time with your child)</li>
      				<li>Your child has never been diagnosed with a cognitive disability</li>
      			</ul>
      			<p></p>
      			If you are not eligible for this study, but are interested in our research, please feel free to contact us as you may be eligible for future studies.
      		</div>
      		<div id="Link6">
      			<p>With the exception of these small thank you gifts, participation in the study will provide no direct benefit to you or to your child. You should be aware that the researcher's work is designed to answer some very basic questions about early social development. Therefore what researchers are doing should not be perceived as therapy, nor will it benefit you and your child directly. Rather, the greater benefit will be to children at large. When the study is complete the researchers plan to send you a brief summary of their findings.</p>
      			<p>There are no substantial risks associated with this study. Occasionally children find some of the activities frustrating, but not any more than other activities a 2-year old would face in day to day life.</p>
      			<p>You may withdraw from participation at any time, without prejudice to your current or future relations with Concordia University. In addition, we encourage you to end any activity immediately if you think your child may be too tired or too frustrated to continue. </p>
      			<p>
      				<i class="emailLinks">If at any time you have questions about your rights as a research participant, please contact Adela Reid, Research Ethics and Compliance Officer, Concordia University, at (514) 848-7481 or by email at
      					 <script language="JavaScript" type="text/JavaScript"> 
      					<!-- 
      					var name = "areid"; 
      					var domain = "alcor.concordia.ca"; 
      					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
      					document.write(name + '@' + domain + '</a>'); 
      					// --> 
      					</script>
      				</i>
      			</p>
      		</div>
      		<div id="Link7">
      			<p>All sessions will be videotaped.  The tapes will be used for research and/or educational purposes, and you and your child will be identified by first name and age only. All documents containing information identifying your child or yourself will remain in a locked file in the office of the coordinators (Consent forms, etc).  The tapes will be retained for seven years from the completion of the study or from publication of the results, whichever occurs later. Your name and your child's name will be withheld from all published reports of this work.</p>
      				<p>
      				<i class="emailLinks">If at any time you have questions about your rights as a research participant, please contact Adela Reid, Research Ethics and Compliance Officer, Concordia University, at (514) 848-7481 or by email at
      					<script language="JavaScript" type="text/JavaScript"> 
      					<!-- 
      					var name = "areid"; 
      					var domain = "alcor.concordia.ca"; 
      					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
      					document.write(name + '@' + domain + '</a>'); 
      					// --> 
      					</script>
      				</i>
      			</p>
      		</div>
      		<div id="Link8">
      			<p>As a token of our thanks, after each visit, your child will receive a small gift, and you will receive 20 dollars. Cost of transportation can also be reimbursed.</p>
      		</div>
      		<div id="Link9">
      			<p>If this sounds interesting to you or you would like to learn more please feel free to call Sarah or Marie-Pierre (514) 848-2424, ext. 5286 or e-mail us at 
      				<i class="emailLinks">
      					<script language="JavaScript" type="text/JavaScript"> 
      					<!-- 
      					var name = "collab"; 
      					var domain = "concordia.ca"; 
      					document.write('<a href="mailto:' + name + '@' + domain + '" onmouseover="window.status=\'Click here to send an e-mail to '+ name + '@' + domain+'\';return true" onmouseout="window.status=\'\'">'); 
      					document.write(name + '@' + domain + '</a>'); 
      					// --> 
      					</script>
      				</i>
      			</p>
      		</div>
      	</div>
      </div>
      </body>
      </html>
      oh, on a completely seperate note... whats that 1-line code to prevent IE and FF from showing those annoying thin dotted lines around links when they are pressed?
      Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

      Comment


      • #4
        Alert newheight and alert minheight to see what is being returned. The condition may not be met. As for those dotted lines there is no 1line code for IE. For Firefox its outline:0; in CSS but its not supported by IE. I say just live with it as its an accessibility issue. Okay newheight is returning 0. This is because its display is still set to none so it doesn't 'exist'. You need to call the setBorderHeight() function after you toggle function call. Making that border a background image would be better as you could put the left side and the content in a div with a set background so the div's background will get bigger according to the content. No JS needed.
        Last edited by _Aerospace_Eng_; Oct 3, 2006, 01:44 AM.
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          you were right about the toggle placement, but when i did it i encountered a small problem

          var minHeight is not staying static as the initial height of 'links', its is being recalculated every time setBorderHeight() is being called. i tried to fix it via the code below but alas i failed

          any ideas why?
          Code:
          <script type="text/javascript">
          var minHeight;
          	
          	window.onload = function() 
          	{
          		minHeight = document.getElementById('links').offsetHeight;
          	}
           
          
          function setBorderHeight(divName) 
          {
          	var newHeight = document.getElementById(divName).offsetHeight;
          
          	if (newHeight > minHeight) 
          		{
          			document.getElementById('links').style.height = newHeight + 'px';
          		}
          }
          </script>
          I chose to go with the JS approach because in this instance I wanted it to look like it was the right border of the 'links' div, not the left border of the main display div... but the CSS approach may prove more versatile. I'll explore both but i just want to get this working first (its one of the first scriptlets i have tried coding myself and not just posted a request for someone else to do it for me )
          Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

          Comment


          • #6
            You can't have a body onload and window.onload on the same page you need to combine them. Change this
            Code:
            <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15)">
            to this
            Code:
            <body>
            Then when you use window.onload = function() { } place this inside of the brackets
            Code:
            zxcInit('mainLinks','#FFFFFF','#000000',15)
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              sorry for the delayed response: school & such

              alright, i set the script up as requested:

              Code:
              <script type="text/javascript">
              var minHeight;
              	
              	window.onload = function() 
              	{
              		minHeight = document.getElementById('links').offsetHeight;
              		zxcInit('mainLinks','#FFFFFF','#000000',15);
              	}
               
              
              function setBorderHeight(divName) 
              {
              	var newHeight = document.getElementById(divName).offsetHeight;
              
              	if (newHeight > minHeight) 
              		{
              			document.getElementById('links').style.height = newHeight + 'px';
              		}
              }
              </script>
              
              link example: 
              <a class="mainLinks" href="#Link8" onclick="ball(this.previousSibling); toggle('Link8', 0); setBorderHeight('Link8'); return false;" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);">Reimbursement</a>
              There seem to be two errors occuring now that it's functional:
              1) when you click "investigator", the pictures get pushed way down the page. I assume this has something to do with one div pushing the other down, but maybe you'll be able to shed some light on the exact cause.

              2) The actual height of the links border is going weird... its like sometimes it displays the proper height and other time not. I'm beginning to think the CSS approach to this would be smarter.

              what do you think?

              i put it up here: www.enviromark.ca/Collab/tests/T4.htm
              Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

              Comment

              Working...
              X