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 2 of 2
  1. #1
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts

    Question How can I make divs appear only if the page reaches a certain height?

    I don't want my sidebar columns to be too long when the main content is shorter. Is there any way (javascript? jquery? something else?) to only let certain divs load when the main content reaches a certain height?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    yes, but as far as I am aware you need to set the height of your main content div before you can begin calculating

    Code:
    <body>
    <div id="side" style="border-style:dashed; float:left">side
    <div id="hidden" style="display:none"> hi there. I'm the hidden div!</div>
    </div>
    <div id="main" style="border:solid; height:100px; width: 200px; float:left">main</div>
    <input type="button" value="grow div" onclick="growDiv()"/>
    <script type="text/javascript">
    function growDiv(){
    theheight=parseInt(document.getElementById("main").style.height);
    document.getElementById("main").style.height=theheight+100+"px";
    if(theheight>200){
    document.getElementById("hidden").style.display="block"		
    		}
    	}
    </script>
    </body>


  •  

    Posting Permissions

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