Change color of links that have a target of the page on which they are found.

R

Rich Bradshaw

Hi,

Sorry about the long title - I have a page with a navbar on. I would
like like to make it so that the links that link to the page the user
is on are a different color.

The problem is, that I want to keep the menu in a file so that I can
server side include it, so I don't want to have to change it manually
for each page.

To help explain this, the page looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Contact</title>
<link rel="stylesheet" type="text/css" href="styles/style.css"
media="screen" />
</head>

<body>
<div id="wrap">

<?php include("menu.php"); ?>

<div id="column1">

</div>

<div id="column2">

</div>

</div>
</body>
</html>

Where menu.php looks like this:

<div id="navbar">
<ul id="navlist">
<li><a href="weddings.php">home</a></li>
<li><a href="approach.php">our approach</a></li>
<li><a href="products.php">products &amp; services</a></li>
<li><a href="gallery.php">gallery</a></li>
<li><a href="prices.php">prices</a></li>
<li><a href="booking.php">booking</a></li>
<li><a href="contact.php">contact</a></li>
<li><a href="links.php">links</a></li>
</ul>
</div>

Obviously there is some css formatting here as well.

If we are on contact.php, I want the link to contact.php to be styled
differently so that we know where we are.

Is there any way to do this without getting rid of the server side
include or drastically making the site more complex?

Thanks a lot,

Rich
 
B

Beauregard T. Shagnasty

Rich said:
Sorry about the long title - I have a page with a navbar on. I would
like like to make it so that the links that link to the page the user
is on are a different color.

The problem is, that I want to keep the menu in a file so that I can
server side include it, so I don't want to have to change it manually
for each page.
Click to expand...

Like this: http://countryrode.com/ ?
To help explain this, the page looks like this:
Click to expand...
Obviously there is some css formatting here as well.

If we are on contact.php, I want the link to contact.php to be styled
differently so that we know where we are.

Is there any way to do this without getting rid of the server side
include or drastically making the site more complex?
Click to expand...

I do this by assigning a variable to each page. Place this before
calling the include. Such as:

$imenu = 1; // Number of this page and menu item

Then the menu include file uses:

echo "<div id=\"boxnav\"><!-- Begin menu -->\n";
echo "<ul id='crmenu'>\n";
/* Each menu button */
if ($imenu<>1) { echo "<li><a href='../main/index.php'>Home</a></li>\n";
} else { echo "<li class='mbreak'>Home</li>\n";}

...with subsequent lines in the include for each of the items. Each is
just one long line (not wrapped). The next:

if ($imenu<>2) { echo "<li><a href='../main/shop.php'>In The
Shop</a></li>\n"; } else { echo "<li class='mbreak'>In the
Shop</li>\n";}

...and so forth, and ends with:

echo "</ul>\n";
echo "</div><!-- End menu -->\n";

Class 'mbreak' just shows the word in a different color. Note that the
button is not a clickable link to the same page.

If you have pages that are not on the menu, e.g. called from a link in
the content somewhere, use: $imenu = 0;

There may be easier ways, but this is what I came up with on the spur of
the moment several years ago.
 
N

Neredbojias

Hi,

Sorry about the long title - I have a page with a navbar on. I would
like like to make it so that the links that link to the page the user
is on are a different color.

The problem is, that I want to keep the menu in a file so that I can
server side include it, so I don't want to have to change it manually
for each page.
Click to expand...

I think the way I'd approach it is to id the menu links and style an
exception on each page.
 
R

Rich Bradshaw

Both good ideas, like the CSS exclusion technique, seems simpler, but
depends on whether I can work it out!

Thanks for your help! I'll likely use some combination of both.

Richard
 
R

Rich Bradshaw

Ok, got it working using the CSS method - nice and neat. Just used a

<style type="text/css"><!--
a#home {
color: white !important;
}
--></style>

In the header on the home page, changing home as relevant. Each link
on navbar has id="XXX" in it, where XXX would be home for this page.

Simple.

Thanks very much!
 
B

BootNic

Rich Bradshaw said:
news: (e-mail address removed)
Hi,

