PDA

View Full Version : change div heights



lord22
07-26-2008, 02:55 AM
hi

I have 2 divs (main, right), that include text in them. They can change their height by the quantity of text they have.
I want to write a condition that if:
the height of the right div - 5px < the height of the main div

than:
the height of the right div== 10px +the height of the main div

It should happen on page load and not by pressing any button.

Thanks!

Dal
07-26-2008, 03:03 AM
Lookup javascript DOM for the answer;

id.style.height will provide you with the height of the div after load and adjust it just after the page has fully loaded. You can also make this smoother by hidding the DIV's until its sorted.

Kind regards
Dal

lord22
07-26-2008, 03:13 AM
thanks, I really try to code it by using DOM few times, I just don't get why it doesn't work.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from other browsers

window.onload=function(){
var sa,sy
sa=main.style.height
sy=right.style.height
if(sy-'5px'<sa)
right.style.height=='10px'+sy
}
}

// Stop hiding from browsers -->
</SCRIPT>
</head>

<body>
<div id="right" style="background-color:#FFFF66;">
bb<br /><br />bdsfgsd fgsdfg<br />sduki fgj ulo gh zd
</div>
<div id="main" style="background-color:#33CC66">
bb<br /><br />bdsfgsd fgsdfg<br />sduki fgj ulo gh zd <br /><br /><br />
</div>
</body>
</html>

Dal
07-26-2008, 03:19 AM
address the id of the element and then apply the DOM attributes to it. Im sure you just missed something that always catches me out;

css uses pixel size (although other measurements can be applied as far as Im aware, just never used them). So "px" will be already applied to the end of the string value. If you send .style.height witht the value "100" it wont do ANYTHING! You need to send the value of "100px" in order for it to work properly. Also bare this in mind when trying to work with the values form the DOM as "100px" - 50 is not going to work, you need to convert it to an Int then add the "px" back on when your calculation is done.

Another tip: Never delete code! :D

Kind regards
Dal

lord22
07-26-2008, 03:22 AM
Hi thank you I've edited my post becuase I've just found my last try :)
I will appreciate If you can look in it and notice my mistakes

rangana
07-26-2008, 03:45 AM
First, is that you have an extra closing bracket:


window.onload=function(){
var sa,sy
sa=main.style.height
sy=right.style.height
if(sy-'5px'<sa)
right.style.height=='10px'+sy
}
}

Secondly, though it has nothing to do with your script's function, note that language is a deprecated attribute.

Lastly, You have errors on your script. Hopefully, I could explain it to you.

You used this:


sa=main.style.height
sy=right.style.height


main and right are id of your div as seen in your markups, so should be like this instead:


document.getElementById('main')
document.getElementById('right')

The above noted syntax is erroneous since you mean to get the element's offsetHeight.
This part is erroneous too:


if(sy-'5px'<sa)

As I understood, you need to subtract 5px to the height of right div. That if statement could never true, because an integer cannot subtract a string.
This part is erroneous too:


right.style.height=='10px'+sy

Assigning needs to have an equal sign (=), comparing the equality uses double equal sign (==). You are using the later which does'nt makes sense.
Lastly, though it is'nt a requirement, ensure to end with a semi-colon ( ; ).


YOu might want to give this modification a try:


<SCRIPT type="text/javascript">
<!-- Hide from other browsers

window.onload=function(){
var sa,sy;
sa=document.getElementById('main').offsetHeight;
sy=document.getElementById('right').offsetHeight;
if((sy-5)<sa)
document.getElementById('right').style.height=sy+10+'px';
}

// Stop hiding from browsers -->
</SCRIPT>


Hope it makes sense.

Dal
07-26-2008, 03:46 AM
Agh great - spent all that time and someone went through it with you while I was typing! Doh!


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from other browsers

window.onload=function(){
var sa,sy;
var main = document.getElementById('main');
var right = document.getElementById('right');

sa=main.style.height;
sy=right.style.height;
sa = parseInt(sa,10);
if(isNaN(sa))sa = 0;
sy = parseInt(sy,10);
if(isNaN(sy))sy = 0;

if(sy-5<sa){
right.style.height=10+sy+"px";
}
}

// Stop hiding from browsers -->
</SCRIPT>
</head>

<body>
<div id="right" style="background-color:#FFFF66;">
bb<br /><br />bdsfgsd fgsdfg<br />sduki fgj ulo gh zd
</div>
<div id="main" style="background-color:#33CC66">
bb<br /><br />bdsfgsd fgsdfg<br />sduki fgj ulo gh zd <br /><br /><br />
</div>
</body>
</html>


Found errors;
* You cant subtract a string! Ints are really good at this :p
* You obvously dont have a programming background as you forgot the ";" why this was allowed to be removed in js I'll never know, I dont want to know, Im stuborn ;)
* You cant address right and main as var if they havent been setup and you certianly cant address them as objects for DOM to use if you havent tied them to the element.
* You missed a brace on your if statement!

:eek:
Ok, that should work (not tested but let me know)
Kind regards
Dal

lord22
07-26-2008, 04:17 AM
Thank you both !!
I've learnt a lot.