View Full Version : Getting HTML code to appear only if div height is > a value

08-31-2006, 06:19 PM
I've got a div layer which gets populated with items. The div layer has overflow: hidden to use buttons for scrolling up and down if the content grows larger than the specified height.

I want to have the buttons only appear if the height of the div layer is greater than the initial height of 160px. How do I do this? I'm not that good w/javascript.

Here's what I've tried but I don't get anything:

<script type="text/javascript">
var divH = document.getElementById('cart').offsetHeight;
if(divH > 160)
var str = '';
str+='<span class="button" onMouseDown="ScrollButtons(\'up\',\'cart\')" onMouseUp="clearInterval(Timer)">UP<\/span>';
str+='<span class="button" onMouseDown="ScrollButtons(\'down\',\'cart\')" onMouseUp="clearInterval(Timer)">DOWN<\/span>';

Also, since the DIV layer doesn't have anything inside it when you first load up the page, I'm getting a js error saying: document.getElementById("cart") has no properties. How do I resolve this?

08-31-2006, 09:13 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<script language="JavaScript" type="text/javascript">

function AddText(id1,id2){
var obj1=document.getElementById(id1);
var obj2=document.getElementById(id2);

<div id="Tst1" style="position:relative;overflow:hidden;width:200px;height:160px;border:solid black 1px;" ></div>
<input type="button" name="" value="Add Text" onclick="AddText('Tst1','Txt');" >

<div id="Txt" >
A Line <br>



08-31-2006, 09:51 PM
Thanks for your example, but I think I can't do what I wanted. Here is the code for my div layers:

<div style="float: left;" id="scrollbuttons">
<span class="button" onMouseDown="ScrollButtons('up','cart')" onMouseUp="clearInterval(Timer)">UP</span>
<span class="button" onMouseDown="ScrollButtons('down','cart')" onMouseUp="clearInterval(Timer)">DOWN</span>
<span class="divHeader">Cart</span>
<div id="cart"><!-- products will show up here --></div>

As items are added to my PHP session they are displayed in the cart DIV via AJAX. The cart DIV layer has height: 160px and overflow: hidden, which means that any overflow in the div layer will not show up and so the buttons I've got work in scrolling the content up and down.

I've looked at this and I've also asked a friend of mine who's good with css...cart's height doesn't really change so I can't do a height comparison to display the buttons.

What's a good way for me to then display the scroll buttons only if there is content that overflows in my cart DIV?

08-31-2006, 10:12 PM
my code demonstrates that additional text in 'Tst1' changes the scroll height.

you need to question your scroll code.

09-01-2006, 08:06 PM
you need to question your scroll code.

This is my scroll code:

var Timer;

function ScrollButtons(direction,moveLayer)

if(direction == "up") // scroll up
Timer = setInterval("document.getElementById('"+moveLayer+"').scrollTop -= 2", 20);
else // scroll down
Timer = setInterval("document.getElementById('"+moveLayer+"').scrollTop += 2", 20);

09-01-2006, 11:20 PM
I got it working :)

Thank you very much for your help!