469,646 Members | 1,672 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,646 developers. It's quick & easy.

changing div height with javascript makes div with more than 100%

5
what up people, i'm writing an app which includes a page that has 2 divs side by side. the page is set up to fill the table containing the divs to 100% of the width of the pages. I want the height of these divs to also move with the resize of the page but also keep in prospective the other table space above and below the divs.

My solution to this was to manipulate the height with javascript using the method below. this works however, the width is thrown out of wack and goes beyond 100% of the page. Am i missing something in the script that is causing this? The problem only exists in internet exlporer, firefox it is fine.

Also below is the style i used:


function resizeTreeDivs(LTree, RTree){
var winHeight = document.documentElement.clientHeight;
var appHeight = winHeight -189;
var parDivL = LTree.parentNode;
var parDivR = RTree.parentNode;

parDivL.style.height = appHeight+'px';
parDivR.style.height = appHeight+'px';
}


.divs {
overflow: auto;
height: 400px;
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

Thanks in advance!
Joe Estes
Jan 10 '07 #1
4 4042
b1randon
171 Expert 100+
what up people, i'm writing an app which includes a page that has 2 divs side by side. the page is set up to fill the table containing the divs to 100% of the width of the pages. I want the height of these divs to also move with the resize of the page but also keep in prospective the other table space above and below the divs.

My solution to this was to manipulate the height with javascript using the method below. this works however, the width is thrown out of wack and goes beyond 100% of the page. Am i missing something in the script that is causing this? The problem only exists in internet exlporer, firefox it is fine.

Also below is the style i used:


function resizeTreeDivs(LTree, RTree){
var winHeight = document.documentElement.clientHeight;
var appHeight = winHeight -189;
var parDivL = LTree.parentNode;
var parDivR = RTree.parentNode;

parDivL.style.height = appHeight+'px';
parDivR.style.height = appHeight+'px';
}


.divs {
overflow: auto;
height: 400px;
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

Thanks in advance!
Joe Estes
Post your full page source so that I can debug, pls.
Jan 11 '07 #2
atma86
5
the source xhtml portion with the problem divs:
-------------------------------------------------------------------

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="32" background="images/layout/bdlft.jpg"><img src="images/layout/bdlft.jpg" width="32" height="10" /></td>
<td width="50%">
<div id="roadmapTreeDiv" class="divs">
<t:tree2 id="roadmapTree" value="#{roadmapTreeBean.treeModel}" var="_node" varNodeToggler="t" showLines="false" org.apache.myfaces.tree2.CLIENT_SIDE_TOGGLE="true" org.apache.myfaces.tree2.SHOW_ROOT_NODE="true" org.apache.myfaces.tree2.SHOW_NAV="true">
<ims:tnc entity="${_node}" fieldName="fld1"/>
<ims:tnc entity="${_node}" fieldName="fld2"/>
<ims:tnc entity="${_node}" fieldName="fld3"/>
<ims:tnc entity="${_node}" fieldName="fld4"/>
<ims:tnc entity="${_node}" fieldName="fld5"/>
<ims:tnc entity="${_node}" fieldName="fld6"/>
<ims:tnc entity="${_node}" fieldName="fld7"/>
<ims:tnc entity="${_node}" fieldName="fld8"/>
<ims:tnc entity="${_node}" fieldName="fld9"/>
<ims:tnc entity="${_node}" fieldName="fld10"/>
<ims:tnc entity="${_node}" fieldName="fld11"/>
</t:tree2>
</div>
</td>
<td width="1" bgcolor="#867F87"><img src="images/layout/divider.jpg" width="1" height="1" /></td>
<td width="50%">
<div id="auditTreeDiv" class="divs">
<t:tree2 id="auditTree" value="#{auditTreeBean.treeModel}" var="_node" varNodeToggler="t" showLines="false" org.apache.myfaces.tree2.CLIENT_SIDE_TOGGLE="true" org.apache.myfaces.tree2.SHOW_ROOT_NODE="true" org.apache.myfaces.tree2.SHOW_NAV="true">
<ims:tnc entity="${_node}" fieldName="fld1"/>
<ims:tnc entity="${_node}" fieldName="fld2"/>
<ims:tnc entity="${_node}" fieldName="fld3"/>
<ims:tnc entity="${_node}" fieldName="fld4"/>
<ims:tnc entity="${_node}" fieldName="fld5"/>
<ims:tnc entity="${_node}" fieldName="fld6"/>
<ims:tnc entity="${_node}" fieldName="fld7"/>
<ims:tnc entity="${_node}" fieldName="fld8"/>
<ims:tnc entity="${_node}" fieldName="fld9"/>
<ims:tnc entity="${_node}" fieldName="fld10"/>
<ims:tnc entity="${_node}" fieldName="fld11"/>
</t:tree2>
</div>
</td>
<td width="32" background="images/layout/bdrt.jpg"><img src="images/layout/bdrt.jpg" width="32" height="10" /></td>
</tr>
</table>

again the css is:
------------------------

.divs {
overflow: auto;
height: 400px;
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

and the javascript that manipulates the divs once the page is loaded:
--------------------------------------------------------------------------------------------------

function resizeTreeDivs(LTree, RTree){
//these two trees are spans
var winHeight = document.documentElement.clientHeight;
var appHeight = winHeight -189;
var parDivL = LTree.parentNode;
var parDivR = RTree.parentNode;

parDivL.style.margin = 0+'px';
parDivL.style.width = '100%';
parDivL.style.position = 'relative';
parDivL.style.padding = 0+'px';
parDivL.style.left = 0+'px';
parDivL.style.top = 0+'px';
parDivL.style.clear = 'left';
parDivL.style.overflow ='auto';
parDivL.style.styleFloat = 'left';
parDivL.style.height = appHeight+'px';


parDivR.style.margin = 0+'px';
parDivR.style.width = '100%';
parDivR.style.position = 'relative';
parDivR.style.padding = 0+'px';
parDivR.style.left = 0+'px';
parDivR.style.top = 0+'px';
parDivR.style.clear = 'left';
parDivR.style.overflow ='auto';
parDivR.style.styleFloat = 'left';
parDivR.style.height = appHeight+'px';

}


note that the xhtml isn't compiled so the trees won't be visible, however if you fill the divs with a large amount of text or a big image, the div won' t remain encapsulated in 100% of the page but stretches well beyond that
which is infact the problem once the javascript is applied. prior to the javascript, the css does it's job.

thanks again in advance!

Joe Estes
Jan 11 '07 #3
b1randon
171 Expert 100+
the source xhtml portion with the problem divs:
-------------------------------------------------------------------

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="32" background="images/layout/bdlft.jpg"><img src="images/layout/bdlft.jpg" width="32" height="10" /></td>
<td width="50%">
<div id="roadmapTreeDiv" class="divs">
<t:tree2 id="roadmapTree" value="#{roadmapTreeBean.treeModel}" var="_node" varNodeToggler="t" showLines="false" org.apache.myfaces.tree2.CLIENT_SIDE_TOGGLE="true" org.apache.myfaces.tree2.SHOW_ROOT_NODE="true" org.apache.myfaces.tree2.SHOW_NAV="true">
<ims:tnc entity="${_node}" fieldName="fld1"/>
<ims:tnc entity="${_node}" fieldName="fld2"/>
<ims:tnc entity="${_node}" fieldName="fld3"/>
<ims:tnc entity="${_node}" fieldName="fld4"/>
<ims:tnc entity="${_node}" fieldName="fld5"/>
<ims:tnc entity="${_node}" fieldName="fld6"/>
<ims:tnc entity="${_node}" fieldName="fld7"/>
<ims:tnc entity="${_node}" fieldName="fld8"/>
<ims:tnc entity="${_node}" fieldName="fld9"/>
<ims:tnc entity="${_node}" fieldName="fld10"/>
<ims:tnc entity="${_node}" fieldName="fld11"/>
</t:tree2>
</div>
</td>
<td width="1" bgcolor="#867F87"><img src="images/layout/divider.jpg" width="1" height="1" /></td>
<td width="50%">
<div id="auditTreeDiv" class="divs">
<t:tree2 id="auditTree" value="#{auditTreeBean.treeModel}" var="_node" varNodeToggler="t" showLines="false" org.apache.myfaces.tree2.CLIENT_SIDE_TOGGLE="true" org.apache.myfaces.tree2.SHOW_ROOT_NODE="true" org.apache.myfaces.tree2.SHOW_NAV="true">
<ims:tnc entity="${_node}" fieldName="fld1"/>
<ims:tnc entity="${_node}" fieldName="fld2"/>
<ims:tnc entity="${_node}" fieldName="fld3"/>
<ims:tnc entity="${_node}" fieldName="fld4"/>
<ims:tnc entity="${_node}" fieldName="fld5"/>
<ims:tnc entity="${_node}" fieldName="fld6"/>
<ims:tnc entity="${_node}" fieldName="fld7"/>
<ims:tnc entity="${_node}" fieldName="fld8"/>
<ims:tnc entity="${_node}" fieldName="fld9"/>
<ims:tnc entity="${_node}" fieldName="fld10"/>
<ims:tnc entity="${_node}" fieldName="fld11"/>
</t:tree2>
</div>
</td>
<td width="32" background="images/layout/bdrt.jpg"><img src="images/layout/bdrt.jpg" width="32" height="10" /></td>
</tr>
</table>

again the css is:
------------------------

.divs {
overflow: auto;
height: 400px;
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

and the javascript that manipulates the divs once the page is loaded:
--------------------------------------------------------------------------------------------------

function resizeTreeDivs(LTree, RTree){
//these two trees are spans
var winHeight = document.documentElement.clientHeight;
var appHeight = winHeight -189;
var parDivL = LTree.parentNode;
var parDivR = RTree.parentNode;

parDivL.style.margin = 0+'px';
parDivL.style.width = '100%';
parDivL.style.position = 'relative';
parDivL.style.padding = 0+'px';
parDivL.style.left = 0+'px';
parDivL.style.top = 0+'px';
parDivL.style.clear = 'left';
parDivL.style.overflow ='auto';
parDivL.style.styleFloat = 'left';
parDivL.style.height = appHeight+'px';


parDivR.style.margin = 0+'px';
parDivR.style.width = '100%';
parDivR.style.position = 'relative';
parDivR.style.padding = 0+'px';
parDivR.style.left = 0+'px';
parDivR.style.top = 0+'px';
parDivR.style.clear = 'left';
parDivR.style.overflow ='auto';
parDivR.style.styleFloat = 'left';
parDivR.style.height = appHeight+'px';

}


note that the xhtml isn't compiled so the trees won't be visible, however if you fill the divs with a large amount of text or a big image, the div won' t remain encapsulated in 100% of the page but stretches well beyond that
which is infact the problem once the javascript is applied. prior to the javascript, the css does it's job.

thanks again in advance!

Joe Estes
Joe, if you don't want your divs to grow to fit the content you should change your overflow style. The possible values are visible, hidden, scroll and auto. Try hidden or scroll to keep your divs the same size.
Jan 11 '07 #4
atma86
5
i changed it to scroll, and the app still stretches beyond 100% of the page.

again this only happens after i edit the divs with javascript

when the divs are set in the css, everything stay intact at 100% on the page. any suggestions?
Jan 12 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

14 posts views Thread by Brandon Hoppe | last post: by
4 posts views Thread by JezB | last post: by
4 posts views Thread by reycri | last post: by
1 post views Thread by Mike Collins | last post: by
7 posts views Thread by msoliver | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.