Change CSS with JavaScript

Change the Property height dynamically

Page 1 of 1

6 Replies - 8506 Views - Last Post: 29 November 2009 - 05:11 AM

#1 Speedy_92   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 02-July 09

Change CSS with JavaScript

Post icon  Posted 26 November 2009 - 12:10 PM

Hey,
I am at the very beginning of Javascript. This is the first website I tried to include Javascript, so don't be too mean :P

What I want to do is to change a CSS property dynamically. It'll be best if I show you what I did:
<script language="javascript">

function ChangeHeight()
{
	var browser = navigator.appName;
	
	if(browser == "Microsoft Internet Explorer")
	{
		var clientHeight = document.body.clientHeight;
		var contentHeight = clientHeight - 218;
		document.getElementById('content').style.height = contentHeight;
		}
	else
	{
		var clientHeight = window.innerHeight;
		var contentHeight = clientHeight - 218;
		document.getElementById('content').style.height = contentHeight;
		}
}

</script>


This is in my header. I heard that window.innerHeight doesn't work for Internet Explorer, that's why the if statement.
What I am trying to do is to change my height of my content area dynamically when it gets resized.
My body tag looks like this:
<body onresize="ChangeHeight()" onload="ChangeHeight()">


And I have a div area in my body, which looks like that:
<div id="content">


And the content div in my external stylesheet, which I of course linked up, looks like this:
#content {
	height: 400px;
	float: right;
	width: 678px;
	padding-bottom: 1em;
	background-image: url(../images/dp-content-purp.gif);
	border-top: 0px solid;
	border-right: 2px solid;
	border-bottom: 0px solid;
	border-left: 2px solid;
	border-color: #FFF;
	overflow: auto;
}


Why I want do change this? Well... Different people have different resolutions and I want that my website fits perfectly into the browser.

*EDIT: Maybe something, that could help. I tried the following:
alert(document.getElementById('content').style.height);

This shows just an empty MessageBox with nothing in it.

And by the way... Happy Thanksgiving :)

Speedy_92

This post has been edited by Speedy_92: 26 November 2009 - 01:18 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Change CSS with JavaScript

#2 JMRKER   User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Change CSS with JavaScript

Posted 26 November 2009 - 09:43 PM

I think the modification needed is a visible color.
Added some test code
Try this ...
<html>
<head>
<title>CSS height change</title>
<style type="text/css">
#content {
	height: 400px;
	float: right;
	width: 678px;
	padding-bottom: 1em;
	background-image: url(../images/dp-content-purp.gif);
	border-top: 0px solid;
	border-right: 2px solid;
	border-bottom: 0px solid;
	border-left: 2px solid;
	border-color: #ff0000; /* #FFF; */
	overflow: auto;
}
</style>
<script type="text/javascript"> <!-- DEPRECATED language="javascript" -->
// From: http://www.dreamincode.net/forums/showtopic141721.htm

function ChangeHeight() {
	var browser = navigator.appName;
	var clientHeight = 0;
	if(browser == "Microsoft Internet Explorer") { clientHeight = document.body.clientHeight; }
											else { clientHeight = window.innerHeight; }
	var contentHeight = clientHeight - 218;
	document.getElementById('content').style.height = contentHeight;
}
</script>
</head>
<body onresize="ChangeHeight()" onload="ChangeHeight()">
<div id="content">This is the div section.</div>
<button onclick="alert(document.getElementById('content').style.height)">Test</button>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#3 Speedy_92   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 02-July 09

Re: Change CSS with JavaScript

Posted 26 November 2009 - 10:06 PM

Hey JMRKER,
Thanks for the help. I changed the things the way you told me, but it still doesn't work...
I added the button in the content-section to test it, but when I click on it, it still shows a message box with [Javascript Application] as a title and nothing in the content area.

Any other ideas?

Speedy_92
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER   User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Change CSS with JavaScript

Posted 27 November 2009 - 07:48 AM

Post the code you are using that is not working for you.
The code I posted works in both FF and IE as I tested them.

You can click on the button to see current settings
and you can change the window size (move with lower right corner)
to see the display change size and then click on button
again to see new settings.

Other than that, you script doesn't do much so I'm not sure
what you are expecting to happen (?).
Was This Post Helpful? 0
  • +
  • -

#5 ahmad_511   User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Change CSS with JavaScript

Posted 27 November 2009 - 11:46 PM

Hi,
since you're using FF, please check Tools>Error console:
did you see any warning message like:
"Warning: Error in parsing value for 'height'. Declaration dropped."

if you did, that's because you didn't specify the units designator (i.e. "px") for the height property
document.getElementById('content').style.height = contentHeight+"px";



as jmaker mentioned above, it works on IE 8.0.6001.18702, FF 3.5.4, Chrome 4.0.222.12
Was This Post Helpful? 1
  • +
  • -

#6 Speedy_92   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 02-July 09

Re: Change CSS with JavaScript

Posted 28 November 2009 - 10:19 PM

Thanks JMRKER and ahmad_511 for the help.

ahmad_511, your solution did it :) It was because I didn't put the px behind the height.
Was This Post Helpful? 0
  • +
  • -

#7 ahmad_511   User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Change CSS with JavaScript

Posted 29 November 2009 - 05:11 AM

you're welcome :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1