Member Avatar for MrPixel

Hey folks,

Long story short. I've been looking around all day for a script that would detect the height of one div (can't be predefined because of dynamic text content), and set a second div as that same height.

I found a few forum topics about scripts I thought could be altered to fit what I need, but I just don't know enough about javascript to get anything working.

Can anyone here point me in the right direction please?

Thanks a lot,
MrPixel.

  • 6 Contributors
  • 11 Replies
  • 320 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by bulletcatcher

Recommended Answers

All 11 Replies

Member Avatar for hunkychop

try this:

<div id="div1" style="background:#003399; height:152px; width:175px; position:absolute; left: 595px; top: 181px;">div 1</div>

<div id='div2' style="background:#99FF00; height:500; width:500; position:absolute; left: 44px; top: 143px;">div 2</div>

<input type="button" onclick="javascript:matchHeight('div1','div2');" value="match height" />



<script type="text/javascript">
function matchHeight(id1,id2)
	{	
		var el1=document.getElementById(id1);
		var el2=document.getElementById(id2);
		
		el2.style.height = el1.style.height;
	}
</script>
Member Avatar for MrPixel

Hey,

Thanks for the reply. That's looks to be more what I'm looking for, however, the div would have to have the height set on load of the page, rather than user interaction.

So on load, if you had 2 divs right beside each other, the first had text, the second had nothing, they would both load as the same height.

Thanks again,
MrPixel.

Member Avatar for hunkychop

put the <script> in the head of your page and change your body tag to this:

<body onload="javascript:matchHeight(div1id,div2id);">

Member Avatar for MrPixel

Thanks for replying again.

This doesn't seem to be working for me.

Do you have it working?

Member Avatar for hunkychop

yes. here is the full script:

<head>
<script type="text/javascript">
function matchHeight(id1,id2)
	{	
		var el1=document.getElementById(id1);
		var el2=document.getElementById(id2);
		
		el2.style.height = el1.style.height;
	}
</script>
</head>
<body onload="javascript:matchHeight('div1','div2');">

change 'div1' to the ID of the div that will not change.
change 'div2' to the ID of div that will change
make sure they are in quotes like the script shows here.

MAKE SURE WHEN YOU COPY AND PASTE THE NUMBERS DONT PASTE

Member Avatar for MrPixel

Ah, I am sorry about that, I have it working now.

Thank you very much for your help... It's exactly what I needed.

MrPixel.

Member Avatar for doffen74

try this:

<div id="div1" style="background:#003399; height:152px; width:175px; position:absolute; left: 595px; top: 181px;">div 1</div>

<div id='div2' style="background:#99FF00; height:500; width:500; position:absolute; left: 44px; top: 143px;">div 2</div>

<input type="button" onclick="javascript:matchHeight('div1','div2');" value="match height" />



<script type="text/javascript">
function matchHeight(id1,id2)
	{	
		var el1=document.getElementById(id1);
		var el2=document.getElementById(id2);
		
		el2.style.height = el1.style.height;
	}
</script>

Hi.
I know this was solved a while ago, but I just read it now in search of a similar solution.

Even if the thread-starter got it working, I cannot. I just copied and pasted like described, and changed the name of the divs accordingly.

Java is not my strong side, if I even have any, but I know ASP, so I understand the code, but not skilled enough to modify the syntax beyond the basics...

My website is here: www.festivalguide.no and I am trying to align 'homepageleft' and 'homepageright' divs. If it takes to long for someone to read this, maybe it will have changed... Feel free to look at my messy html-source if you think you can help :)

Your code was probably exactly what I was looking for, if I could make it work... One improvement would be to detect the tallest div, and set the shorter one to match that.

Thanks in advance if you have the time to answer! Oh, thanks anyway for already pointing me in the right direction.

Regards, Jan.

Member Avatar for Alxandr

I strongly recomand using mootools for this operation. It all becomes easy then. Try adding mootools and run this code:

window.addEvent('domready', function(){
  var hl = $('homepageleft');
  var hr = $('homepageright');
  var hls = hl.getSize();
  var hrs = hr.getSize();
  var ns = Math.max(hrs.y, hls.y);
  hr.setStyle('height', ns);
  hl.setStyle('height', ns);
});

This code is tested using FF3.5

Member Avatar for doffen74

I will try that after work tomorrow. If I run into problems, I will be back :)
Anyway, I really appreciate these forums - What better way to solve problems? Thanks everyone!

Member Avatar for tehnoobifier

Hey guys, so this script works great for when the 'base' div has a defined height, but fails when the height property is missing or set to auto.

Also, the script as a whole is kind of useless if the heights are static (ie: 500px or 25%) since those can easily be set on their own in the CSS file instead of this intricate script to change a single number, although I do see the merit if you are trying to make an interactive website.

However, I was wondering how we can change this script so that it takes the height of the 'base' div when there is no set height (ie. dynamic height based on its content such as the #wrapper div), and apply that height to another div.

Member Avatar for bulletcatcher

I agree on tehnoobifier's reply. It doesn't work if the content box hasn't got a defined height. Is there a way around this???

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.