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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts

    Float a "toolbar" over multiple pages

    OK, well I'm trying to create an effect where you have a toolbar on the bottom of the page, and I need the toolbar to stay there when you navigate to different pages. I know how to position it there, but I don't know how to keep the same instance of the toolbar there when navigating to a different page. If you want an example for reference, Facebook's bottom bar (with apps, friends, and notifications) is similar to what I want to achieve.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by 194673 View Post
    OK, well I'm trying to create an effect where you have a toolbar on the bottom of the page, and I need the toolbar to stay there when you navigate to different pages. I know how to position it there, but I don't know how to keep the same instance of the toolbar there when navigating to a different page. If you want an example for reference, Facebook's bottom bar (with apps, friends, and notifications) is similar to what I want to achieve.
    I would use windows.onload in a script used in all pages.

    regards

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by 194673 View Post
    OK, well I'm trying to create an effect where you have a toolbar on the bottom of the page, and I need the toolbar to stay there when you navigate to different pages. I know how to position it there, but I don't know how to keep the same instance of the toolbar there when navigating to a different page. If you want an example for reference, Facebook's bottom bar (with apps, friends, and notifications) is similar to what I want to achieve.
    this will work in firefox 2.0:
    js code: test.js
    Code:
    /* -*- c++ -*-
     */
    function build_footer_bar(){
      var footer = document.createElement('div');
      footer.setAttribute('id','footer');
      // create the bar content
      var something = document.createTextNode('footer bar content here...');
      // add inner content
      footer.appendChild(something);
      return footer;
    };
    
    function add_footer(){
      var b = document.getElementsByTagName('body');
      b = b[0];
      var footer = build_footer_bar();
      b.appendChild(footer);
    };
    
    window.onload = add_footer;
    css: test.css
    Code:
    * { margin: 0; padding: 0; }
    body { padding: 1.0em; }
    #footer { position: absolute; bottom: 1.0em; }
    xhtml:
    Code:
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="test.css"/>
        <script type="text/javascript" src="test.js"></script>
      </head>
      <body>
        <p>Your page content here....</p>
      </body>
    </html>
    regards

  • Users who have thanked oesxyl for this post:

    194673 (11-30-2008)


  •  

    Posting Permissions

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