Automatic Insertion of Icons

Automatic Insertion of Icons

Hi guys,

I am currently going through the Lynda Learning Jquery Essential training course. I have completed all the lessons in the first chapter however on the last lesson in the chapter that puts everything together in a practical example I cant get it to work properly. This is really annoying as i have spent all my free time this week studying.

Anyway, the lesson/code should work like this, display a small PDF icon next to every href element in the document the has the .pdf extension.

However when i preview the code below none of the pdf images are displayed.

Hope you guys can help me out on this one, I was really enjoying learning Jquery up until now.

Many thanks in advance.

This is the code I have been trying to get working:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Automatic PDF Icons</title>
    <style type="text/css">
    li {
        margin: 5pt 0 0 5pt;
    }
    </style>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $("document").ready(function() {
            $("a[href$=.pdf]").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
        });
    </script>
    </head>
    <body>
    <h1>Example: Automatic Insertion of Icons for PDF Links</h1>
    <p>This example demonstrates how to examine the contents of a link to see if it points to a
    PDF file and automatically insert a PDF icon if it does.</p>
    <ul class="navlist" id="navlinks">
        <li><a href="someurl.html">Link #1</a></li>
        <li><a name="#anchor1">Named Anchor Link</a></li>
        <li><a href="someurl.html">Link #2</a></li>
        <li><a href="someurl.pdf">Link #3</a></li>
        <li><a href="someurl.html">Link #4</a></li>
        <li><a href="someurl.html">Link #5</a></li>
        <li><a href="someurl.pdf">Link #6</a></li>
        <li><a href="someurl.html">Link #7</a></li>
        <li><a href="mailto:joe@joe.com">Email Link</a></li>
    </ul>
    </body>
    </html>