SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: Update DIV height
-
Jun 17, 2007, 22:02 #1
- Join Date
- Jun 2007
- Posts
- 358
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Update DIV height
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.
-
Jun 18, 2007, 00:48 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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'; }
-
Jun 18, 2007, 01:05 #3
- Join Date
- Jun 2007
- Posts
- 358
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jun 18, 2007, 01:14 #4
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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');
-
Jun 18, 2007, 01:43 #5
- Join Date
- Jun 2007
- Posts
- 358
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jun 18, 2007, 01:54 #6
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jun 18, 2007, 02:58 #7
- Join Date
- Jun 2007
- Posts
- 358
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
here is what i have now.
fav.css
Code CSS:#favBg { border: 0px; padding: 0px; margin: 0px; width: 100%; 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.
-
Jun 18, 2007, 03:02 #8
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:function favHeight() { var node = document.getElementById('favtBg'); node.style.height = pHeight() + 'px'; }
Not to mention, you have a css style for favBg and the id on the div is favtBg (which is also in the javascript)
-
Jun 18, 2007, 03:26 #9
- Join Date
- Jun 2007
- Posts
- 358
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
this works.
fav.css
Code CSS:.favBg { border: 0px; padding: 0px; margin: 0px; width: 100%; 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>
-
Jun 18, 2007, 03:34 #10
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
you can use the getElementsByClassName method in the url in my one of my previous posts.
Bookmarks