...

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



Periclytes
08-31-2006, 07: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>';
document.write(str);
}
</script>


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?

vwphillips
08-31-2006, 10:13 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function AddText(id1,id2){
var obj1=document.getElementById(id1);
var obj2=document.getElementById(id2);
obj1.innerHTML+=obj2.innerHTML
obj1.style.visibility=(obj1.scrollHeight>obj1.offsetHeight)?'visible':'hidden';
}
//-->
</script></head>

<body>
<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>
</div>


</body>

</html>

Periclytes
08-31-2006, 10: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>
</div>
<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?

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

you need to question your scroll code.

Periclytes
09-01-2006, 09: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);
}
}

Periclytes
09-02-2006, 12:20 AM
I got it working :)

Thank you very much for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum