Visual differentiation between different types of links

Hi everyone, today I’m going to describe, how to visually separate different types of links on the website and how to add list of them at the bottom of the page when page is printed.
Recently I got the task form one of my clients to visually separate all links on his existing website that has more than 20 000 pages.

Demo

Requirements:

1. Select (visually) all external links and  links that lead to .pdf and .docx files (internal links have to remain unchanged).
2. All external links have to be opened in new windows.
3. When page is printed all external links have to be printed at the bottom of the page with its anchor and url.

I have decided to use icons for visual representation different types of links.
For representation links that lead to .pdf and .docx files we can apply style declarations that are based on the values within tag attributes.

a[href $='.pdf'] {
    padding-right: 20px;
    background: transparent url('img/icon_pdf.gif') no-repeat right;
}

a[href $='.docx'] {
padding-right: 20px;
background: transparent url('img/icon_doc.gif') no-repeat right;
}

.external {
    padding-right: 20px;
    background: transparent url('img/icon_external.gif') no-repeat right;
}

In our JavaScript file create function that finds all external links and add on each link class='external' and add attribute target='_blank' for open link in new window.
Besides that it creates block in the bottom of the page and copy all external links to that block.

$(document).ready(function(){
    $('<ol id="references"></ol>').appendTo('body');

    $('a[href^=http]').each(function(){

        var urlRegex = /.*clientsite\.com.*/;

        var found = urlRegex.test(this);
        if(found == false) {
            $(this).addClass('external').attr('target', '_blank');

            $(this).clone().each(function(){
                $('<span class="ext"> (' + this.href + ')</span>');
            }).appendTo('#references')
                .wrap('<li></li>');
        }
    })
});

Now we have to make the block visible only when page is printed
Add this code to our CSS file

#references {
    display: none;
}

Add media="screen" to its link in order this stylesheet applies only when page is on the screen

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />

Create second css file with media="print" It will be using for print

a[href $='.pdf'] {
    background-image: none;
    padding: 0 0 0 0;
}

a[href $='.docx'] {
    background-image: none;
    padding: 0 0 0 0;
}

.external {
	background-image: none;
	padding: 0 0 0 0;
}


a[href^="http"]:after {
    content:" (" attr(href) ") "; font-size: 90%;
}

 

Comments are closed.