Methods of marking a menu with the current page.

[Andy Dingley]

What does ID do that CLASS doesn't?

JavaScript

 

[Jonathan N. Little]

JavaScript

http://www.example.com/somepage.html#someID

 

[Jeff]

Adrienne Boswell wrote:

The example below shows use of id. Upon submission, the script looks
for empty fields, and dynamically creates the CSS based on the name of
the field, in this case firstname. IMHO implementing this with class
would be a lot more difficult.

There's no need for either. The elements all appear in the form fields
collection and you can iterate through the collection and set styles
with just the form field reference. With that reference you can also
find the label.

Usually when you mark fields, you have to unmark fields which the OP
has now "fixed". So you are iterating through collections regardless..

Jeff

 

[Jeff]

Jeff, as you are a pretty regular poster here now, would you
consider not quoting the whole of a post to say things like
nicely done? No need to leave in the whole lot of code supplied
by Jonathan. I hope you are not offended by this being said.

Seems like we are getting a lot of specialized rules here.

I don't see any complaints on unattributed snipping which often
changes the meaning of a post to seem like something the OP never intended.

In my case, I wanted to leave the code intact, these posts are
archived and they lose meaning without some context.

Jeff

 

[Bergamot]

I'd say "id" has a definite place
in the scheme of things.

Sure it does, but a lot of people use id without even considering
whether they actually need to or not.

The higher specificity of id over class selectors has caused me grief in
the past, so I don't use id at all any more unless I've got a real
reason to. If I do happen to need an id for something, I still usually
assign a class selector and use that in the stylesheet instead of id.

 

[dorayme]

What do you mean by "current?" I don't get that.

Ah, well, that partly explains why you were unable to get my
meaning in the rest. I was hoping the reference to current would
be clear without further explanation because this is what the
thread subject was about. I should perhaps have explained it
more. Here it is then:

There is a practice of making a menu item, to take an example,
look different when a user is on the particular page to which the
menu item is a link to. When the visitor lands on that page, it
is thought helpful for that item to look and even behave
differently (in fact, it no longer needs to be a link just as one
no longer needs to say to the cabbie to take you to such and such
when you are already there <g>).

Let us forget about automation and php for the moment. Think
simple and hand coding. You can achieve your aims by identifying
the "About us" link on the About us page with <li
id="current">...</li>. And you can then put in one simple style
for this id in the css sheet, e.g. color: red; background:
yellow, whereas all other items are blue on white.

Now we get to the question as to whether to id the current or
class it.

Yeah, but I still don't get the benefit of using a non-re-usable
selector when the re-usable selector does the same thing. That's what
I'm asking about.


How is it lost? I can search for - id="foo" as easily as I can search
for - class="foo", right? What is "lost" in the composition or
rendering of a page?

There are two perspectives and we must distinguish them. There
are things we do to make the website good and useful to visitors.
And there are things we do to make them manageable to our
webmastering selves. I am talking about the latter. It makes
little difference in the former unless you make a mistake in your
management.

If it is just me making and managing a site, I only use one
current per page. I don't have the practice of highlighting the
nav menu item on the left, and in the footer and maybe elsewhere.
I don't want to get that complicated. i want to bve sure that
there is one and only one style and one item that gets it on the
page. id does it for me. When I validate, I get to pick up any
divergenge from this (eg. 2 same ids on a page).

You want to know, why don't I use class because it "does the same
thing". The short answer is that it does not. It will serve the
visitor fine. But it will serve me worse because when I come to
my css and html months down the track, the id tells me something
that a class cannot tell me, it is a reminder to me that I have
one item only per page that is does something. "O yeah!" I say.

And generally, if it is not for the reason rf mentioned (to be a
handle for some scripting that needs ids), this applies to other
things too, not just "current" items. For example, I use id for
big sections like banner, main nav, wrapper, footer. It is
information for me. It reminds me, it sets the scene for me and
when I validate I am assured they are unique.

I have in the past used class too and have thought about your
question and used to conclude that id was silly until it meant
something for me to use id. I then discovered that it did mean
something for me.

I just don't get the functional difference. Nor the practical difference.

