Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    highlighting current page hyperlink

    Hey
    Basically all i want to do is highlight the pages hyperlink the user is currently on. So when the home page loads, the home page hyperlink is a different colour to the other hyperlinks, and then when another is page is pressed it is that pages hyperlink that is a different colour to the others

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    here is how to get the link to the current page ...

    for (var as = document.getElementsByTagName('A'), i = as.length; i--; ) {
    if (as[i].href == location.href) {/*do whatever*/}
    }

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    It is not so easy to write a script that can result in your page loading with any links to the current url already colored appropriately.

    It is simple to do it after the page loads, but that will change the color of the links after first being displayed with their normal link colors.


    Code:
    <script>
    function colorReloadLinks(){
    	var here= location.pathName, next, url,
    	links= document.getElementsByTagName('a'), L= links.length;
    	while(L){
    		next= links[--L];
    		if(next.href.indexOf(here)!= -1){
    			next.style.color= 'green';
    			next.title+= ' (reload page )';
    		}
    	}
    }
    window.onload=colorReloadLinks;
    </script>

    The change in color (if the link is in the viewable screen area) will draw the eye, probably not what you wanted.

    What you can do instead is put a script early in the <head> that sets the style for that page, before the page renders anything visibly.

    The next example finds the filename of the loaded page and matches any <a> elements that include the filename in their href attribute.

    It is a little involved because links often have pseudo-attributes set for visited, active and hover, and all of them are in the selector.

    Code:
    <script>
    var css, url=location.pathname, 
    ax=url.lastIndexOf('/')+1;
    if(ax) url=url.substring(ax);
    
    css='a[href*="'+url+'"]';
    css+=', '+css+':visited, '+css+':hover, '+css+':active';
    
    document.writeln('<style>+css+'{color:green}<\/style>');
    </script>
    // sample output:
    Code:
    <style>
    a[href*= "webshop.html"], 
    a[href*= "webshop.html"]:visited, 
    a[href*= "webshop.html"]:hover, 
    a[href*= "webshop.html"]:active{
    	color:green
    }
    </style> 
    */
    Last edited by mrhoo; 03-11-2012 at 04:42 PM.


  •  

    Posting Permissions

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