SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    link that changes color when linked-to page is displayed

    A client has asked:
    is it possible to have the links in the left navigation bar grey-down or shift in some way once you click on them? That way you know which one you are linked to on any given page?
    The client's site is:http://www.clickbasics.com/home/SacredHealingArts. It is .php/mysql driven with a Content Management System in which the client selects link, background and text colors, etc. When the client creates a new page, a link is automatically generated in the navigation system. The navigation code behind the page display is:
    PHP Code:
     <?php if ($pages){
    $links = @mysql_query("SELECT id, title, cat_id FROM page WHERE page.site_id='$site_id' AND cat_id = '0' AND page.visible = 'Yes' ORDER BY order_pg"); 
    if (!
    $links) {
    exit(
    '<p>Error retrieving links from database!<br />'.
         
    'Error: ' mysql_error() . '</p>');
    }
    //end if !links
    while ($page mysql_fetch_array($links)) {
    $id $page['id'];
    $title htmlspecialchars($page['title']);
    echo 
    "<li>";
    echo 
    "<a href='page/$site_address/$id'>$title</a></li>\n"
    }
    //end while pages
    What is the easiest approach to the client's request?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When the new page is created, is it possible to give the <body> tag an ID?
    Can't remember where I read it - may have been on SPF - but this is a good tip I learned recently:

    HTML:
    Code:
    <body id="page111">
    <ul>
    <li><a id="link111" class="menuLink" href='page/111'>Link 1</a></li> 
    <li><a id="link112" class="menuLink" href='page/112'>Link 1</a></li> 
    <li><a id="link113" class="menuLink" href='page/113'>Link 1</a></li> 
    <li><a id="link114" class="menuLink" href='page/114'>Link 1</a></li> 
    </ul>
    </body>
    CSS:
    Code:
    a:link.menuLink{
    color: black;
    }
     
    a:hover.menuLink{
    color: red;
    }
     
    #page111 a:link#link111, page112 a:link#link112, #page113 a:link#link113, #page114 a:link#link114, #page111 a:hover#link111, page112 a:hover#link112, #page113 a:hover#link113, #page114 a:hover#link114 {
    color: gray;
    }
    Or something to that effect.

    The gist of it is that the link will only be gray when it's inside another tag (in this case the body tag) with a corresponding ID.

    I may be able to clarify further if this makes no sense
    From the English nation to a US location.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a useful technique, but the pseudo-classes must be specified last:
    Code:
    #page111 a#link111:link etc
    Birnam wood is come to Dunsinane

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right. Thanks Tommy.
    From the English nation to a US location.

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, guys. I'll give it a try.
    Paul C.
    ClickBasics
    http://www.clickbasics.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •