Change the color of a navigation link

HTML & CSS
21

Yeah, I think I got it, obviously might need tweaking, and you could go as far as to putting certain attributes into their own arrays so it’s easier to update, and put this in an external file etc. But you can see the logic:

$tmp=explode(".",basename(__file__)); 
$fileName=$tmp[0];
$ext=$tmp[1];
$file=$tmp[0] . $tmp[1];

$link=array();

//links here

$link[0]="apples.php";
$link[1]="oranges.php";

$navBarStr="<ul>";

for($i=0; $i<count($link); $i++)
{
	if($link[$i]==$file)
	{
		//add active class
		$navBarStr.="<li><a class='activeLink' href='{$link[$i]}'></li>'";
		
	}
	else
	{
		//no class
		$navBarStr.="<li><a href='{$link[$i]}'>{$link[$i]}</li>";
	}
}

$navBarStr.="</ul>";

And basically just echo $navBarStr where the navigation bar is suppose to be and add the class. :slight_smile:

22

set a class called “current” on the appropriate LI for the page – DONE.

Screwing around with inheriting ID’s off body, or stupid CSS tricks is nothing but /FAIL/ for maintenance…

Besides if your php is any good you should have your menu in an array, then you can compare the array when echoing out the list inside foreach making less php code and more consistent output of the markup.

23

I concur - CSS backed up by PHP for the win!

24

Appreciate my code d*mmit. It saves you the 5 seconds that you have to update the <li> if you were to add another page. Seriously though, little things like that can add up.

25

Lawlz I do it all manually. I must suck : )

26

Appreciate my code d*mmit. It saves you the 5 seconds that you have to update the <li> if you were to add another page.[/QUOTE]

I think a misunderstanding is happening here. deathshadow is not talking about updating html code, he’s providing advice to improve the structure and flow of the PHP code itself.

27

Oddly at first glance I didn’t realize it was doing that – but that’s because you put the if statement outside the string building, and were messing with string building on something I’d have at the echo – but then I tend to have the theme code separated from the logic, so I build the content (as an array) and have the theme output it.

Some ‘tips’ on your php…

  1. STOP using double quotes for EVERYTHING. It’s slower to run and it makes those ugly single quotes in your output – generally a bad idea.

  2. Don’t bother with numeric indexing your links on code like that – foreach exists for a reason, said reason being avoiding the overhead of having an extra variable as your counter when PHP arrays have an entire each/next/reset/end mechanism built in.

  3. It’s usually easy enough to make the output formatted, so I’d suggest doing that too.

  4. if everything is named .php, don’t waste string space on saying it.

  5. FILE includes the full path, so you’d NEVER have a match. $_SERVER[‘PHP_SELF’] is usually easier to parse… it’s always the full local path so even root “/” is listed.

  6. be nice if the array output actual TEXT in those anchors; That’s where indexed arrays should be used.

Try this on for size – untested but should be pretty much the same:


$fileToMatch=substr(strrchr($_SERVER['PHP_SELF'],'/'),1);

$linkList=array(
	array(
		'url' => 'apples.php',
		'text' => 'Get Apples'
	),
	array(
		'url' => 'oranges.php',
		'text' => 'Get Oranges'
	)
);

echo '
	<ul id="someMenu">';

foreach ($linkList as $link) {
	echo '
		<li',(
			$link['matchName']==$fileToMatch ? ' class="current"' :	''
		),'><a href="', $link['url'], '">', $link['text'], '</a></li>';
}

echo '
	</ul>';

A little better :smiley:

28

To everyone who was kind and generous enough to reply, I THANK YOU!!!. I have plenty to go on now and will try these out and get back to the forum with the conclusion.

Again, thank so much to all.

29

Okay it did work in IE, I saw it work in FF, but after one go around it quit working altogether. You were right…once I got it, it was very easy to implement and no php or js. Any suggestions as to why it won’t work in FF?

Thanks again dude.

30

You’ll need to post what you have… everything relevant.

31

Here is the CSS for the navigation:


ul#nav
{
list-style: none;
font-family: Arial, Helvetica, sans-serif;
margin: 15px 0 0 0;
padding: 0;
}
#nav a:link, #nav a:visited   {
display: block;
width: 180px;
height: 27px;
padding: 6px 3px 6px 1.5em;
color: #03C;
text-decoration: none;
font-size: 80%;
border-bottom: 1px solid #ebebeb;
}
#nav a:hover {
text-decoration: underline;
}
#binc a#inc,
#bici a#ici,
#bout a#out,
#bnh a#nh,
#bch a#ch,
#bph a#ph,
{
color:#f00;
font-weight:normal;
font-style: italic;
}

