Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting HTML code to appear only if div height is > a value

    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:

    Code:
    <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?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your example, but I think I can't do what I wanted. Here is the code for my div layers:

    Code:
    <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?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    my code demonstrates that additional text in 'Tst1' changes the scroll height.

    you need to question your scroll code.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    you need to question your scroll code.
    This is my scroll code:

    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);
    	}
    }

  • #6
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it working

    Thank you very much for your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •