SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to place footer on cross-browser.com

    Hi everybody,
    I've read in Dan Schafer's book "HTML Utopia" that there is a way of using JavaScript to ensure that a footer is always placed underneath the longest column in a three-column layout where the columns are of uneven length and the left and right are absolutely positioned.
    For certain reasons we need to absolutely position the left and right columns, and this means that the footer can't always be kept below the longest column without the help of JavaScript.
    I'm unfamiliar with JavaScript so I was hoping to find a file which contained all the functions needed to implement this properly.
    According to Schafer's book, it is possible to download this code from cross-browser.com. However, I was not able to find the file in question (x.js) and I believe it has been removed. When trying to find the necessary functions myself i failed to locate xIE4Up(), xOp7Up, and xOp6Dn().
    It's not a priority for me to be compatible with all browsers. IE6 is my main priority, as 90% of my audience will be using this, so if anybody could suggest a less complicated approach than that detailed on cross-browser.com this would help a lot.
    I'd be very grateful if anyone could advise me about this.
    Thank you!
    Jane

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess you would look for the top position + height of the document elements and position the footer below the lowest with suitable padding.

    Give me a SIMPLE(small) example of you page layout and fotter and I will do the code

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the demo mentioned in the book.

    Thanks

    Btw, janekelly, Welcome to SPF!

  4. #4
    SitePoint Member
    Join Date
    May 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys
    I found the file "x.js" in the end and that seems to work fine, the only problem is that the left column is positioned much lower down than the right column, because it has to make room for an icon which is not part of the column.
    The code is:
    <img src="images/icon.gif" alt="blah" id="icon" />
    <div id="leftcol"></div>
    <div id="content"></div>
    <div id="rightcol"></div>

    and the css is roughly:
    #icon {
    position: absolute;
    top: 30%;
    left: 3%;}

    #leftcol {
    position: absolute;
    top: 48%;}

    #rightcol {
    position: absolute;
    top: 33%;
    }

    Do the left and right columns have to have the same "top" position for the script to work? Excuse my ignorance on this matter.
    Thanks for all you help so far
    Jane

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #icon {
    position: absolute;
    top: 30%;
    left: 3%;}
    
    #leftcol {
    position: absolute;
    top: 30%;}
    
    #rightcol {
    position: absolute;
    top: 30%;
    }
    cheers

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by janekelly
    Thanks guys
    I found the file "x.js"...
    You did? Where? Did you look at the demo I linked to? That demo provides everything you need: html, css and js. I have not read the book you mentioned, but this technique started life with Kevin Yank's article, which I link to in that demo - you really should read it.

    Quote Originally Posted by janekelly
    ... the only problem is that the left column is positioned much lower down than the right column, because it has to make room for an icon which is not part of the column.
    This technique makes all 3 containers have the same height. I won't know how to suggest any alternative logic until I see what html structure you decide on using.

  7. #7
    SitePoint Member
    Join Date
    May 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes i've read Kevin Yank's article as well -
    I found x.js inside in the compressed folder: x40_xc027b_z1.zip on http://cross-browser.com/toys/

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. that file (x.js) will work, but it is a very large file - it contains all the X functions (convenient for testing/developing offline). On the demo page I have a link to a js file which contains only the functions needed for the demo.


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
  •