PHP to show current page problem.

Discussion in 'Web Design and Development' started by Dal123, Aug 8, 2010.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I've had a lot of help on another forum and I'm a bit stuck so seeing if anyone here can help (I'm on the ponce again :eek:) I have an <ul> as my nav bar, and I am using php to check whether page is the last url piece after the /.
    I had it almost working (colours wasn't changing yet) but at least I had my page loading, instead of disapeering completely. I have now turned on to display php errors. I am not sure what the problem is now, I have edited a lot and not sure what's causing it. The reason I carried on editing is that it was creating formatting issues with my css. The list was set up nicely displaying even gaps, and flush at both ends, however when I finally got my php to work it pushed it along and messed it up.
    Surely php shouldn't have created any formatting errors as I'm only using it to display html on the page. So something has gotta be up with my code, can anyone see anything obvious. I have left the <div>'s in so you can get a feel of how it is set up:
    PHP:
    <div id="nav">
    <ul id="nav-list">
    <?php
    $scriptname 
    end (explode('/',_FILE_));
    echo 
    '<li>';
    if (
    $scriptname == 'index.php') {
    echo 
    '<a href="index.php" class="highlight">home</a>';    
    } else{    
    echo 
    '<a href="index.php">home</a>';
    }    
    echo 
    '</li>';

    echo 
    '<li>';
    if (
    $scriptname == 'services.php'); {
    echo 
    '<a href="services.php" class="highlight">services</a>';    
    } else{    
    echo 
    '<a href="services.php">services</a>';}    
    echo 
    '</li>';

    echo 
    '<li>';
    if (
    $scriptname == 'portfolio.php'); {
    echo 
    '<a href="portfolio.php" class="highlight">portfolio</a>';    
    } else{    
    echo 
    '<a href="portfolio.php">portfolio</a>';}    
    echo 
    '</li>';

    echo 
    '<li>';
    if (
    $scriptname == 'links.php'); {
    echo 
    '<a href="links.php" class="highlight">links</a>';    
    } else{    
    echo 
    '<a href="links.php">links</a>';}    
    echo 
    '</li>';


    echo 
    '<li><a href="http://www.preciseformwork.co.uk/wordpress">blog</a>';    

    echo 
    '<li>';
    if (
    $scriptname == 'contact.php'); {
    echo 
    '<a href="contact.php" class="highlight no-pad">contact us</a>';    
    } else{    
    echo 
    '<a href="contact.php" class="no-pad">contact us</a>';}    
    echo 
    '</li>';
    ?>
    </ul>
    </div>
    PHP errors are showing on line
    PHP:
    } else {    
    underneath services, though I cannot see why as it is the same as its predeccessor.
     
  2. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #2
    Well, this may not be your only problem, but this line (and others like it)

    PHP:
    if ($scriptname == 'services.php'); { 
    should be

    PHP:
    if ($scriptname == 'services.php') { 
    You don't use a semicolon on "if" "elseif" "else" "while" and the like.

    Have fun!
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Instead of the complicated bit you have to get the script name, use the basename function.

    You should also work on properly formatting/indenting your code, which makes it much easier to read and find problems.

    Here's some simplification to your code, just a snippet's worth.

    PHP:
    $class = ' class="highlight"';

    ?><li><a href="services.php"<?php
        
    if ($scriptname == 'services.php') echo $class;
    ?>>services</a></li>
     
  4. Ezlivin macrumors member

    Ezlivin

    Joined:
    Aug 11, 2010
    #4
    Why use PHP at all?

    If all you are trying to accomplish is the setting of class="highlight" when that page is the active page, there is a way to accomplish this through CSS alone.

    Taking your PHP and making it into HTML gives us this:

    Code:
    <ul id="nav-list"> 
      <li><a href="index.php" class="highlight">home</a></li>
      <li><a href="services.php" class="highlight">services</a></li>
      <li><a href="portfolio.php" class="highlight">portfolio</a></li>
      <li><a href="links.php" class="highlight">links</a></li>
      <li><a href="http://www.preciseformwork.co.uk/wordpress" class="highlight">blog</a></li>
      <li><a href="contact.php" class="highlight" class="no-pad">contact us</a></li>
    </ul>
    Simply add an ID to each <li> and remove the highlight classes for the a tags:

    Code:
    <ul id="nav-list"> 
      <li id="m_home"><a href="index.php">home</a></li>
      <li id="m_services"><a href="services.php">services</a></li>
      <li id="m_portfolio"><a href="portfolio.php">portfolio</a></li>
      <li id="m_links"><a href="links.php">links</a></li>
      <li id="m_blog"><a href="http://www.preciseformwork.co.uk/wordpress">blog</a></li>
      <li id="m_contact"><a href="contact.php" class="no-pad">contact us</a></li>
    </ul>
    Now on each page add a unique ID to the <body> tag. For the index.php page the body tag would read (for instance) "<body id="b_home">, the services.php body tag would read "<body id="b_services"> and so on.

    In your main CSS file write your selectors like this to enable the "highlight" to indicate the current page (note: this code snippet also takes care of hovers over the menu items):

    Code:
    #nav-list li#m_home a:hover,
    #nav-list li#m_services a:hover,
    #nav-list li#m_portfolio a:hover,
    #nav-list li#m_links a:hover,
    #nav-list li#m_blog a:hover,
    #nav-list li#m_contact a:hover,
    #b_home #nav-list li#m_home a,
    #b_services #nav-list li#m_services a,
    #b_portfolio #nav-list li#m_portfolio a,
    #b_links #nav-list li#m_links a,
    #b_blog #nav-list li#m_blog a,
    #b_contact #nav-list li#m_contact a
    {
    	YOUR HIGHLIGHT STYLE
    }
    There's no need for extensive PHP scripting when you can use CSS. And if you need to add a page it only takes a second to modify the CSS.

    Unless you are using the class "no-pad" elsewhere, you can also simply use the ID of the associated <li> to take care of the padding and you can drop the class declaration in the contact us anchor tag:

    Code:
    #nav-list li#m_contact a { YOUR no-pad STYLE }
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    No, the highlight class would only ever be applied to one of those li tags on any given page.

    So you trade some extensive PHP (which is very simple really) for extensive CSS and HTML modifications to get the effect. Not seeing the benefit. With the PHP you only have to modify the navigation section of code. With your code, you have to modify not only the navigation, but every single page, adding a new attribute to the body tag. Then you have a really large CSS selector to manage. So I simply don't see why to use your approach. I'm not saying the given technique is bad or wrong, I just don't see the benefit here.
     
  6. Ezlivin macrumors member

    Ezlivin

    Joined:
    Aug 11, 2010
    #6
    PHP Only Solution

    Code:
    <div id="nav"> 
    <ul id="nav-list"> 
    <?php 
    $scriptname = end (explode('/',_FILE_));
    // create associative array with filenames as keys
    $class = array('index.php' => '',
                         'services.php' => '',
                         'portfolio.php' => '',
                         'links.php' => '',
                         'contact.php' => '');
    
    $class[$scriptname] = ($scriptname == 'contact.php' ? 
                                    ' class="highlight no-pad"' : 
                                    ' class="highlight"');
    
    echo <<<EOT
      <li><a href="index.php"{$class['index.php']}>home</a></li>
      <li><a href="services.php"{$class['services.php']}>services</a></li>
      <li><a href="portfolio.php"{$class['portfolio.php']}>portfolio</a></li>
      <li><a href="links.php"{$class['links.php']}>links</a></li>
      <li><a href="http://www.preciseformwork.co.uk/wordpress">blog</a></li>
      <li><a href="contact.php"{$class['contact.php']}>contact us</a></li>
    EOT;
    
    ?> 
    </ul> 
    </div>
    Using an associative array with the filename (scriptname) as the key and empty values, you can then assign a class by referring to the array element by the scriptname. Then just include the individual array values in the HEREDOC. (Note the use of curly brackets.)
     
  7. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #7
    Thanks a lot for help on this people.
    I want to learn php, and would really like to integrate it on this site. Thanks :D.
     
  8. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    It's all gone FUBAR!

    Been trying this for quite a while now and cannot seem to get it back to normal.
    What I think is happening is that my css is not applying the 'class' tag. From my amateur eye my php looks good, it's not showing errors and my page is loading :). However the script is not showing what page we are currently on in the nav bar at the top, and since incorporating the script the final item in my list, which has a class 'no-pad' applied to it - which removes all the padding out of the item and floats it to the right to make the nav-bar seem neat and universal.
    Since using this script the nav-bar is ruined and contact us goes on the next line. So it's gotta be an issue of applying class tag. Am I applying it correctly with my script? I have noticed with the developer toolbar that we have an empty list (pictured) <li> but I think this may be the final list item just where it overlaps on next line, I have checked my code and there are no empty li tags.
    Can anyone see anything wrong with my code? I can't be trying new methods now as I've spent over a week on this and need to get it done.
    PHP:
    <?php
    $scriptname 
    end (explode('/',_FILE_));
    echo 
    '<li>';
        if (
    $scriptname == 'index.php') {
            echo 
    '<a href="index.php" class="highlight">home</a>';    
        } else {    
            echo 
    '<a href="index.php">home</a>';
        }    
    echo 
    '</li>';
    echo 
    '<li>';
        if (
    $scriptname == 'services.php') {
            echo 
    '<a href="services.php" class="highlight">services</a>';    
        } else {    
            echo 
    '<a href="services.php">services</a>';}    
    echo 
    '</li>';
    echo 
    '<li>';
        if (
    $scriptname == 'portfolio.php') {
            echo 
    '<a href="portfolio.php" class="highlight">portfolio</a>';    
        } else {    
            echo 
    '<a href="portfolio.php">portfolio</a>';}    
    echo 
    '</li>';
    echo 
    '<li>';
        if (
    $scriptname == 'links.php') {
            echo 
    '<a href="links.php" class="highlight">links</a>';    
        } else {    
            echo 
    '<a href="links.php">links</a>';}    
    echo 
    '</li>';
    echo 
    '<li><a href="http://www.preciseformwork.co.uk/wordpress">blog</a></li>';
    echo 
    '<li>';
        if (
    $scriptname == 'contact.php') {
            echo 
    '<a href="contact.php" class="no-pad">contact us</a>';    
        } else {    
            echo 
    '<a href="contact.php" class="no-pad">contact us</a>';}    
    echo 
    '</li>';
    ?>
    </ul>
    </div>
    CSS
    Code:
    .highlight {
    color:#FF3300;
    padding:0;
    margin:0;
    }
    
    #nav-list li{
    position:relative;
    display:inline;
    padding:0 2.5em 0 0;
    margin:0;
    font-family: "Lucidia Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
    font-size: 25px;
    }
    #nav-list li a{
    text-decoration:none;
    color:#FFFFFF;
    margin:0;
    padding:0;;
    }
    #nav-list li a:hover{
    color:#999999;
    }
    #nav-list li a no-pad {
    padding:0 0 0 0;
    margin:0 0 0 0;
    float:right;
    }
    
    #nav-list .no-pad {
    padding:0 0 0 0;
    margin:0 0 0 0;
    float:right;
    }
     

    Attached Files:

  9. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #9
    I think your problem is that the browser gives precedence of the styling to the contextual rules.

    Change

    HTML:
    .highlight {
    to

    HTML:
    #nav-list li a.highlight {
     
  10. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #10
    Thanks, I did try that originally, and can see that is how it needs to be applied, but it is not working. Even more alarming than that, is the class 'no-pad' is not being applied and it's ruining my nav bar :(.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    The no-pad isn't working because you forgot the . in front of it and it's not joined to the a selector.

    Code:
    #nav-list li a[B][COLOR="Red"].[/COLOR][/B]no-pad {
     
  12. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #12
    Thanks, I've corrected li a.no-pad and still not working. I just can't see where this problem is coming from.:confused:
    Like I said in previous post or two ago, I'm a little concerned that an extra <li> is being inserted but examining my code it doesn't look like it's being inserted. :confused:
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    I recommend using Firebug to see what is up. Go to the tag in question and see what styles are being applied to it and overwritten. This will also let you see the current HTML structure that the page has.

    If that doesn't lead you to any results it would help to see your latest code with what you are trying so we can see if there are any other typos.
     
  14. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #14
    Thanks angelwatt, I'm checking it on firebug now.
     
  15. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #15
    I can't see nothing sinister in firebug.
    The nav bar was fine before I started trying to work out the current page. Tried all logical things with this :confused:.
    I have the whole site uploaded as it is at the moment on my current website under the directory new; site is here
    http://www.preciseformwork.co.uk/new/index.php
    I have just bought hosting for the .com but am awaiting my authentication code to transfer the domain from my current hosting provider.
     
  16. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    The CSS is working, you're just not getting the desired effect you want. The Contact Us bit is ending up a line down. Move the class no-pad to the li element.
     
  17. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
  18. eponym macrumors 6502

    Joined:
    Jul 2, 2010
    #18
    I know very little PHP, but what I've used in the past was pretty effective and a lot simply than a million if statements.

    First you need a function for doing tests in general. It can based on an ID, a parameter, a page whatever...in your case something like this:

    PHP:
    <?php

            $scriptname 
    end (explode('/',_FILE_));

            function 
    testActive($fileName) {
                if(
    $scriptname == $fileName) {
                    echo 
    " class=\"highlight\"";
                }
            }
        
    ?>
    Then in you nav list:

    PHP:
    <li><a href="index.php"<?php testActive('index.php'); ?>>Home</a></li>
    <li><a href="sales.php"<?php testActive('sales.php'); ?>>Sales</a></li>
    <li><a href="links.php"<?php testActive('links.php'); ?>>Links</a></li>

     
  19. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #19
    Thanks eponym, that looks like a very efficient way of doing it. Unfortunately I cannot get my script to work in seeing what page I'm on. I'm getting an error
    Notice: Use of undefined constant _FILE_ - assumed '_FILE_' in localhost/new/top.php on line 33 and it's not working :(
     
  20. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #20
    There's suppose to be 2 underscores on either side of FILE.
     
  21. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #21
    Thanks, unfortunately still can't get the list page to change colour when the page is being viewed :(.
     
  22. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #22
    You'll need to be more specific if you want help on that. What specifically does not work mean? What is happening? And what code are you currently trying with?
     
  23. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #23
    I want the link in my nav bar to change colour to show what page it is on. So have assigned a.highlight to a different colour and the theory is that it should change colour what page it is on but somethings up.
    I currently have my code:
    PHP:
    <?php
    $scriptname 
    end (explode('/',__FILE__));
    echo 
    '<li>';
        if (
    $scriptname == 'index.php') {
            echo 
    '<a href="index.php" class="highlight">home</a>';    
        } else {    
            echo 
    '<a href="index.php">home</a>';
        }    
    echo 
    '</li>';
    echo 
    '<li>';
        if (
    $scriptname == 'services.php') {
            echo 
    '<a href="services.php" class="highlight">services</a>';    
        } else {    
            echo 
    '<a href="services.php">services</a>';}    
    echo 
    '</li>';
    echo 
    '<li>';
        if (
    $scriptname == 'portfolio.php') {
            echo 
    '<a href="portfolio.php" class="highlight">portfolio</a>';    
        } else {    
            echo 
    '<a href="portfolio.php">portfolio</a>';}    
    echo 
    '</li>';
    echo 
    '<li>';
        if (
    $scriptname == 'links.php') {
            echo 
    '<a href="links.php" class="highlight">links</a>';    
        } else {    
            echo 
    '<a href="links.php">links</a>';}    
    echo 
    '</li>';
    echo 
    '<li><a href="http://www.preciseformwork.co.uk/wordpress">blog</a></li>';
    echo 
    '<li class="no-pad">';
        if (
    $scriptname == 'contact.php') {
            echo 
    '<a href="contact.php" class="no-pad">contact us</a>';    
        } else {    
            echo 
    '<a href="contact.php" class="no-pad">contact us</a>';}    
    echo 
    '</li>';
    ?>
    CSS
    HTML:
    #nav-list {
    position:relative;
    padding:0;
    margin:0;
    }
    
    
    
    #nav-list li{
    position:relative;
    display:inline;
    padding:0 2.5em 0 0;
    margin:0;
    font-family: "Lucidia Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
    font-size: 25px;
    }
    #nav-list li a{
    text-decoration:none;
    color:#FFFFFF;
    margin:0;
    padding:0;
    }
    #nav-list li a:hover{
    color:#999999;
    }
    #nav-list li a.no-pad {
    padding:0;
    margin:0;
    float:right;
    }
    
    #nav-list .no-pad {
    padding:0;
    margin:0;
    float:right;
    }
    
    #nav-list li a.highlight {
    color:#33FFFF;
    }
     
  24. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #24
    I think it's related to the first line because the highlight class doesn't get applied to list item.
    PHP:
    $scriptname end (explode('/',__FILE__));
    I suggested a better way earlier for getting at the file name.
    PHP:
    $scriptname basename(__FILE__);
     
  25. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #25
    I did try writing basename earlier but had no idea on how to write it. I spent a couple of hours this evening trying to understand it, and various different commands but unless you have an idea of certain components and how they work it's like trying to read japanesse for me :eek:.
    I have it now exactly how you suggest but it still not highlighting. Thanks for trying though :). Appreciated.
     

Share This Page