Response title
This is preview!
Automatic Insertion of Icons
in Getting Started
•
7 years ago
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:
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:
- <!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>
1