Script to find all Anchor which contains attachments, Jquery Tutorial for edit anchor tag of an ID, Edit Anchor tags exist in ID

To achive the Web Accessibility.

we use to show icons for type of attached file. This feature is not easy to achive when we have older dynamically site. where all links comes dynamic at your website.


To chive this feature I made Jquery which checks all the page's anchor tags and its link and forund those anchor have attachment of work, excel, pdf, zip.


To achieve this feature do as instruct.

paste this link for jquery liabrary file.

http://code.jquery.com/jquery-1.6.1.min.js

Add this script code in the bottom of your page before body end tag.

<script type="text/javascript">
        //
 
        $("#bottom a").each(function(i) {
            //  alert('sfd');
            var anch = $(this).attr("href");
            var i = anch.substring(anch.lastIndexOf('.') + 1);
            switch (i) {
                case 'xls':
$(this).append(" src='../images/excel_icon.png' />");
                  break;

case 'XLS':
$(this).append(" 
src='../images/excel_icon.png' />");
                    break; 
 
case 'jpg':
$(this).append(" src='../images/jpg.gif' />");
                    break; 
 
case 'JPG':
$(this).append("  src='../images/jpg.gif' />");
                    break; 
 
case 'png':
$(this).append(" 
src='../images/jpg.gif' />");
                    break; 
 
case 'PNG':
$(this).append(" src='../images/jpg.gif' />");
                    break; 
 
case 'gif':
$(this).append(" 
src='../images/jpg.gif' />");
                    break; 
 
 
case 'GIF':
$(this).append(" src='../images/jpg.gif' />");
                    break; 
 
case 'doc':
    $(this).append(" src='../images/word_icon.png' />");
                    break; 
 
case 'DOC':
$(this).append(" src='../images/word_icon.png' />");
                    break; 
 
case 'pdf':
$(this).append(" 
src='../images/pdf_icon.gif' />");
                   break; 
 
case 'PDF':
$(this).append(" src='../images/pdf_icon.gif' />");
break; 
 
case 'zip':
$(this).append(" src='../images/zip_icon.gif' />");
break; 
 
case 'ZIP':
$(this).append(" src='../images/zip_icon.gif' />");
                    break;
                default:
 
            }
        });
 
        //]]>   
    script>

We need to put script code before closing tag of body because it should run when the complete page is loaded to system.

How to customize the script:-

here you can put the class name or id name of which anchor tag you want to scan.

// for classs named bottom 

  $(".bottom a").each(function(i)

// for id named bottom  

$("#bottom a").each(function(i)

 here you you can update the working perform by jquery.

as you can do anything like color change adding attribute.

 
case 'doc': 

$(this).append(" src='../images/word_icon.png' />");
                    break;

images to show as icon.

zip format:

Word format:

PDF Format:

Excel Format:

 

Image format

For live examples 

https://www.centralbankofindia.co.in/site/indexcbi.aspx

If you like the post do comment on it. 
or you want any modification or any another kind of 
script you are welcome and ask for same.

I will help you...