Sorry about the long title - I have a page with a navbar on. I would
like like to make it so that the links that link to the page the user
is on are a different color.

The problem is, that I want to keep the menu in a file so that I can
server side include it, so I don't want to have to change it manually
for each page.

To help explain this, the page looks like this: [snip]
Where menu.php looks like this: [snip]

Obviously there is some css formatting here as well.

If we are on contact.php, I want the link to contact.php to be styled
differently so that we know where we are.

Is there any way to do this without getting rid of the server side
include or drastically making the site more complex?
Click to expand...

You appear to be using php, I suggest you go ahead and put it to work.

You will still need a style class for the current link, that will fit nicely
in your current style sheet.

The menu.php could look something like this:

<?php
$PHP_SELF = $_SERVER['PHP_SELF'];;
$navLinks = Array(
'home'=>'/temp/prev12~.php',
'our approach'=>'/approach.php',
'products &amp; services'=>'/products.php',
'gallery'=>'/gallery.php',
'prices'=>'/prices.php',
'booking'=>'/booking.php',
'contact'=>'/contact.php',
'links'=>'links.php'
);
?>
<div id="navbar">
<ul id="navlist">
<?php
foreach ($navLinks as $key => $value) {
$class=($PHP_SELF==$value)?' class="current"':'';
echo chr(9).'<li><a href="'.$value.'"'.$class.'>'.$key.'</a></li>'.chr(10);
}
?>
</ul>
</div>
 
N

Neredbojias

Ok, got it working using the CSS method - nice and neat. Just used a

<style type="text/css"><!--
a#home {
color: white !important;
}
--></style>

In the header on the home page, changing home as relevant. Each link
on navbar has id="XXX" in it, where XXX would be home for this page.

Simple.

Thanks very much!
Click to expand...

After reading Beauregard's and BootNic's advices, I decided mine rather
suck... er, was inelegant. Ergo, I tried something better.

For example:

Your "menu" page to be included could look something like this:

<ul>
<li><? if ($exclude == 'page1') { ?><span
style="background:inherit;color:yellow;">Page 1</span><? } else { ?><a
href="page1.html">Page 1</a><? } ?>
<li><? if ($exclude == 'page2') { ?><span
style="background:inherit;color:yellow;">Page 2</span><? } else { ?><a
href="page2.html">Page 2</a><? } ?>
<li><? if ($exclude == 'page3') { ?><span
style="background:inherit;color:yellow;">Page 3</span><? } else { ?><a
href="page3.html">Page 3</a><? } ?>
<li><? if ($exclude == 'page4') { ?><span
style="background:inherit;color:yellow;">Page 4</span><? } else { ?><a
href="page4.html">Page 4</a><? } ?>
<li><? if ($exclude == 'page5') { ?><span
style="background:inherit;color:yellow;">Page 5</span><? } else { ?><a
href="page5.html">Page 5</a><? } ?>
</ul>

All pages to contain the include ("menu") have a very similar include
link. Here's the example for page 2:

<? include 'http://www.neredbojias.com/zyxix/menu_t5.php?exclude=page2';
?>

Notice the "?exclude=" variable contains the page identifier. Otherwise,
the includes are identical.

Here's a link to a live "page 2" example incorporating the above
techniques:

http://www.neredbojias.com/zyxix/page2_t5.php

Two things I like about this are that the search/query string only has to
be on the include link, not the page link, and the styling change is
incorporated in the menu, not each page. The code could be changed a bit
if you're worried about global variables, etc.
 
A

Adrienne Boswell

Gazing into my crystal ball I observed Rich Bradshaw
Hi,

Sorry about the long title - I have a page with a navbar on. I would
like like to make it so that the links that link to the page the user
is on are a different color.

The problem is, that I want to keep the menu in a file so that I can
server side include it, so I don't want to have to change it manually
for each page.
Click to expand...

This is what I do, and it works very well. At the top of each page:

$thispage = "The title of the page, for title and first level heading";
$thisurl = "theactualurl.php";

Then as I loop through the menu, if the url of the menu item is the same
as $thisurl, then it gets a class of current page, and is styled
accordingly.

