Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript problem

    I'm having a problem with a javascript code I put together. For all of the PHP, CSS, HTML that I know, well it doesn't carry over to JavaScript, so my attempt at trying this is probably a very bad attempt.

    Anyways, what I'm trying to accomplish with this code is to get the height of one table and set the padding-bottom to another table, to keep page dimensions even.

    Code:
    <script type="text/javascript">
    var divArray = document.getElementById('tablecontent').offsetheight;
    //Subtracting 442 because that's the height of the table. I'm just trying to add onto the bottom.
    var subtraction = divarray - 442;
    var tablesidebar = document.getElementById('tablesidebar');
    tablesidebar.style.paddingbottom = subtraction + 'px';
    </script>
    Any help to get this working is well appreciated.

    Thanks,
    Jeremy

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Your work is not bad. But there are two things to mention:

    1. Javascript is case-sensitive. So it is supposed to be offsetHeight, divArray and paddingBottom
    2. To make sure the addressed elements like "tablecontent" already exist in the DOM, wrap your code in an window.onload event handler
    Code:
    window.onload = function() {
       // your code goes here
    };

  • Users who have thanked devnull69 for this post:

    Feartheyankees (08-23-2011)

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I took your advice and put in the window.onload and proper casing. However, there's still no luck. However, I did check Mozilla's error console, it's telling me that there's a syntax error at
    Code:
    var divArray = document.getElementById('tablecontent').offsetHeight;
    The code now looks like this
    Code:
    <script type="text/javascript">
    window.onload = function () {
    var divArray = document.getElementById('tablecontent').offsetHeight;
    var subtraction = divArray - 442;
    var tablesidebar = document.getElementById('tablesidebar');
    tablesidebar.style.paddingBottom = subtraction + 'px';
    };
    </script>
    EDIT: Nevermind, had an element off, thanks.
    Last edited by Feartheyankees; 08-23-2011 at 05:18 PM.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    It's not a syntax error, it's a logical error. offsetHeight is not a property of an element but rather a property of an element's style
    Code:
    var divArray = document.getElementById('tablecontent').style.offsetHeight;
    Note: You will only get a value for style.offsetHeight if the property has been set using the style attribute. Otherwise you will have to use a combination of getComputedStyle/getPropertyValue

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    This should be OK:

    Code:
    var divArray = document.getElementById('tablecontent').offsetHeight;
    I always understood the offsetLeft, offsetHeight, offsetWidth and offsetHeight properties to be read-only properties of all HTML element objects, and not properties of their associated style objects.
    https://developer.mozilla.org/en/DOM...t.offsetHeight

    Attempting to read or set .style.offsetHeight, style.offsetLeft, etc would be expected to generate an error.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Ok, you are right. Nevertheless, the statement should not have produced a Syntax Error. The only other obvious problem would be that there is no element with id="tablecontent"


  •  

    Posting Permissions

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