Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

PHP to show current page problem.

Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
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.
 
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!
 
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>
 
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 }
 
Ezlivin said:
Taking your PHP and making it into HTML gives us this:
Click to expand...
No, the highlight class would only ever be applied to one of those li tags on any given page.

Ezlivin said:
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.
Click to expand...

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.
 
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.)
 
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.
 
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;
}
 

Attachments

  • Picture 2.png
    Picture 2.png
    453.3 KB · Views: 113
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 {
 
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 :(.
 
Dal123 said:
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 :(.
Click to expand...

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 {
 
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:
 
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.
 
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.
 
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.
 
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>
 
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 :(
 
Thanks, unfortunately still can't get the list page to change colour when the page is being viewed :(.
 
Dal123 said:
Thanks, unfortunately still can't get the list page to change colour when the page is being viewed :(.
Click to expand...

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?
 
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;
}
 
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__);
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back