Perhaps you get it a little bit more now? Using id is information
for the webmaster, it tells him or her that there is soethigng
unique going on and that is helpful in some situations. It is not
relevant that some people would like current not to be so unique
(eg. Adrienne's fine point), I am talking about where it is so
wanted.

 

[BootNic]

[snip]

simple include menu php called "menu.php":

<?php
// Make a generic array for menu
$menu=array();
// And fill it with your sites page info
$menu[]=array('href' => '/', 'text' => 'Home');
$menu[]=array('href'=>'/law.php', 'text'=>'The Law');
$menu[]=array('href'=>'/diy.php', 'text'=>'How to DIY');
$menu[]=array('href'=>'/hire.php', 'text'=>'Hire Me');
$menu[]=array('href'=>'/links.php', 'text'=>'Links');
$menu[]=array('href'=>'/contact.php', 'text'=>'Contact');

//Get the index of the page we are on
$onIdx=pageIndex($menu);

// build the menu start UL
$buf='<ul class="menu">';

// iterate array to build menu
for($i=0, $ii=count($menu); $i<$ii; $i++){
$buf.='<li>'; // start LI
if($i==$onIdx){ //Non-link on this page
$buf.='<span>' . $menu[$i]['text'] . '</span>';
}
else { // build link
$buf.='<a href="' . $menu[$i]['href'] . '">';
$buf.=$menu[$i]['text'] . '</a>';
}
$buf.='</li>'; // close LI
}
$buf.='</ul>'; // close UL
echo $buf; // write menu

//function to determine what page you are on and return array index#
function pageIndex($menu){
$idx=0;
$here=parse_url($_SERVER['REQUEST_URI']);
for($i=0, $ii=count($menu); $i<$ii; $i++){
if($here['path']==$menu[$i]['href']){
$idx=$i;
break;
}
}
return $idx;
}
?>

Alternative menu.php example

<ul class="menu">
<?php
#menu array
$menu = array('/index.php' => 'Home',
'/law.php' => 'The Law',
'/diy.php' => 'How to DIY',
'/hire.php' => 'Hire Me',
'/links.php' => 'Links',
'/contact.php' => 'Contact');
#current page
$location = $_SERVER["SCRIPT_NAME"];
#build menu items
foreach ($menu as $key => $value)
{
echo " <li>\n";
#if current page write span
if ($key === $location)
{
echo " <span>$value</span>\n";
}
#else write a
else
{
echo " <a href=\"$key\">$value</a>\n";
}
echo " </li>\n";
}
?>
</ul>

[snip style]

 

[Jonathan N. Little]

<?php
#menu array
$menu = array('/index.php' => 'Home',
'/law.php' => 'The Law',
'/diy.php' => 'How to DIY',
'/hire.php' => 'Hire Me',
'/links.php' => 'Links',
'/contact.php' => 'Contact');
#current page

Yep, much simpler...

$location = $_SERVER["SCRIPT_NAME"];

And for OP and is simple case, yes this is simpler. Just sometimes
URL != $_SERVER["SCRIPT_NAME"]...I have some sites where they don't.

 

[dorayme]

<ul class="menu">
<?php
#menu array
$menu = array('/index.php' => 'Home',
'/law.php' => 'The Law',

....

I have filed as "bootnicCurrent.php" and it will be tested and
probably used. Thanks for providing. As I also did with JL's as
jonathan.php.

Thanks to you both.

 

[Neredbojias]

Adrienne Boswell wrote:


There's no need for either. The elements all appear in the form fields
collection and you can iterate through the collection and set styles
with just the form field reference. With that reference you can also
find the label.

Usually when you mark fields, you have to unmark fields which the OP
has now "fixed". So you are iterating through collections regardless..

Jeff

You've submitted a good example (...get it, "submitted"?), and dorayme
explained the point pretty well to Ed Mullen in this same thread. 'Id'
has its place and shouldn't just be categorically substituted with
'class' for mere convienence sake methinks.

 

[Neredbojias]

Sure it does, but a lot of people use id without even considering
whether they actually need to or not.

True, I've seen it over- or inappropriately- used.

The higher specificity of id over class selectors has caused me grief in
the past, so I don't use id at all any more unless I've got a real
reason to. If I do happen to need an id for something, I still usually
assign a class selector and use that in the stylesheet instead of id.

I like the specificity priorities as they exist and use them sometimes to
advantage. And generally, although this is personal preference, I'll
employ an 'id' rather than 'class', all things being equal. Yeah, on a few
instances I've had to change an 'id' to a 'class' because I wanted to apply
the attributes to another element, but in my methodology I prefer this to
wholesale 'classing' as it seems to help me retain a better concept of the
markup when the page becomes old. If you are more comfortable with the way
you've expressed, I'm sure there's nothing wrong with it but it doesn't
really provide support for a generally preferred procedure, either.

 

[John Hosking]

Seems like we are getting a lot of specialized rules here.

Specialized? It's Usenet. That's how people communicate in these
technical groups (I don't know how it is in ny.politics or
alt.britney.is.pregnant.again ;-) ) Haven't you noticed?

I don't see any complaints on unattributed snipping which often changes
the meaning of a post to seem like something the OP never intended.
Um.


In my case, I wanted to leave the code intact, these posts are
archived and they lose meaning without some context.

Well, yes, the posts are archived, presumably including the one with all
the code. But *your* post didn't have anything specific to say about the
code (otherwise your text would have come after it), so you don't need
to quote it again.

I understand your logic but disagree with the conclusion.

Usually your non-snipped trailing quotes could be better left out.
Sometimes you leave only the signoff of the previous poster, something
we never need you to quote.

Count me as one who would rejoice at seeing you use a more conventional,
um, convention of quoting and trimming.

 

[Adrienne Boswell]

Usually when you mark fields, you have to unmark fields which the OP
has now "fixed". So you are iterating through collections regardless..

Jeff

This example only occurs when the user has a field missing. If there
are no fields missing, then the script continues. Of course, when the
form is originally loaded, nothing is missing, so those styles do not
apply.

 

[Mike Barnard]

Hi.

Following on from my last thread about coding, I find myself asking
what is the best way to do the 'current page' thing on a menu so I can
include it with PHP. Once I've learned about PHP. In my
early-stage-of-design site I am naming the page body with an 'id',
then changing the id of a menu item so that CSS changes the look of
it.

I think. (I'll go back and have a look in a minute).

www.thermachek.com/temp/

Anyway, if I go the PHP route what I'll need is a menu that can be cut
and pastedand included and *not* need tweaking (by changing the menu
item that is 'current') for each page. Can anyone point me to the URL
of a tutorial for such a menu system or give me the name of such so I
can look it up please?

Ta muchly in advance.

hI AGAIN.

tHIS IS REPETITIVE, BUT THANKS TO YOU ALL.

OOPS!

Thats better.

Jeff's script seems to be the dogs swallocks judging by the replies,
but it'll be a little while before its included because I have to
start learning what all those little symbols mean! I've played with
Delphi (object pascal) many years ago but I bet the syntax will be
VERY different.

Oh well, here I go again. Off to the book shop.

 

[Mike Barnard]

Jeff's script seems to be the dogs swallocks judging by the replies,

DOH! JONATHANS script.... sorry.

 

[Jonathan N. Little]

"dogs swallocks"?

DOH! JONATHANS script.... sorry.

If you sites is straight forward and the URL will always match the
script name (i.e., not created pages from a dB) then BootNic's version
is your ticket.

 

[Ben C]

"dogs swallocks"?

I read it as a euphemism for "the dog's bollocks".

Non-native speakers can sometimes find this phrase confusing. To call
something either a dog or bollocks is to say that it's held in generally
low esteem. But "the dog's bollocks" means the opposite: brilliant,
outstanding, the state of the art.

 

[BootNic]

<?php
#menu array
$menu = array('/index.php' => 'Home', '/law.php' => 'The Law',
'/diy.php' => 'How to DIY', '/hire.php' => 'Hire Me', '/links.php'
=> 'Links', '/contact.php' => 'Contact'); #current page

Yep, much simpler...

$location = $_SERVER["SCRIPT_NAME"];

And for OP and is simple case, yes this is simpler. Just sometimes
URL != $_SERVER["SCRIPT_NAME"]...I have some sites where they don't.

$location can be

$location = parse_url($_SERVER['REQUEST_URI']);

Modify the if statement to:

if ($key === $location['path'])

Unless the menu contains url's with a query string, in which case one
may want to match that as well.

$location = htmlentities($_SERVER['REQUEST_URI']);

if ($key === $location)

--
BootNic Thursday March 13, 2008 1:52 PM
"My God! The thought of that evil man, loose in London--with money,
from God only knows what source--fomenting riot and rebellion during
a public emergency--and in control of an Engine-driven press! It's
nightmarish!"
*Gibson-Sterling*

 

[Mike Barnard]

I read it as a euphemism for "the dog's bollocks".

Non-native speakers can sometimes find this phrase confusing. To call
something either a dog or bollocks is to say that it's held in generally
low esteem. But "the dog's bollocks" means the opposite: brilliant,
outstanding, the state of the art.

Big grin. The 'net is great.

Sometimes I forget that a lot of you are from far distant shores
compared to me and we don't speak EXACTLY the same English. Ben is
right, "The dogs bollocks" refers to the fact that dogs generally find
them so attractive they can't leave them alone, so they must therefore
be very good indeed!

Not everyone swears, so the euphamism dogs swallocks does the same
thing, cunjoring up the same gross images, but doesn't actually swear.

Off topic or what?

 

[Mike Barnard]

"dogs swallocks"?


If you sites is straight forward and the URL will always match the
script name (i.e., not created pages from a dB) then BootNic's version
is your ticket.

And is easier to try to understand as a beginner. Thanks.