Methods of marking a menu with the current page.

Discussion in 'HTML' started by Mike Barnard, Mar 11, 2008.

  1. Mike Barnard

    Mike Barnard Guest

    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.
     
    Mike Barnard, Mar 11, 2008
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed Mike Barnard
    <> writing in
    news::

    > 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.
    >
    >


    Here a little function I use for that. In this example, if you view
    source, you would see that index.php would have the thispage class.
    The function compares the $link and $thisurl variables and if they
    match, then it inserts class in the a element, otherwise it does not.

    <?php
    //top of page
    $thispage = "Welcome to My Website";
    $thisurl = "index.php";
    ?>


    <ul>
    <li><?php nav("Home","index.php",$thisurl)?></li>
    <li><?php nav("Contact","contact.php",$thisurl)?></li>
    </ul>

    <?php
    function nav($link,$page,$thisurl)
    {

    if($thisurl == $link)
    {echo "<a href=\"".$link."\" class=\"thispage\">".$page."</a>";}
    else
    {echo "<a href=\"".$link."\">".$page."</a>";}

    }
    ?>

    You could also put the page titles/urls into an array and loop through
    it.

    The $thispage and $thisurl variables can also be used elsewhere, for
    example, the title element, eg: <title><?php echo $thispage ?></title>

    I have a file called masterfunctions.php that has the nav function and
    others. I put the doctype and most of the head elements in an include I
    call linkrel.php (which includes that masterfunctions.php file and also
    a connection to the db).

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Mar 11, 2008
    #2
    1. Advertising

  3. Gazing into my crystal ball I observed Adrienne Boswell <>
    writing in news:Xns9A5E4C3D466Darbpenyahoocom@69.28.186.121:

    > I have a file called masterfunctions.php that has the nav function and
    > others. I put the doctype and most of the head elements in an include I
    > call linkrel.php (which includes that masterfunctions.php file and also
    > a connection to the db).
    >


    Very important. If you are using a database, make sure you close/destroy
    the connection to the db at the end of the page. I put this in an include
    file I call footer_inc.php that has copyright info, etc.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Mar 11, 2008
    #3
  4. Mike Barnard

    Andy Dingley Guest

    On 11 Mar, 10:51, Mike Barnard <>
    wrote:

    > I find myself asking what is the best way to do the 'current page' thing on a menu


    There are two popular ways of doing this, both commonly discussed.
    These might be a start:
    <http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
    <http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>

    * Use class not id. This tends to make CSS life simpler.

    * You can do this by putting class="current" _differently_ onto each
    page (can't be done with static boilerplate) or by identifying each
    page / menu item and tyoing them together through CSS selectors
    (requires you to update the CSS as well when you change the menu
    boilerplate).


    > I can include it with PHP.


    PHP is overkill for this (but usable). A database is so far too much
    it's harmful.

    Assuming a "simple" site (i.e. single level menu that varies over
    time) then you don't need a database. Instead use SSI (Google it) and
    simple boilerplate inclusion of HTML fragments into your pages. PHP
    has a similar include mechanism. If you're already using PHP, you
    might find that just as simple to use. You don't _need_ PHP though.

    Don't even think about any "dynamic" PHP option or database option
    until you've both built it the simple static way, and also you have
    enough pages that you can no longer use a simple one-level menu.
     
    Andy Dingley, Mar 11, 2008
    #4
  5. Mike Barnard

    dorayme Guest

    In article
    <
    m>,
    Andy Dingley <> wrote:

    > On 11 Mar, 10:51, Mike Barnard <>
    > wrote:
    >
    > > I find myself asking what is the best way to do the 'current page' thing on
    > > a menu

    >
    > There are two popular ways of doing this, both commonly discussed.
    > These might be a start:
    > <http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
    > <http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>
    >
    > * Use class not id. This tends to make CSS life simpler.


    Why is class for a unique current per page simpler?

    --
    dorayme
     
    dorayme, Mar 11, 2008
    #5
  6. Mike Barnard wrote:
    > 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.
    >



    Well with a simple site like yours with 1/2 dozen on so pages you could
    easily do it with an array and simple stylesheet. With the php when the
    "page"=="the menu link" don't make it a link and have that as your "on
    Page indicator"

    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;
    }
    ?>

    Style sheet for menu:

    ul.menu {
    list-style: none; font-family: sans-serif;
    margin: 0; padding: 0; width: 10em;
    }

    /* Make A & SPANS block to fill space */
    ul.menu li a,
    ul.menu li span {
    display: block; padding: .25em; border: 1px solid #666;
    }

    /* Your on page indicator the SPAN */
    ul.menu li span {
    color: #fff; background-color: #a00;
    }

    /* live links in menu */
    ul.menu li a {
    color: #000; background-color: #79cafd; text-decoration: none;
    }

    ul.menu li a:hover,
    ul.menu li a:focus {
    background-color: #6297c8;
    }


    Then in your page where you want to inset your menu...

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

    That's all folk...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 11, 2008
    #6
  7. Mike Barnard

    Jeff Guest

    Jonathan N. Little wrote:
    > Mike Barnard wrote:
    >> 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.
    >>

    >
    >
    > Well with a simple site like yours with 1/2 dozen on so pages you could
    > easily do it with an array and simple stylesheet. With the php when the
    > "page"=="the menu link" don't make it a link and have that as your "on
    > Page indicator"
    >
    > simple include menu php called "menu.php":


    Nicely done, Jonathan!

    Jeff
    >
    > <?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;
    > }
    > ?>
    >
    > Style sheet for menu:
    >
    > ul.menu {
    > list-style: none; font-family: sans-serif;
    > margin: 0; padding: 0; width: 10em;
    > }
    >
    > /* Make A & SPANS block to fill space */
    > ul.menu li a,
    > ul.menu li span {
    > display: block; padding: .25em; border: 1px solid #666;
    > }
    >
    > /* Your on page indicator the SPAN */
    > ul.menu li span {
    > color: #fff; background-color: #a00;
    > }
    >
    > /* live links in menu */
    > ul.menu li a {
    > color: #000; background-color: #79cafd; text-decoration: none;
    > }
    >
    > ul.menu li a:hover,
    > ul.menu li a:focus {
    > background-color: #6297c8;
    > }
    >
    >
    > Then in your page where you want to inset your menu...
    >
    > <?php include('menu.php'); ?>
    >
    > That's all folk...
    >
     
    Jeff, Mar 11, 2008
    #7
  8. Mike Barnard

    dorayme Guest

    In article <>,
    Jeff <jeff@spam_me_not.com> wrote:

    > Nicely done, Jonathan!
    >
    > 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.

    --
    dorayme
     
    dorayme, Mar 11, 2008
    #8
  9. Mike Barnard

    Jeff Guest

    Jeff wrote:
    > Jonathan N. Little wrote:
    >> Mike Barnard wrote:
    >>> 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.
    >>>

    >>
    >>
    >> Well with a simple site like yours with 1/2 dozen on so pages you
    >> could easily do it with an array and simple stylesheet. With the php
    >> when the "page"=="the menu link" don't make it a link and have that as
    >> your "on Page indicator"
    >>
    >> simple include menu php called "menu.php":

    >
    > Nicely done, Jonathan!



    I'd like to add just one little idea for the OP to consider.

    Typically a site will have more than one section, as I believe the OP
    referred to. You can add section info to the array. Then you can build
    different menus depending on what section you are in (with some script
    mods of course). That way you have just one "include" for all your sub
    navs instead of several. In effect what you have is a little database
    table made out of hashes. You can even move the $menu part to a separate
    file and maintain just that. If you do that you have a menu routine you
    can reuse in other sites "as is" as the data is separate.

    Jeff
    >
    > Jeff
    >>
    >> <?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;
    >> }
    >> ?>
    >>
    >> Style sheet for menu:
    >>
    >> ul.menu {
    >> list-style: none; font-family: sans-serif;
    >> margin: 0; padding: 0; width: 10em;
    >> }
    >>
    >> /* Make A & SPANS block to fill space */
    >> ul.menu li a,
    >> ul.menu li span {
    >> display: block; padding: .25em; border: 1px solid #666;
    >> }
    >>
    >> /* Your on page indicator the SPAN */
    >> ul.menu li span {
    >> color: #fff; background-color: #a00;
    >> }
    >>
    >> /* live links in menu */
    >> ul.menu li a {
    >> color: #000; background-color: #79cafd; text-decoration: none;
    >> }
    >>
    >> ul.menu li a:hover,
    >> ul.menu li a:focus {
    >> background-color: #6297c8;
    >> }
    >>
    >>
    >> Then in your page where you want to inset your menu...
    >>
    >> <?php include('menu.php'); ?>
    >>
    >> That's all folk...
    >>
     
    Jeff, Mar 11, 2008
    #9
  10. Gazing into my crystal ball I observed dorayme
    <> writing in
    news::

    > In article
    ><
    > m>,
    > Andy Dingley <> wrote:
    >
    >> On 11 Mar, 10:51, Mike Barnard <>
    >> wrote:
    >>
    >> > I find myself asking what is the best way to do the 'current page'
    >> > thing on a menu

    >>
    >> There are two popular ways of doing this, both commonly discussed.
    >> These might be a start:
    >> <http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
    >> <http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>
    >>
    >> * Use class not id. This tends to make CSS life simpler.

    >
    > Why is class for a unique current per page simpler?
    >


    Because you might want to reuse it. For example, say you have
    navigation in two places on the same page, maybe Contact in navigation
    and Contact in the footer, and you are on the contact page. So maybe
    #nav .thispage would be styled differently than #footer .thispage.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Mar 12, 2008
    #10
  11. Mike Barnard

    dorayme Guest

    In article <Xns9A5EC27C2BEarbpenyahoocom@69.28.186.121>,
    Adrienne Boswell <> wrote:

    > <> writing in
    > news::
    >
    > > Andy Dingley <> wrote:


    > >> There are two popular ways of doing this, both commonly discussed.
    > >> These might be a start:
    > >> <http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
    > >> <http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>
    > >>
    > >> * Use class not id. This tends to make CSS life simpler.

    > >
    > > Why is class for a unique current per page simpler?
    > >

    >
    > Because you might want to reuse it. For example, say you have
    > navigation in two places on the same page, maybe Contact in navigation
    > and Contact in the footer, and you are on the contact page. So maybe
    > #nav .thispage would be styled differently than #footer .thispage.


    Good point, Adrienne.

    --
    dorayme
     
    dorayme, Mar 12, 2008
    #11
  12. Mike Barnard

    Ed Mullen Guest

    dorayme wrote:
    > In article <Xns9A5EC27C2BEarbpenyahoocom@69.28.186.121>,
    > Adrienne Boswell <> wrote:
    >
    >> <> writing in
    >> news::
    >>
    >>> Andy Dingley <> wrote:

    >
    >>>> There are two popular ways of doing this, both commonly discussed.
    >>>> These might be a start:
    >>>> <http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
    >>>> <http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>
    >>>>
    >>>> * Use class not id. This tends to make CSS life simpler.
    >>> Why is class for a unique current per page simpler?
    >>>

    >> Because you might want to reuse it. For example, say you have
    >> navigation in two places on the same page, maybe Contact in navigation
    >> and Contact in the footer, and you are on the contact page. So maybe
    >> #nav .thispage would be styled differently than #footer .thispage.

    >
    > Good point, Adrienne.
    >


    So, the next obvious question is:

    Why use ID at all? When is it advantageous to use a non-reusable
    selector vs a re-usable one? What does ID do that CLASS doesn't?

    --
    Ed Mullen
    http://edmullen.net
    Why is it that the guy who comes up behind you while you're waiting for
    an elevator presses the already lit button as though he has some magical
    powers that you don't?
     
    Ed Mullen, Mar 12, 2008
    #12
  13. Mike Barnard

    dorayme Guest

    In article <>,
    Ed Mullen <> wrote:

    > dorayme wrote:
    > > In article <Xns9A5EC27C2BEarbpenyahoocom@69.28.186.121>,
    > > Adrienne Boswell <> wrote:
    > >
    > >> <> writing in
    > >> news::
    > >>
    > >>> Andy Dingley <> wrote:

    > >
    > >>>> There are two popular ways of doing this, both commonly discussed.
    > >>>> These might be a start:
    > >>>> <http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
    > >>>> <http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>
    > >>>>
    > >>>> * Use class not id. This tends to make CSS life simpler.
    > >>> Why is class for a unique current per page simpler?
    > >>>
    > >> Because you might want to reuse it. For example, say you have
    > >> navigation in two places on the same page, maybe Contact in navigation
    > >> and Contact in the footer, and you are on the contact page. So maybe
    > >> #nav .thispage would be styled differently than #footer .thispage.

    > >
    > > Good point, Adrienne.
    > >

    >
    > So, the next obvious question is:
    >
    > Why use ID at all? When is it advantageous to use a non-reusable
    > selector vs a re-usable one? What does ID do that CLASS doesn't?


    For current, for example! To let me know that it is a unique
    thing per page. While I said Adriennes's point was good, this
    does not mean do not use id for current. It just means that it
    has the slight disadvantage that you might later want a few
    things highlighted via php on the page (it is not the end of the
    world as we know it to change it to class when that happens and
    thus further alerting oneself in one's own practice that there is
    more than one link being highlighted via current.

    The advantages for id where you don't essentially need it (as in
    locating a unique bit of a page for a link) are author
    information, author management. Making something an id rather
    than a class is information that is lost by using class. It's
    strength is its weakness.

    --
    dorayme
     
    dorayme, Mar 12, 2008
    #13
  14. Mike Barnard

    rf Guest

    "Ed Mullen" <> wrote in message
    news:p...
    > dorayme wrote:
    >> In article <Xns9A5EC27C2BEarbpenyahoocom@69.28.186.121>,
    >> Adrienne Boswell <> wrote:
    >>
    >>> <> writing in
    >>> news::
    >>>> Andy Dingley <> wrote:

    >>
    >>>>> There are two popular ways of doing this, both commonly discussed.
    >>>>> These might be a start:
    >>>>> <http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
    >>>>> <http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>
    >>>>>
    >>>>> * Use class not id. This tends to make CSS life simpler.
    >>>> Why is class for a unique current per page simpler?
    >>>>
    >>> Because you might want to reuse it. For example, say you have
    >>> navigation in two places on the same page, maybe Contact in navigation
    >>> and Contact in the footer, and you are on the contact page. So maybe
    >>> #nav .thispage would be styled differently than #footer .thispage.

    >>
    >> Good point, Adrienne.
    >>

    >
    > So, the next obvious question is:
    >
    > Why use ID at all? When is it advantageous to use a non-reusable selector
    > vs a re-usable one? What does ID do that CLASS doesn't?


    Allows one to use getElementById?
     
    rf, Mar 12, 2008
    #14
  15. Mike Barnard

    Bergamot Guest

    rf wrote:
    > "Ed Mullen" <> wrote in message
    > news:p...
    >>
    >> Why use ID at all? When is it advantageous to use a non-reusable selector
    >> vs a re-usable one? What does ID do that CLASS doesn't?

    >
    > Allows one to use getElementById?


    But if you aren't doing any manipulation in JavaScript, there's no
    advantage to using ID over class. The only other thing that comes to
    mind is using ID as an anchor within the page, but how often do you
    really need one?

    Use a class selector instead unless you have a real need for an ID. It
    will make your CSS life easier.

    --
    Berg
     
    Bergamot, Mar 12, 2008
    #15
  16. Mike Barnard

    Ed Mullen Guest

    dorayme wrote:
    > In article <>,
    > Ed Mullen <> wrote:
    >
    >> dorayme wrote:
    >>> In article <Xns9A5EC27C2BEarbpenyahoocom@69.28.186.121>,
    >>> Adrienne Boswell <> wrote:
    >>>
    >>>> <> writing in
    >>>> news::
    >>>>
    >>>>> Andy Dingley <> wrote:
    >>>>>> There are two popular ways of doing this, both commonly discussed.
    >>>>>> These might be a start:
    >>>>>> <http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
    >>>>>> <http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>
    >>>>>>
    >>>>>> * Use class not id. This tends to make CSS life simpler.
    >>>>> Why is class for a unique current per page simpler?
    >>>>>
    >>>> Because you might want to reuse it. For example, say you have
    >>>> navigation in two places on the same page, maybe Contact in navigation
    >>>> and Contact in the footer, and you are on the contact page. So maybe
    >>>> #nav .thispage would be styled differently than #footer .thispage.
    >>> Good point, Adrienne.
    >>>

    >> So, the next obvious question is:
    >>
    >> Why use ID at all? When is it advantageous to use a non-reusable
    >> selector vs a re-usable one? What does ID do that CLASS doesn't?

    >
    > For current, for example! To let me know that it is a unique
    > thing per page. While I said Adriennes's point was good, this
    > does not mean do not use id for current.


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

    > It just means that it
    > has the slight disadvantage that you might later want a few
    > things highlighted via php on the page (it is not the end of the
    > world as we know it to change it to class when that happens and
    > thus further alerting oneself in one's own practice that there is
    > more than one link being highlighted via current.


    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.
    >
    > The advantages for id where you don't essentially need it (as in
    > locating a unique bit of a page for a link) are author
    > information, author management. Making something an id rather
    > than a class is information that is lost by using class. It's
    > strength is its weakness.


    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?


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

    If I use class once or id once, what's the difference? If I use id once
    I can't use it again. How do they function differently and why does it
    matter? Other than getting an error for using an id more than once in a
    page?


    Excuse me now, I must go and put on pants as my butt is chilly after
    having exposed my ignorance. However, I seek information and knowledge
    and am eager to garner both. Hopefully my quest will be fruitful. Or,
    uh, fruit-filled. Or, um, applesauce. Or something.

    --
    Ed Mullen
    http://edmullen.net
    All I ask is a chance to prove that money can't make me happy.
     
    Ed Mullen, Mar 12, 2008
    #16
  17. Mike Barnard

    Neredbojias Guest

    On 11 Mar 2008, Bergamot wrote:

    > rf wrote:
    >> "Ed Mullen" <> wrote in message
    >> news:p...
    >>>
    >>> Why use ID at all? When is it advantageous to use a non-reusable
    >>> selector vs a re-usable one? What does ID do that CLASS doesn't?

    >>
    >> Allows one to use getElementById?

    >
    > But if you aren't doing any manipulation in JavaScript, there's no
    > advantage to using ID over class. The only other thing that comes to
    > mind is using ID as an anchor within the page, but how often do you
    > really need one?
    >
    > Use a class selector instead unless you have a real need for an ID. It
    > will make your CSS life easier.


    That's like saying if you don't enjoy living, what's the advantage of life
    over death?

    There is the _potential_ for other things. Javascript to be sure, frames,
    and even css priorities come into play. I'd say "id" has a definite place
    in the scheme of things.

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
     
    Neredbojias, Mar 12, 2008
    #17
  18. Gazing into my crystal ball I observed Neredbojias <>
    writing in news:Xns9A5EE0F506373neredbojiasnano@85.214.90.236:

    > On 11 Mar 2008, Bergamot wrote:
    >
    >> rf wrote:
    >>> "Ed Mullen" <> wrote in message
    >>> news:p...
    >>>>
    >>>> Why use ID at all? When is it advantageous to use a non-reusable
    >>>> selector vs a re-usable one? What does ID do that CLASS doesn't?
    >>>
    >>> Allows one to use getElementById?

    >>
    >> But if you aren't doing any manipulation in JavaScript, there's no
    >> advantage to using ID over class. The only other thing that comes to
    >> mind is using ID as an anchor within the page, but how often do you
    >> really need one?
    >>
    >> Use a class selector instead unless you have a real need for an ID.
    >> It will make your CSS life easier.

    >
    > That's like saying if you don't enjoy living, what's the advantage of
    > life over death?
    >
    > There is the _potential_ for other things. Javascript to be sure,
    > frames, and even css priorities come into play. I'd say "id" has a
    > definite place in the scheme of things.
    >


    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.

    <style type="text/css">
    #firstname {background-color: pink}
    #firstname1 {background-color: yellow; color: red;}
    </style>
    </head>
    <body>
    <form method="post" action="thispage">
    <fieldset><legend>Using id and class</legend>
    <label for="firstname" id="firstname1">First Name: </label>
    <input type="text" name="firstname" id="firstname" value="">
    <label for="lastname" id="lastname1">Last Name: </label>
    <input type="text" name="lastname" id="lastname" value="Boswell"><br>
    <input class="submit" value="submit" type="submit">
    </form>


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Mar 12, 2008
    #18
  19. Mike Barnard

    Ben C Guest

    On 2008-03-12, rf <> wrote:
    [...]
    >> Why use ID at all? When is it advantageous to use a non-reusable selector
    >> vs a re-usable one? What does ID do that CLASS doesn't?

    >
    > Allows one to use getElementById?


    I think a getElementsByClassName has been proposed, but might not be
    standard yet.
     
    Ben C, Mar 12, 2008
    #19
  20. Ben C wrote:

    > I think a getElementsByClassName has been proposed, but might not be
    > standard yet.


    Would be handy. It's easy enough to implement yourself
    (getElementsByTagName('*'), loop, getAttribute('class'), split by
    whitespace, compare) but a native DOM version would probably be faster (as
    it would be compiled and optimised).

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 42 days, 16:28.]

    The Semantic Web
    http://tobyinkster.co.uk/blog/2008/03/09/sw/
     
    Toby A Inkster, Mar 12, 2008
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wayne  Wengert

    Marking CheckBoxList Items as Checked

    Wayne Wengert, Mar 2, 2005, in forum: ASP .Net
    Replies:
    7
    Views:
    32,579
    Wayne Wengert
    Mar 2, 2005
  2. Stéphanie Vanhove

    error marking in netbeans

    Stéphanie Vanhove, Nov 16, 2004, in forum: Java
    Replies:
    0
    Views:
    321
    Stéphanie Vanhove
    Nov 16, 2004
  3. Bob
    Replies:
    4
    Views:
    1,545
  4. Pie Squared

    Marking a Page of Memory Executable

    Pie Squared, Jun 4, 2008, in forum: C Programming
    Replies:
    19
    Views:
    557
    rahul
    Jun 6, 2008
  5. Replies:
    3
    Views:
    387
Loading...

Share This Page