Dynamically adjust CSS with javascript

Question

I created a webpage with a blog that users can post on. The problem is that as more blogs are posted, they eventually run past the page's height and into the background. All of my code for posting the blog goes into my content class below:

.content {
float: left;
width: 664px;
text-align: justify;
margin: 0px 0px 30px 0;
padding: 10px 10px 10px 10px;
border-style: solid;
border-color: #D3D3D3;
border-width: 1px;
}

I was wondering if there was a way to use javascript to get the size of the content pane and assign it to the height of the page class below:

.page {
background : url(images/page.png) repeat-y top;
height : 1000px;
padding : 0;
margin : 0;
}

I guess what I'm looking for is a way to reassign the height of the div for page using javascript

Here is the code thus far:

<?php
include 'connect.php';
include 'header.php';
?>
<form action = 'submitBlog.php' method = 'post'>
<input type="submit" name="Submit" value="Submit a blog"/>
</form>
<?php
$sql = mysql_query("select * from blog order by id desc");
while($row = mysql_fetch_array($sql)){
$title = $row['title'];
$content = $row['content'];
$date = $row['date'];
$user = $row['user'];
?>
<table border = '1'>
<tr><td><font size = "5"><strong><?php echo $title; ?></strong></font></td><td> Posted on <?php echo $date; echo "<br>by ".$user;?></td></tr>
<tr><td colspan = '2'><?php echo $content; ?> </td></tr>
<br>
</table>
<?php
}
include 'footer.php';
?> 
<script type = "text/javascript">
function setHeight() {
 var computedHeight = window.getComputedStyle(document.getElementById("content"),null).getPropertyValue("height") ; 
 document.getElementsByClassName('page')[0].style.height = computedHeight;
}
</script>

• YemSalat: DomElement.style.height ?
• phil: The use of jquery's height() function will get you the height of your content pane, and you can programmatically set the css height property of your div using the css() function

Answer 1

In pure Javascript, you can get the computed height style like

var computedHeight = window.getComputedStyle(
 document.getElementsByClassName("content")[0], null). 
 getPropertyValue("height");

This returns the computed height of .content in px

Now set it to page class like

document.getElementsByClassName('page')[0].style.height = computedHeight;

FYI: Since you've mentioned only the className I have used the 0 as index. However it is better to use id for these elements if possible.

• user2803648: so where i have <div class = "content">, I should have <div class = "content" id = "content">? Would that carry over if I were to assign the ID in a header I call on every page?
• Praveen: @user2803648 Nope. like <div class="content" id="content"> Then in js var computedHeight = window.getComputedStyle( document.getElementById("content"), null). getPropertyValue("height");
• user2803648: I tested out the code using a button. It sort of works, but it doesn't change it enough to fit everything. Is there a way I could, say, add 100 or some number to the value? Also, how do I call the function to just run without having to need a button? Everytime I try to just call setHeight(), it tells me the function can't be found
• user2803648: I managed to actually figure out the first part of my question by doing the following: 200+parseFloat(computedHeight)+'px' This worked perfectly, however I'm only able to get it to work when I use a button. How can I just call the function to run as soon as the page is loaded?
• user2803648: Once again with the power of Google I answered my own question. I used window.onload = setHeight() within that javascript function and now it's working perfectly. Thank you for your help, I wish I could uprate

Answer 2

At least two options here without using javascript

delete the height from .page

.page {
background : url(images/page.png) repeat-y top;
height : 1000px; //delete this line
padding : 0;
margin : 0;
}

or add overflow scroll to .content

 .content {
 overflow: scroll;
}

• user2803648: Neither method worked. The former just got rid of the page altogether and the latter gave me the same problem I've been having

Answer 3

If you set the height to auto, it should work as you want. Please check below:

 .page {
 background-color : url(images/page.png) repeat-y top;
 height : auto;
 padding : 0;
 margin : 0;
 }

• user2803648: I've tried that, but that doesn't seem to work either. I pose it could have to do with how i've written the code

Answer 4

You can look into jQuery to dynamically change CSS properties as the certain events are called. You can find a great tutorial here. Here is an example from an old project of mine:

 $(window).scroll(function (e) {
 $el = $('.fixedElement');
 if ($(this).scrollTop() > 98 && $el.css('position') != 'fixed') {
 $('.fixedElement').css({ 'position': 'fixed', 'top': '0px', 'width': '90%', 'min-width': '1200px' });
 }
 });

• user2803648: I'm not familiar with jquery, but it's looking like my best solution to this. I'll look into it
• YepNamesJames: I definitely recommend CodeAcademy to learn the jQuery library. This example above would fix a profile bar from below the header to stick to the top of my page as you scrolled down.

Answer 5

I don't have a great idea, but i think this might work:

page:expression(document.body.height > 1000? "1000": "auto" );

but this is a bad way actually.