The reason that I assign it a class is that I might have a menu on the
bottom of the page as well, and as it might use a different div id, the
class can be used again, and could, or could not be styled diffently, eg;

ul#menu.current {border:1px solid #000;}
ul#footer.current {border:1px dotted #000;}
 
A

Andy Dingley

Sorry about the long title -
Click to expand...

It did rather confuse me. I thought you'd be talking about links with
only fragment identifiers (i.e. same page) rather than a navigation
menu and a notion of "current selection" on the menu (which doesn't
even need to always be to the same page)
I have a page with a navbar on. I would
like like to make it so that the links that link to the page the user
is on are a different color.
Click to expand...

<li class="current" >...</li>

Simple, works beautifully.
The problem is, that I want to keep the menu in a file so that I can
server side include it, so I don't want to have to change it manually
for each page.
Click to expand...

Not so easy, but still a well-known problem

<body class="page-foo" >
....
<!-- SSI begins here -->
...
<li class="nav-foo" >...</li>
<li class="nav-bar" >...</li>
<li class="nav-bat" >...</li>
...
<!-- SSI ends here -->
....

And in the CSS,

li.current,
..page-foo .nav-foo,
..page-bar .nav-bar,
..page-bat .nav-bat
{ background-color: red; }

Obviously you tweak the parent element of each page differently, but
that's easy
 
R

rf

Neredbojias said:
After reading Beauregard's and BootNic's advices, I decided mine rather
suck... er, was inelegant. Ergo, I tried something better.

For example:

Your "menu" page to be included could look something like this:

<ul>
<li><? if ($exclude == 'page1') { ?><span
style="background:inherit;color:yellow;">Page 1</span><? } else { ?><a
href="page1.html">Page 1</a><? } ?>
Click to expand...

<searches archives for things I used to do>

$page =
array_shift(explode('.',array_pop(explode('/',$_SERVER['PHP_SELF']))));



echo "<ul>\r\n";
echo ($page == "page1") ? "<li><span>Page 1</span></li>\r\n" : "<li><a
href='page1.php'>Page 1</a></li>\r\n";
echo ($page == "page2") ? "<li><span>Page 2</span></li>\r\n" : "<li><a
href='page2.php'>page 2</a></li>\r\n";
echo "</ul>\r\n";

Watch the wrap.

Style the <span>s and the <a>s to taste.

Next stage is to wrap it up in a nice pretty function.



--
Richard (nine hours behind)
 
D

dorayme

It's getting worse, Telstra punishing you for your impudence in
complaining to them about the former 6 hour delay?
 
N

Neredbojias

After reading Beauregard's and BootNic's advices, I decided mine
rather suck... er, was inelegant. Ergo, I tried something better.

For example:

Your "menu" page to be included could look something like this:

<ul>
<li><? if ($exclude == 'page1') { ?><span
style="background:inherit;color:yellow;">Page 1</span><? } else {
?><a href="page1.html">Page 1</a><? } ?>
Click to expand...

<searches archives for things I used to do>

$page =
array_shift(explode('.',array_pop(explode('/',$_SERVER['PHP_SELF']))));
Click to expand...

Uh, who do you think I am, -Einstein?
I'd take it kindly if you'd please explain the above in detail so my
headache would go away and I could get back to watching those reruns of
"The Three Stooges" I enjoy so much...
echo "<ul>\r\n";
echo ($page == "page1") ? "<li><span>Page 1</span></li>\r\n" :
"<li><a href='page1.php'>Page 1</a></li>\r\n";
echo ($page == "page2") ? "<li><span>Page 2</span></li>\r\n" :
"<li><a href='page2.php'>page 2</a></li>\r\n";
echo "</ul>\r\n";
Click to expand...

This part I get: ternary (sp?) conditionals, not much different than my
example.
Watch the wrap.

Style the <span>s and the <a>s to taste.

Next stage is to wrap it up in a nice pretty function.
Click to expand...

Sure. I can't wait to have at it...
 
B

BootNic

Neredbojias said:
[email protected]
$page =
array_shift(explode('.',array_pop(explode('/',$_SERVER['PHP_SELF']))));
Click to expand...

