SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    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.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    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';
    }


  3. #3
    SitePoint Addict
    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.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    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');


  5. #5
    SitePoint Addict
    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.

  6. #6
    SitePoint Wizard gRoberts's Avatar
    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


  7. #7
    SitePoint Addict
    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&#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.

  8. #8
    SitePoint Wizard gRoberts's Avatar
    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';
    }
    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)


  9. #9
    SitePoint Addict
    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&#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

  10. #10
    SitePoint Wizard gRoberts's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •