SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Current page not working

    I have been several days trying to resolve this issue. Either my css or menu is incorrect or there is some coding that need to be added.

    main_menu.php
    PHP Code:
    <?php
        
    // Initialize $thisPage
            
    $thisPage '';
    ?>

    <div class="main_nav">
      <ul>
        <li id="home"><a style="background-position: 0pt 0pt;" <?php if ($thisPage=="home") echo " class=\"current\""?> href="?id=home" title="Home">Home</a></li>
        <li id="services"><a style="background-position: 0px 0px;" <?php if ($thisPage=="services") echo " class=\"current\""?> href="?id=services" title="Services">Services</a></li>
        <li id="media"><a style="background-position: 0px 0px;" <?php if ($thisPage=="media") echo " class=\"current\""?> href="?id=media" title="Media">Media</a></li>
        <li id="testimonials"><a style="background-position: 0px 0px;" <?php if ($thisPage=="testimonials") echo " class=\"current\""?> href="?id=testimonials" title="Testimonials">Testimonials</a></li>
        <li id="bio"><a style="background-position: 0pt 0pt;" <?php if ($thisPage=="bio") echo " class=\"current\""?> href="?id=bio" title="Bio">Bio</a></li>
        <li id="contact"><a style="background-position: 0pt 0pt;" <?php if ($thisPage=="contact") echo " class=\"current\""?> href="?id=contact" title="Contact">Contact</a></li>
        
      </ul>
    </div>
    css
    Code:
    div.main_nav { width: 750px; height: 83px; padding: 25px 0 0 28px; margin: 0 auto;}
    div.main_nav ul { float: left; padding: 19px 20px 0 0; }
    div.main_nav ul li { display: inline; }
    div.main_nav ul li a { float: left; display: block; height: 38px; text-indent: -9999px; margin-left: 15px; }
    div.main_nav ul li#contact a { background: url('../images/nav_cont.png') no-repeat; width: 113px; }
    div.main_nav ul li#bio a { background: url('../images/nav_bio.png') no-repeat; width: 71px; }
    div.main_nav ul li#testimonials a { background: url('../images/nav_test.png') no-repeat; width: 142px; }
    div.main_nav ul li#media a { background: url('../images/nav_media.png') no-repeat; width: 85px; }
    div.main_nav ul li#services a { background: url('../images/nav_serv.png') no-repeat; width: 118px; }
    div.main_nav ul li#home a { background: url('../images/nav_home.png') no-repeat; width: 80px; }
    div.main_nav ul li#home a:hover, div.main_nav ul li#services a:hover, div.main_nav ul li#media a:hover, div.main_nav ul li#testimonials a:hover, div.main_nav ul li#bio a:hover, div.main_nav ul li#contact a:hover { background-position: 0 -52px; }
    div.main_nav ul li a.current { background-position: 0 -104px!important; }
    I have even tried adding this code as the first line of each page using the id as the actual page id. Doesn't work either.
    PHP Code:
    <?php $thisPage="home"?>
    If I add a visited class to the current class, all links change to the correct image when the menu is loaded.
    Code:
    div.main_nav ul li a.current, div.main_nav ul li a:visited { background-position: 0 -104px!important; }

  2. #2
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    First, have you looked at the resulting HTML to see what it looks like?

    Second, have you tried echoing the value of $thisPage somewhere on the HTML page to see if the value is what it's supposed to be?

  3. #3
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no reference to a current class in the resulting html.
    I have added to each page
    PHP Code:
    <?php if ($thisPage!="page name here")echo "$thisPage, "?>
    It inserts a comma into the div content area before the actual content.

  4. #4
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, maybe I am not understanding what you're after.

    I just did some experiments on my local machine.

    I created an index.php, and added this:

    Code PHP:
    <?php 
    $thisPage = 'home';
    include('menu.php');
    ?>

    Then in menu.php I added your list:<div class="main_nav">

    Code PHP:
    <ul>
        <li id="home"><a style="background-position: 0pt 0pt;" <?php if ($thisPage=="home") echo " class=\"current\""; ?> href="?id=home" title="Home">Home</a></li>
        <li id="services"><a style="background-position: 0px 0px;" <?php if ($thisPage=="services") echo " class=\"current\""; ?> href="?id=services" title="Services">Services</a></li>
        <li id="media"><a style="background-position: 0px 0px;" <?php if ($thisPage=="media") echo " class=\"current\""; ?> href="?id=media" title="Media">Media</a></li>
        <li id="testimonials"><a style="background-position: 0px 0px;" <?php if ($thisPage=="testimonials") echo " class=\"current\""; ?> href="?id=testimonials" title="Testimonials">Testimonials</a></li>
        <li id="bio"><a style="background-position: 0pt 0pt;" <?php if ($thisPage=="bio") echo " class=\"current\""; ?> href="?id=bio" title="Bio">Bio</a></li>
        <li id="contact"><a style="background-position: 0pt 0pt;" <?php if ($thisPage=="contact") echo " class=\"current\""; ?> href="?id=contact" title="Contact">Contact</a></li>
    </ul>

    And I got a class="current" on the first menu item.

    Now, when I add your CSS to the first page, I get nothing at all.

  5. #5
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ok, when I remove the "text-indent: -9999px" from the CSS, I can see the menu.

    I'm thinking this is a CSS issue and not so much php

  6. #6
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, let me show the full index page.
    PHP Code:
    <?php include ($_SERVER['DOCUMENT_ROOT'] . 'test/inc/head.php'); ?>
    <div id="container">
      <!--header and menu content goes here -->
      <div id="header">
        <?php include ($_SERVER['DOCUMENT_ROOT'] . 'test/inc/logo.html'); ?>
      </div>
      <div id="nav">
        
    <?php include ($_SERVER['DOCUMENT_ROOT'] . 'test/inc/main_menu.php'); ?>


      </div>
      <div id="content">
        <div class="wrapper">
          <!--main page content goes here -->

    <?php
        
    // Define our array of allowed $_GET values
            
    $pass = array('home','services','media','testimonials','bio','contact');
                
        
    // If the page is allowed, include it:
            
    if (in_array($_GET['id'], $pass)) {
                include (
    $_SERVER['DOCUMENT_ROOT'] . 'test/pages/' $_GET['id'] . '.php'); 
            } 
            
        
    // If there is no $_GET['id'] defined, then serve the homepage:
            
    elseif (!isset($_GET['id'])) {
                include (
    $_SERVER['DOCUMENT_ROOT'] . 'test/pages/home.php'); 
            }

        
    // If the page is not allowed, send them to an error page:
            
    else {
                    
    // This send the 404 header
                        
    header("HTTP/1.0 404 Not Found");
                    
    // This includes the error page
                        
    include ($_SERVER['DOCUMENT_ROOT'] . '/inc/error.php');
            }

    ?>

        </div>
      </div>
      <div id="sidebar">
        <?php include ($_SERVER['DOCUMENT_ROOT'] .'test/inc/sidebar.html'); ?>
      </div>
      <div class="clear"></div>
      <!--footer content goes here -->
      <div id="footer">
        <?php include ($_SERVER['DOCUMENT_ROOT'] .'test/inc/footer.php'); ?>
      </div>
    </div>
    </body>
    </html>
    Inside each of the pages there is nothing but markup that inserts inside the wrapper div, just like included content. If they were static pages there would be no problem because I could put the menu on each one and just include the header and footer and right sidebar.

    References:
    http://www.digital-web.com/articles/easypeasy_php_2/
    http://www.alistapart.com/articles/keepingcurrent/

    Sprite image attached.
    Attached Images Attached Images

  7. #7
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, got this figured out, right or wrong.
    By stripping out url elements, adding an id to the body using php and removing the current class from the links I was able to style the active or current page link using the body id.

    Added this code between the ending head tag and the opening body tag
    Code:
    <?php
      $page = $_SERVER['REQUEST_URI'];
      $page = str_replace("","",$page);
      $page = str_replace("/","",$page);
      $page = str_replace(".php","",$page);
      $page = str_replace("index","",$page);
      $page = str_replace("?id=","",$page);
      $page = str_replace("?s=","",$page);
      $page = $page ? $page : 'default'
    ?>
    Added this to the body tag
    Code:
    <body id ="<?php echo $page ?>">
    Which gives a body id depending on which page url is displayed.

    Added a class to the a link in the menu html
    Code:
    <div class="main_nav">
      <ul>
        <li id="home"><a class="home" style="background-position: 0px 0px;" href="?id=home" title="Home">Home</a></li>
        <li id="services"><a class="services" style="background-position: 0px 0px;" href="?id=services" title="Services">Services</a></li>
        <li id="media"><a class="media" style="background-position: 0px 0px;" href="?id=media" title="Media">Media</a></li>
        <li id="testimonials"><a class="testimonials" style="background-position: 0px 0px;" href="?id=testimonials" title="Testimonials">Testimonials</a></li>
        <li id="bio"><a class="bio" style="background-position: 0px 0px;" href="?id=bio" title="Bio">Bio</a></li>
        <li id="contact"><a class="contact" style="background-position: 0px 0px;" href="?id=contact" title="Contact">Contact</a></li>
      </ul>
    </div>
    CSS
    Code:
    div.main_nav { width: 750px; height: 83px; padding: 25px 0 0 28px; margin: 0 auto;}
    div.main_nav ul { float: left; padding: 19px 20px 0 0; }
    div.main_nav ul li { display: inline; }
    div.main_nav ul li a { float: left; display: block; height: 38px; text-indent: -9999px; margin-left: 15px; }
    div.main_nav ul li#contact a { background: url('../images/nav_cont.png') no-repeat; width: 113px; }
    div.main_nav ul li#bio a { background: url('../images/nav_bio.png') no-repeat; width: 71px; }
    div.main_nav ul li#testimonials a { background: url('../images/nav_test.png') no-repeat; width: 142px; }
    div.main_nav ul li#media a { background: url('../images/nav_media.png') no-repeat; width: 85px; }
    div.main_nav ul li#services a { background: url('../images/nav_serv.png') no-repeat; width: 118px; }
    div.main_nav ul li#home a { background: url('../images/nav_home.png') no-repeat; width: 80px; }
    div.main_nav ul li a:visited { background-position: 0 -52px; }
    div.main_nav ul li a:hover { background-position: 0 -52px; }
    #testhome .main_nav ul li#home a.home, #testservices .main_nav ul li#services a.services, #testmedia .main_nav ul li#media a.media, #testtestimonials .main_nav ul li#testimonials a.testimonials, #testbio .main_nav ul li#bio a.bio, #testcontact .main_nav ul li#contact a.contact {
    background-position: 0 -104px!important;}

    And it all works!!

    Now to change the url so it doesn't display as index.php?id=home

  8. #8
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sticks464 View Post
    Added this to the body tag
    Code:
    <body id ="<?php echo $page ?>">
    Which gives a body id depending on which page url is displayed.
    hmmmm... That's a really good idea.

  9. #9
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You must also use php between the closing head tag and the opening body tag.
    PHP Code:
    </head>
    <?php
      $page 
    $_SERVER['REQUEST_URI'];
      
    $page str_replace("","",$page);
      
    $page str_replace("/","",$page);
      
    $page str_replace(".php","",$page);
      
    $page $page $page 'default'
    ?>
    <body id ="<?php echo $page ?>">
    which strips out forward slashes and php extensions. I had to use a little extra because of wampserver.

  10. #10
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sticks464 View Post
    You must also use php between the closing head tag and the opening body tag.
    Of course, but in my case I'd be doing this with CF and not PHP (it's what my office uses). But grabbing the current directory name and using it as the ID on the body tag has many possibilities.


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
  •