Uh, who do you think I am, -Einstein?
I'd take it kindly if you'd please explain the above in detail so my
headache would go away and I could get back to watching those reruns
of "The Three Stooges" I enjoy so much...
Click to expand...
[snip]

Work the statement from right to left.

Server variables: $_SERVER['PHP_SELF']
The filename of the currently executing script, relative to the document
root. For instance, $_SERVER['PHP_SELF'] in a script at the address
http://example.com/test.php/foo.bar would be /test.php/foo.bar.

explode('/',$_SERVER['PHP_SELF'])
explode Split a string by string returns an array of strings
returns array('temp','mydri','index.php')

array_pop(explode('/',$_SERVER['PHP_SELF']))
array_pop() pops and returns the last value of the array...
returns 'index.php'

explode('.',array_pop(explode('/',$_SERVER['PHP_SELF'])))
explode Split a string by string returns an array of strings
returns array('index','php')

array_shift(explode('.',array_pop(explode('/',$_SERVER['PHP_SELF']))))
array_shift() shifts the first value of the array off and returns it...
returns 'index'

--
BootNic Thursday, June 21, 2007 11:58 PM

Our earth is degenerate in these latter days; bribery and corruption
are common; children no longer obey their parents; and the end of the
world is evidently approaching.
*Assyrian clay tablet 2800 B.C.*
 
R

rf

Neredbojias said:
$page =
array_shift(explode('.',array_pop(explode('/',$_SERVER['PHP_SELF']))));
Click to expand...

Uh, who do you think I am, -Einstein?\
I'd take it kindly if you'd please explain the above in detail so my
headache would go away and I could get back to watching those reruns of
"The Three Stooges" I enjoy so much...
Click to expand...

Er, N, it's all in the RTFM.

Start from the inside out...

$_SERVER['PHP_SELF'] contains the path of the current file, from the web
root IIRC, something like
/folder/folder/file.ext

_explode_ this into an array, delimited by /

folder,
folder,
file.ext

_array-pop_ the *last* element in the array

file.ext

explode this on .

file,
ext

_array_shift_ the *first* entry out of this array

file

On looking at the above (written the odd several years ago) I admit the
whole thing should now be shortened into a preg_match() or two. May do that
some day. Then again I now my create menus directly from the database and
the routines that access that database know *exactly* what "page" they are
in and they know *precicely* how to write the HTML that will, in due couse,
be selected by the appropriate CSS rules.
This part I get: ternary (sp?) conditionals, not much different than my
example.
Click to expand...

True. Just a different programmers coding expression of the "algorithm".
Sure. I can't wait to have at it...
Click to expand...

echo "<ul>\r\n";
menuitem('page1','Page 1');
menuitem('page2','Page 2');
echo "</ul>\r\n";

The expression of function menuitem($page,$text) is up to you :)
 
N

Neredbojias

Uh, who do you think I am, -Einstein?
I'd take it kindly if you'd please explain the above in detail so my
headache would go away and I could get back to watching those reruns
of "The Three Stooges" I enjoy so much...
Click to expand...
[snip]

Work the statement from right to left.

Server variables: $_SERVER['PHP_SELF']
The filename of the currently executing script, relative to the
document root. For instance, $_SERVER['PHP_SELF'] in a script at the
address http://example.com/test.php/foo.bar would be
/test.php/foo.bar.

explode('/',$_SERVER['PHP_SELF'])
explode Split a string by string returns an array of strings
returns array('temp','mydri','index.php')

array_pop(explode('/',$_SERVER['PHP_SELF']))
array_pop() pops and returns the last value of the array...
returns 'index.php'

explode('.',array_pop(explode('/',$_SERVER['PHP_SELF'])))
explode Split a string by string returns an array of strings
returns array('index','php')

array_shift(explode('.',array_pop(explode('/',$_SERVER['PHP_SELF']))))
array_shift() shifts the first value of the array off and returns
it...
returns 'index'
Click to expand...

Okay, thanks, I pretty much get it now. The prob is I'm just not that
familiar with php in depth. Sure, it's great, but I only use it when I
convince myself I absolutely have to because it does produce a delay in
rendering a page. While this delay is quite small, typically about a
second or less, and is not particularly bothersome per se, the glaring
white blank background displayed by most browsers during the wait is.
Mozilla seems to be the only one of the major offerings that doesn't
suffer from this anomoly.
 
