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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Writing to a status bar within a page

    I was hoping someone might be able to help me out with an issue on a WIP of my site here: http://atlantis.plastiqueweb.com/2006.

    I have a list of menu items at the top of the page, and what I want to do is that when a page is active, or when you roll the mouse over any of the buttons, a description concerning that page is to be displayed on the blue status bar underneath.

    This area is contained within a DIV called "status_bar", and so I'd like some text to be written to this, taking on the properties as defined by the CSS. Is there a simple way of doing this that doesn't involve using javascript?

    Code:
    <h1>Atlantean Records</h1>
          <div id="menu-container">
            <ul>
    
              <li><div class="ta-neteru">Ta-Neteru</div></li>
              <li><a href="ambience.php" class="ambience" accesskey="a">Ambience</a></li>
              <li><a href="civilisation.php" class="civilisation" accesskey="c">Civilisation</a></li>
              <li><a href="contact.php" class="contact" accesskey="o">Contact</a></li>
              <li><a href="links.php" class="links" accesskey="l">Links</a></li>
              <li><a href="atlantis.php" class="atlantis" accesskey="n">Atlantis</a></li>
    
            </ul>
          </div>
          <div id="status_bar"></div>
    menu-container has the following image as its background:



    status_bar has the following image as its background:



    Code:
    #menu-container {
      height: 33px;
      background: #EBEBEB url(../images/layout/menu-background.png) no-repeat;
    }
    #menu-container ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    #menu-container ul li {
      float: left;
      display: block;
    }
    div.ta-neteru {
      width: 117px;
      height: 33px;
      background: #EBEBEB url(../images/layout/ta-neteru-rollover.png) no-repeat;
      font-size: 0;
    }
    a.ta-neteru {
      width: 117px;
      height: 33px;
      background: #EBEBEB url(../images/layout/ta-neteru.png) no-repeat;
      font-size: 0;
      display: block;
    }
    a.ta-neteru:hover {
      background: #EBEBEB url(../images/layout/ta-neteru-rollover.png) no-repeat;
    }
    div.ambience {
      width: 112px;
      height: 33px;
      background: #EBEBEB url(../images/layout/ambience-rollover.png) no-repeat;
      font-size: 0;
    }
    a.ambience {
      width: 112px;
      height: 33px;
      background: #EBEBEB url(../images/layout/ambience.png) no-repeat;
      font-size: 0;
      display: block;
    }
    a.ambience:hover {
      background: #EBEBEB url(../images/layout/ambience-rollover.png) no-repeat;
    }
    div.civilisation {
      width: 117px;
      height: 33px;
      background: #EBEBEB url(../images/layout/civilisation-rollover.png) no-repeat;
      font-size: 0;
    }
    a.civilisation {
      width: 117px;
      height: 33px;
      background: #EBEBEB url(../images/layout/civilisation.png) no-repeat;
      font-size: 0;
      display: block;
    }
    a.civilisation:hover {
      background: #EBEBEB url(../images/layout/civilisation-rollover.png) no-repeat;
    }
    div.contact {
      width: 101px;
      height: 33px;
      background: #EBEBEB url(../images/layout/contact-rollover.png) no-repeat;
      font-size: 0;
    }
    a.contact {
      width: 101px;
      height: 33px;
      background: #EBEBEB url(../images/layout/contact.png) no-repeat;
      font-size: 0;
      display: block;
    }
    a.contact:hover {
      background: #EBEBEB url(../images/layout/contact-rollover.png) no-repeat;
    }
    div.links {
      width: 82px;
      height: 33px;
      background: #EBEBEB url(../images/layout/links-rollover.png) no-repeat;
      font-size: 0;
    }
    a.links {
      width: 82px;
      height: 33px;
      background: #EBEBEB url(../images/layout/links.png) no-repeat;
      font-size: 0;
      display: block;
    }
    a.links:hover {
      background: #EBEBEB url(../images/layout/links-rollover.png) no-repeat;
    }
    div.atlantis {
      width: 97px;
      height: 33px;
      background: #EBEBEB url(../images/layout/atlantis-rollover.png) no-repeat;
      font-size: 0;
    }
    a.atlantis {
      width: 97px;
      height: 33px;
      background: #EBEBEB url(../images/layout/atlantis.png) no-repeat;
      font-size: 0;
      display: block;
    }
    a.atlantis:hover {
      background: #EBEBEB url(../images/layout/atlantis-rollover.png) no-repeat;
    }
    #status_bar {
      height: 21px;
      background: #FFFFFF url(../images/layout/status_bar.png) no-repeat;
    }
    Also, the pages are constructed from the following portion of main.inc.php - maybe I need to add the text descriptions at this point?

    Code:
      function menu_item($item, $text, $href, $key)
      {
        global $PHP_SELF;
    
        switch (basename($PHP_SELF))
        {
          case "index.php":
            $active_item = "ta-neteru";
            break;
          case "ambience.php":
            $active_item = "ambience";
            break;
          case "civilisation.php":
            $active_item = "civilisation";
            break;
          case "contact.php":
            $active_item = "contact";
            break;
          case "links.php":
            $active_item = "links";
            break;
          case "atlantis.php":
            $active_item = "atlantis";
            break;
          default:
            $active_item = "";
            break;
        }
        echo "  ";
        if($item == $active_item)
        {
          echo "        <li><div class=\"$item\">$text</div></li>\n";
        }
        else
        {
          echo "        <li><a href=\"$href\" class=\"$item\" accesskey=\"$key\">$text</a></li>\n";
        }
      }
    
      function header_()
      {
        echo "<span class=\"pre-load_images\">\n";
        echo "        <img src=\"images/layout/ta-neteru-rollover.png\" width=\"0\" height=\"0\" alt=\"Ta-Neteru\" />\n";
        echo "        <img src=\"images/layout/ambience-rollover.png\" width=\"0\" height=\"0\" alt=\"Ambience\" />\n";
        echo "        <img src=\"images/layout/civilisation-rollover.png\" width=\"0\" height=\"0\" alt=\"Civilisation\" />\n";
        echo "        <img src=\"images/layout/contact-rollover.png\" width=\"0\" height=\"0\" alt=\"Contact\" />\n";
        echo "        <img src=\"images/layout/links-rollover.png\" width=\"0\" height=\"0\" alt=\"Links\" />\n";
        echo "        <img src=\"images/layout/atlantis-rollover.png\" width=\"0\" height=\"0\" alt=\"Atlantis\" />\n";
        echo "        <img src=\"images/layout/navigation_button-rollover.png\" width=\"0\" height=\"0\" alt=\"Navigation button\" />\n";
        echo "      </span>\n";
        echo "      <h1>Atlantean Records</h1>\n";
        echo "      <div id=\"menu-container\">\n";
        echo "        <ul>\n";
        menu_item("ta-neteru", "Ta-Neteru", "index.php", "t");
        menu_item("ambience", "Ambience", "ambience.php", "a");
        menu_item("civilisation", "Civilisation", "civilisation.php", "c");
        menu_item("contact", "Contact", "contact.php", "o");
        menu_item("links", "Links", "links.php", "l");
        menu_item("atlantis", "Atlantis", "atlantis.php", "n");
        echo "        </ul>\n";
        echo "      </div>\n";
        echo "      <div id=\"status_bar\"></div>\n";
        echo "      <div id=\"atlantis-container\">\n";
        echo "        <div class=\"ta-neteru-overlay\"></div>\n";
        echo "        <div class=\"ambience-overlay\"></div>\n";
        echo "        <div class=\"civilisation-overlay\"></div>\n";
        echo "        <div class=\"contact-overlay\"></div>\n";
        echo "        <div class=\"links-overlay\"></div>\n";
        echo "        <div class=\"atlantis-overlay\"></div>\n";
        echo "        <div class=\"atlantis-right\"></div>\n";
        echo "      </div>\n";
      }
    I know this is probably quite a big issue, but any help or reference links would be appreciated.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure if there's a CSS solution.

    I know you can change content with innerHTML. So you could have something like this -

    <div id="status_bar">
    <p id="status_text"></p>
    </div>

    And use JavaScript to change the content with a function -

    <script type="text/javascript">
    function changeStatus(status){
    document.getElementById("status_text").innerHTML = status;
    }
    </script>

    Add mouseover property to links -

    <li><a href="ambience.php" class="ambience" accesskey="a" onmouseover="changeStatus('Ambience')">Ambience</a></li>


  •  

    Posting Permissions

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