Now, here is the html include


<li><a href="it_infrastructure.php" id="inc">INTERNAL NETWORK CONNECTIVITY</a></li>
<li><a href="internet_connectivity.php" id="ici">INTERNET CONNECTIVITY - INSIDE THE OFFICE</a></li>
<li><a href="internet_connectivity_outside.php" id="out">INTERNET CONNECTIVITY - OUTSIDE THE OFFICE </a></li>
<li><a href="network_hardware.php" id="nh">NETWORK HARDWARE</a></li>
<li><a href="computer_hardware.php" id="ch">COMPUTER HARDWARE</a></li>
<li><a href="peripheral_hardware.php" id="ph">PERIPHERAL HARDWARE</a></li>

And on each page I change the <body> tag to reflect the id…example: <body id=“inc”>

Works great in IE. Could it be the include that messed up FF?

32

And on each page I change the <body> tag to reflect the id…example: <body id=“inc”>
Did you typo? Because you’re saying the body id on one page is “inc” but your CSS has
#binc a#inc,

So is it #inc or #binc? Hopefully #binc because you don’t want two identical id’s on an HTML page.

33

Sorry my bad and it’s a typo on the forum. I actually have the “b” included in the body tag. This only works in IE to which I am surprised but not FF, Chrome or Safari.

34 

#binc a#inc,
#bici a#ici,
#bout a#out,
#bnh a#nh,
#bch a#ch,
#bph a#ph[color="red"],[/color]
{
color:#f00;
font-weight:normal;
font-style: italic;
}

There’s a trailing comma there, which I’ve marked in red.
Remove that and you should be sweet.


#binc a#inc,
#bici a#ici,
#bout a#out,
#bnh a#nh,
#bch a#ch,
#bph a#ph {
    color:#f00;
    font-weight:normal;
    font-style: italic;
}
35

:):p:sing::love:

Thank you so very much. I love what you suggested and it works!!! Have a great Christmas in NZ from me in USA…btw, someone thought I was a dude…nope, all woman.

36

Yeah dude, whatever works.

But I do find it funny you advise using literal strings, yet recommend a foreach when it’s 3 times slower than a for loop… and a few other things that you recommended me changing… lolz. I like indexed arrays because it stays consistentent with the two primary programming languages I work with though, js does not support associative arrays but you can manipulate them in a pseudo type way…

37

Donald Knuth says “We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil”

One of the programming problems stems from bringing badinappropriate habits from other languages.

It’s not that javascript doesn’t support them, it’s that using foreach to process associativestandard arrays is considered harmful, due to the nature of the global namespace.

With the proper use of hasOwnProperty javascript can process associative arrays with no trouble at all.

38

All I know, is I’m going to be opening some dope x-mas presents later. That is, if santa can fit his fat as* through my chimney.

39

By the way, there is a proper array method for iterating through all elements of an array, whether they be indexed numerically or associatively.


var arr = [
    name: 'Paul Wilkins',
    sex: 'Male',
    religion: 'No thanks'
];
arr.forEach(function (element, index, array) {
    ...
});

The problem is that this is a JavaScript 1.6 feature, so Internet Explorer which is still in the 1.3 stone-age isn’t capable of using this. You would need to also add compatibility code, available at the forEach documentation page, to provide the appropriate implementation where it’s unavailable.

Did I say that javascript programming is a really hostile programming environment? Source: An Inconvenient API: The Theory of the Dom

Or that when working with the global namespace, you are to treat it as if it were a public toilet? You can’t avoid going there, but you should try to limit your contact to surfaces when you do. Source: Google Closure: How not to write JavaScript

40

Since when? PHP arrays aren’t stored like arrays in other languages, they’re effectively a stream of sibling pointers – a next/end structure should always be faster than trying to access them via artificial index structures (like numerics) that don’t really exist in the actual structure… admittedly the internal index usage is slower, but on it’s own foreach vs. “for val++” should always be faster.

Well, unless you count the overhead of the copy to the index value since php doesn’t have pointers… Garbage train wreck of a language can’t even bother with letting you have proper memory structures… kind of like the lack of complex types making the object implementation worse than C++'s … Which is a bit like making a worse automobile than a 1984 Yugo GV.

But I’m a Wirth fan who also still codes machine language, so what do I know :stuck_out_tongue:

Oh, and someone kick the people talking about using javascript for this square in the ____ for me… :smiley: