Databases
StackOverflow2013
Postsdbo
PODynamically changing the height of a div based on content
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically changing the height of a div based on content
    text
    copied!<p>So I am trying to make a website and have a popup window/box DIV that appears after clicking something. This popup DIV contains text/content, let's name it "Locations," as per my website's design. This Locations Popup DIV has a fixed height and width, and consequently, there is a vertical scroll bar I've created to scroll down and read the text. I would like to add more content to this popup but unfortunately, the text is being cutoff, and the scroll does not continue scrolling down. I have set a pretty large value for the margin/padding in the DIV to make this work for a very long page length, but it is very inefficient and poor programming.</p> <p>How can I set the style of a div to the height of the total HTML document (which is the dyanamic, changing factor here) using JavaScript or CSS so I can do this intelligently and properly? I don't want to have to manually do this, as the longer the HTML Document becomes if I choose, I will always have to go back and either change the margin/padding value in CSS or do something to the JavaScript.</p> <p>Below is the CSS for it:</p> <pre><code>/* Pop Up */ #popupAbout, #popupLocations, #popupContact, #popupBlog { height: 600px; width: 900px; overflow: scroll; background-color: rgba(0, 0, 0, 0.75); border: 2px solid #cecece; z-index: 15; padding: 20px; color: #FFF; -webkit-box-shadow: 0px 0px 4px #000 inset; -moz-box-shadow: 0px 0px 4px #000 inset; box-shadow: 0px 0px 4px #000 inset; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin-top: -50px; visibility: hidden; } #popupAbout p, #popupLocations p, #popupContact p, #popupBlog p { padding-left: 10px; font-size: 18px; line-height: 20px; } #popupAbout h1, #popupLocations h1, #popupContact h1, #popupBlog h1 { text-align: left; font-size: 30px; letter-spacing: 1px; border-bottom: 1px dotted #D3D3D3; padding-bottom: 2px; margin-bottom: 20px; } #popupAboutClose, #popupLocationsClose, #popupContactClose, #popupBlogClose { right: 6px; top: 6px; position: absolute; display: block; } </code></pre> <p>And the appropriate JavaScript: </p> <pre><code>//Locations Page Pop Up var popupLocationsStatus = 0; function loadPopupLocations(){ if(popupLocationsStatus==0){ $("#popupLocations").fadeIn("slow"); popupLocationsStatus = 1; } } function disablePopupLocations(){ if(popupLocationsStatus==1){ $("#popupLocations").fadeOut("slow"); popupLocationsStatus = 0; } } function centerPopupLocations(){ var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupLocationsHeight = $("#popupLocations").height(); var popupLocationsWidth = $("#popupLocations").width(); $("#popupLocations").css({ "position": "absolute", "top": windowHeight/2-popupLocationsHeight/2, "left": windowWidth/2-popupLocationsWidth/2 }); } $(document).ready(function(){ $("#popupLocations").fadeOut(); popupLocationsStatus = 0; $("#Locations").click(function(){ $("#popupLocations").css({ "visibility": "visible" }); disablePopupAbout(); disablePopupContact(); centerPopupLocations(); loadPopupLocations(); }); $("#popupLocationsClose").click(function(){ disablePopupLocations(); }); }); $(function() { $('#popupLocations').jScrollPane(); $('.popupLocations').jScrollPane( { showArrows: true, horizontalGutter: 10 } ); }); </code></pre> <p>Here is the screenshot I've saved to give a better look at what I am talking about exactly (looking at the bottom of the popup window where the text is being cutoff): </p> <p><a href="http://i.imgur.com/ZYhpQuu.jpg?1" rel="nofollow">My Website Screenshot</a></p> <p>Everyone may view my work so far at: www.zaheeruddinsyed.com, to see exactly what I am talking about. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload