SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning my navbar at the bottom of the viewport (ala facebook)

    Hi,

    I've been working on some javsscript at work to keep a menu centered in a page no matter what the screen-res is...it's hard to explain but css is not viable in this case.

    I've been looking at the newish chat bar at the bottom facebook pages tonight and am thinking it does a similar thing using javascript to look at the screen height and calculate the position of the chat bar.

    Do you think they're using javascript to do this and if so how do they get it adjusting it's size real time....my code for my navbar doesn't do that you re-size and it jumps afer you've finsihed re-sizing....do i need a timeout or something

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They're probably using a CSS technique.

    Could you go into a little more detail on this "chat bar"?

    I don't have facebook (GASP!) so I cannot see what ur talking about...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, CSS is used for this type of display and not javascript, use absolute positioning

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes sorry, being dense....i've covered this ground before aswell!

    http://limpid.nl/lab/css/fixed/footer

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can this be done in javascript? You can't dynamically change the footer size if you use css. What's the javascript for the same functionality?

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah you could do it with javascript although it would be kinda pointless when the css solutuion is there. In javascript you would be using some code like this (for height though) to detect how big the viewport was:
    [javascript]
    if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth;
    } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth;
    }[/javascript]

  7. #7
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by elduderino View Post
    I've been working on some javsscript at work to keep a menu centered in a page no matter what the screen-res is...it's hard to explain but css is not viable in this case.
    Code:
    <div style="position:fixed; border:1px solid orange; left:50%; top:50%;">centered</div>
    bottom aligned no matter what height the page has

    Code:
    <div style="position:fixed; border:1px solid orange; left:50%; bottom:0;">centered at the bottom</div>

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought that position:fixed does not work in IE?

  9. #9
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works in IE 7+


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
  •