SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A Facebook-like bottom "menu", How?

    Hi guys,

    I've been looking around a bit, but I can't seem to find an answer to my question.. I would like to build kind of a menu-bar, at the bottom of my current website, like the one on the Facebook website.(at the bottom, the one wich says "applications" and so on...)

    I allready tried to make something with CSS, and it works, so when u resize the window, the bar stays nice in place at the bottom. BUT... Only when the content of the page, isn't larger than the users screen(in height) When a user than scrolls, the bottom bar, just scrolls along, with the rest of the page. How can i keep this "bar" really "stuck" to the bottom of the screen, so that text just "flows" behind it, even when scrolling?

    If you don't get what i mean, just visit the Facebook website, you will see it in action there. And no, this isn't in any way spam for the FB website, this is an actual question...

    Tha following CSS code, is currently installed on my page:

    Code:
    html, body {
    	height:100%;
    }
    html.use_scroll_wrapper { 
    	overflow:hidden;
    }
    #bottom_bar {
    	position:absolute;
    	bottom:0;
    	left: 15px;
    	right: 15px;
    	height: 25px;
    	background:url(images/presence/bar_bg_bw.gif) repeat-x top left;
    	border-right: solid 1px #b5b5b5;
    	z-index: 3;
    }
    ...
    There's more, but not relevant to this question (I think)
    Attached Images Attached Images

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Use position:fixed instead of absolute. Fixed is relative to the browser window and not the document.

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Nice going.. Such a small change makes a big difference

  4. #4
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about information about how the Facebook app bar stays persistent even when clicking links to other pages within Facebook?

    Not sure if it is AJAX passing info to the next loaded page to make it "look" like the bar stays in place while the rest of the page loads new content, or does that presence bar use memory in the browser to remain in place while the rest of the page loads new content?

  5. #5
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "it is AJAX passing info to the next loaded page"

    You answered it yourself

  6. #6
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sonic393 View Post
    "it is AJAX passing info to the next loaded page"

    You answered it yourself
    Thanks for the quick response...

    Though I considered AJAX as a way to accomplish it, I never fully believed that Facebook was doing it that way because it seems so transparent that I don't detect any type of refresh happening to the presence bar. If it was AJAX calling back to load up the presence bar on the next page, I would expect some kind of "blip". And because I never could detect that happening, my next assumption was the usage of some sort of browser memory to actually keep it present on page while everything else loads.

    How confident are you that it is just the AJAX approach?

  7. #7
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A lot of "pages" are requested to the browser trough AJAX requests.

    You can see when the page is actually refreshed, by selecting some text in the bottom menubar, and then clicking :

    Home
    Profile
    Friends
    Inbox

    None of these clicks remove the selection. But when you click on "settings", the page needs to be refreshed and your selection is gone..

    I suggest further reading on AJAX Requests / Updater . You can find a rather large PDF about this AJAX stuff at

    GOOGLE SEARCH -> prototype-160-api.pdf (can't post links yet)

    Enjoy reading ;-) i'ts a large part, and for most people a rather new approach to dynamic websites

  8. #8
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need to be able to post links. You can break down links like this

    www .google. com

  9. #9
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope

    "In an effort to stamp out forum SPAM only members with 10 posts or more can post website links or email addresses."

  10. #10
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ??

    Usin the example i just showed you that allows you to give the url of the site without actually posting a url. Try it...

  11. #11
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BBoardX View Post
    ??

    Usin the example i just showed you that allows you to give the url of the site without actually posting a url. Try it...
    I added exactly what you typed... it doesn't work

  12. #12
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should work. I always did it. You must be typing in like

    http://www. google. com or something to that affect. If you use my strategy successfully then you are not posting a link, rather you are posting text that has the look of a url.

  13. #13
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    h t t p : / / globalmoxie . com / bm~doc/prototype-160-api.pdf

    Only when i space out all letters, it gets trough

    Like you mentioned, it REALLY doesn't.... Just register a new account and try it out yourself if you don't believe me...

  14. #14
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont need to register an account. It worked for me. It should work for you. try taking out the http. This is how to do it. try and copy and pasting

    www. globalmoxie . com/ bm~doc/prototype-160-api.pdf

  15. #15
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Facebook is using a layout that is called. (Fixed Footer).Here is a example of a fixed footer layout. http://www.pmob.co.uk/temp/fixed-footer-only.htm

    How the footer is made.


    Theres a bottom footer container and inside the footer there are applications being displayed on the left and the right usually the list's are being floated.

    Code CSS:
    <div id="container">
    <div id="presence_bar_left">
    </div>
     
    <div id="presence_bar_right">
    </div>
    </div>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/



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
  •