Update DIV height

**cssExp** · Jun 17, 2007, 22:02

hello,

I have a fav.css file with class .favBg

Code CSS:

.favBg
{
 border: 0px;
 padding: 0px;
 margin: 0px;
 width: 100%;
 position: absolute;
 background-color: #000000;
 opacity: 0.5;
 filter: Alpha(opacity:50);
}

Here i have made a javascript that calculates both window height and scroll height, and another function which adds both the window height and scroll height, so i got total page height.

Code JavaScript:

function pHeight()
{
  var pHeight = scrollHeight() + windowHeight();
  return pHeight;
}

what I want to do is to update the height of class .favBg with the value of pHeight(), as each page in the site are of different length. Yes, i'm trying to do 100% page height faded background, Just like in Sitepoint Marketplace's "My Shortlist".

Basically I'm doing a "My Favorites" list just like Sitepoint Marketplace's "My Shortlist".

Help greatly appreciated.

**gRoberts** · Jun 18, 2007, 00:48

I take it your not getting the desired effect using 100% height in the CSS?

If you want to do this in Javascript, you can use the style.height on the div your wanting to have 100% height on.

so

Code:

function setHeight() {
var ele = document.getElementById('someelement');
// ele.style.height = '500px';
ele.style.height = pHeight() + 'px';
}

**cssExp** · Jun 18, 2007, 01:05

yes, height: 100% in css only covers 100% of visible window. When one scrolls, it gets cut off.

anyway this is what i have now.

in fav.css file

Code CSS:

.favBg
{
 border: 0px;
 padding: 0px;
 margin: 0px;
 width: 100%;
 position: absolute;
 background-color: #000000;
 opacity: 0.5;
 filter: Alpha(opacity:50);
}

and on page, the javascripts for the window height ans scroll height and..

Code javascript:

function pHeight()
{
  var pHeight = scrollHeight() + windowHeight();
  return pHeight;
}

Code javascript:

function favHeight()
{
 document.getElementByClassName('favBg').style.height = pHeight() + 'px';
}

then

Code HTML:

<body onload="favHeight();">;

this should work? it isn't working for some reason.

**gRoberts** · Jun 18, 2007, 01:14

That could be because theres no such method as document.getElementByClassName. There is getElementsByClassName which is a custom method, but this will return an array not a single element.

Instead you will need to set an id on the div, and then use document.getElementById('someid');

**cssExp** · Jun 18, 2007, 01:43

It has to be class since .favBg is to be repeated for other favorite options(like favorite music, video etc..)

I tried the following, it should work. but it isn't.

in fav.css file

Code CSS:

.favBg
{
 border: 0px;
 padding: 0px;
 margin: 0px;
 width: 100%;
 position: absolute;
 background-color: #000000;
 opacity: 0.5;
 filter: Alpha(opacity:50);
}

and on page, the javascripts for the window height ans scroll height and..

Code javascript:

function pHeight()
{
  var pHeight = scrollHeight() + windowHeight();
  return pHeight;
}

Code javascript:

function favHeight()
{
  var node_list = document.getElementsByClassName('favBg');
  for (var i = 0; i < node_list.length; i++)
  {
   var node = node_list[i];
   node.style.height = pHeight() + 'px';
  }
}

then

Code HTML:

<body onload="favHeight();">;

this should according to someone in another forum.

**gRoberts** · Jun 18, 2007, 01:54

document.getElementsByClassName will not work unless you have an external definition. So it wont work.

http://script.aculo.us/

http://wiki.script.aculo.us/scriptac...ntsByClassName

Will allow you to have document.getElementsByClassName

**cssExp** · Jun 18, 2007, 02:58

here is what i have now.

fav.css

Code CSS:

#favBg
{
 border: 0px;
 padding: 0px;
 margin: 0px;
 width: 100&#37;;
 position: absolute;
 background-color: #000000;
 opacity: 0.5;
 filter: Alpha(opacity:50);
}

page

Code javascript:

function favHeight()
{
  var node = document.getElementsById('favtBg');
  node.style.height = pHeight() + 'px';
}

Code HTML:

f
<body onload="favHeight();">
<div id="favtBg"></div>

it is not working. I'm not using any class in this try. But still doesn't work, tested in latest version of browsers, ie7, ff 2.0.0.4, opera 9.21.

**gRoberts** · Jun 18, 2007, 03:02

Code:

function favHeight()
{
  var node = document.getElementById('favtBg');
  node.style.height = pHeight() + 'px';
}

getElementById not getElementsById

Not to mention, you have a css style for favBg and the id on the div is favtBg (which is also in the javascript)

**cssExp** · Jun 18, 2007, 03:26

this works.

fav.css

Code CSS:

.favBg
{
 border: 0px;
 padding: 0px;
 margin: 0px;
 width: 100&#37;;
 position: absolute;
 background-color: #000000;
 opacity: 0.5;
 filter: Alpha(opacity:50);
}

page

Code javascript:

function favHeight()
{
  var node = document.getElementById('favBg');
  node.style.height = pHeight() + 'px';
}

Code HTML:

<body onload="favHeight();">
<div id="favtBg" class="favBg"></div>

not exactly the way i wanted, but the result is the same. Thanks a lot

**gRoberts** · Jun 18, 2007, 03:34

you can use the getElementsByClassName method in the url in my one of my previous posts.

The SitePoint Forums have moved.

User Tag List

Thread: Update DIV height

Thread Tools

Display

Update DIV height

Bookmarks

Bookmarks

Posting Permissions