N

Neredbojias

$page =
array_shift(explode('.',array_pop(explode('/',$_SERVER['PHP_SELF'])))
);
Click to expand...

Uh, who do you think I am, -Einstein?\
I'd take it kindly if you'd please explain the above in detail so my
headache would go away and I could get back to watching those reruns
of "The Three Stooges" I enjoy so much...
Click to expand...

Er, N, it's all in the RTFM.

Start from the inside out...

$_SERVER['PHP_SELF'] contains the path of the current file, from the
web root IIRC, something like
/folder/folder/file.ext

_explode_ this into an array, delimited by /

folder,
folder,
file.ext

_array-pop_ the *last* element in the array

file.ext

explode this on .

file,
ext

_array_shift_ the *first* entry out of this array

file
Click to expand...

I think my troubles were that I just couldn't intuitively get a handle on
$_SERVER['PHP_SELF'] because the FM didn't give any usage examples (which
I could find), and I'd never even heard of "explode" before. Your
explanation clarifies it beautifully although excessive nesting still
makes me a little bird-brained. 'Tis, indeed, a clever sequence of
functions to derive the active client page filename.
On looking at the above (written the odd several years ago) I admit
the whole thing should now be shortened into a preg_match() or two.
Click to expand...

I've used that in the past for browser-sniffing. Worked fine if one was
careful enough in setting the _whole_ thing up.
(snip)
echo "<ul>\r\n";
menuitem('page1','Page 1');
menuitem('page2','Page 2');
echo "</ul>\r\n";

The expression of function menuitem($page,$text) is up to you :)
Click to expand...

I notice you use \r\n where I typically use just \n (which seems to
suffice.) Do you think it makes any difference?

Thanks for the fine explanation.
 
B

Beauregard T. Shagnasty

Neredbojias said:
Okay, thanks, I pretty much get it now. The prob is I'm just not that
familiar with php in depth. Sure, it's great, but I only use it when
I convince myself I absolutely have to because it does produce a
delay in rendering a page. While this delay is quite small,
typically about a second or less, and is not particularly bothersome
per se, the glaring white blank background displayed by most browsers
during the wait is.
Click to expand...

You must be doing something wrong. said:
Mozilla seems to be the only one of the major offerings that doesn't
suffer from this anomoly.
Click to expand...

Most of my pages are done with PHP, and I do not experience what you
describe, with any browser.
 
R

rf

Neredbojias said:
I notice you use \r\n where I typically use just \n (which seems to
suffice.) Do you think it makes any difference?
Click to expand...

Hang over from my real job, spitting out C++/C# code where the \r is usually
mandatory. Try sending just a \n to a printer. True, who sends stuff to a
real printer these days, but I did thirty years ago when I started to really
learn how to program :) IBM systems back then of course with really small
numbers like system/370 model 135 (about as powerfull as a 80368).

Also many MS utilities (read: notpad which what you get from a view->source
in IE) require the \r.

It doesn't hurt the *nix systems.
 
N

Neredbojias

You must be doing something wrong. <g>
Click to expand...

If you were ever a woman in a past life, we might have been married.
Most of my pages are done with PHP, and I do not experience what you
describe, with any browser.
Click to expand...

Okay, I checked Opera and found to my amazement that I didn't have the
default bg set (-or rather, it was set to white.) 'Could've swore I set
that, but it was several updates ago so the Opera company is probably the
one at fault...

That leaves ie6, which will be ie6. (Have ie7 on another box; will check
it later.)

There's still a delay, but with a dark bg, it's not too bad.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Align separate li to right 2
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
Only one table shows up with the information 2
I need help fixing my website 2
Index.php with bootstrap implementation and extern sites inclusion 0
Need help with code on website (noob) 2
Align img inside nav tabs section 5

Members online

No members online now.
Total: 40 (members: 0, guests: 40)
Robots: 400

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,812
Latest member
GracielaWa

Latest Threads

Top