Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

JQuery:Automatic Insertion of Icons for PDF Links

Posted on 2011-03-06
7
Medium Priority
?
804 Views
Last Modified: 2012-05-11
Aim: to place a pdf icon at the end of a hyperlink.

HTML code:
<a href="#">This is a blue document (PDF, 2.3MB)</a>

Front end output:
This is a blue document (PDF, 2.3MB) [imageIcon]

If the value inside the anchor tag contains '(PDF,' and ends with 'b)' ('b' can be either lower or uppercase) then append the image icon at the end.


This is the code I've been trying to fiddle with to get the above criteria:

<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
       // $("li a[href$=.pdf]").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
            $("p=.pdf]").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
            //$("a[pdf][href$=.pdf]").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
            $("p*=PDF").after("<img src='images/small_pdf_icon.gif' align='absbottom' />");
    });
</script>
0
Comment
Question by:jeremyll
  • 4
  • 3
7 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 2000 total points
ID: 35045742

Do you mean something like this:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26866457.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script> 

jQuery(document).ready(function(){

  $(".document").each( function() {
    $(this).append( $(".pdf-placeholder").clone().removeClass( "pdf-placeholder" ) );
  });

});

</script>

<style>
.pdf-placeholder { display: none; }
a { display: block; }
</style>

</head>
<body>

<a class="document" href="#">This is a red document (PDF, 1.4MB)</a>
<a class="document" href="#">This is a white document (PDF, 2.3MB)</a>
<a class="document" href="#">This is a blue document (PDF, 3.2MB)</a>

<img class="pdf-placeholder" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAkACQDASIAAhEBAxEB/8QAGgABAQADAQEAAAAAAAAAAAAAAAYCBAUHA//EADQQAAEDAwIDAwsEAwAAAAAAAAECAwQABREGIRITMQcUQRciMjdRUlZxdJHCFScz0TR1tP/EABgBAQADAQAAAAAAAAAAAAAAAAABAwUE/8QAJhEAAQEGBAcAAAAAAAAAAAAAAAECAxESITEEBRMiFDJRYXGBkf/aAAwDAQACEQMRAD8AsL72iy7dqt+wQ7EiY6h1pptap3K5iloQoDHLIHpgdanDqjWrz0pxAdCObxNpYuMPgKVqXy0NEx1F04SU+aVElB6HautqHQuoZWuH9QWty1lBfZfaRJecSctoQMKCUHbKPA9KmrbbdZ8Ux5ESDOd75tKkzVqWh6OpxsLTnGcHiwFAggDI8K51V9NRKejYdsZdpIrTW6CR5rx7UsfaZrPVcKO0/JkPpS6lCkoTc4KnMKTxJJQIpUARg7gdR7aza7S7jarlapcyY/MtsyA3IdjSQwlxBUpYVwKQhGSOAYzsd84yCnk3Cw6wushmJIaiKVEZQ23H78eFpKUITkAjAyAknHU59m3oelbJ3LS9st91jMLkRWeBQUkLAOd8H7VLGosZqdCrE8E7kVzuvFKp4v8AS2gy2J8KPMiL5keQ0l1peCOJChkHB3Gx8aVNdlJ/buxfT/kaVeZhWVHae/xJf+ynf9TtWNedwLkptiXEhpC5a7nOQkn0UKMl07/IecR7Me8nIGyzKbbvkqWsITGcKYfNOf5E5PXpglRT80geNd2uU3ZGu4IhSJDzzATwqQDwBeepVjcknJO/jWP6EhtRMSVIaBIPnOKWU490k5HjtuN+nTAGz2UeruxfTfkaU7KPV3YvpvyNKArKnbjobS1zlLlTbFCcfWSVrDfCVkkkk4xkkncnelKA1fJtoz4eh/Y/3TybaM+Hof2P90pQFFbYEW1QWoNvZSzGZGG20kkJGc4GfnSlKA//2Q==" />

</body>
</html>

Open in new window

0
 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 2000 total points
ID: 35045777

...or rather this:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26866457.html#a35045742</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script> 

jQuery(document).ready(function(){

  $(".document").each( function() {

    var fileType = $(this).text().replace( /^.*\((.+),.*\)$/, "$1" ).toLowerCase();
    $(this).append( $( "#icon-" + fileType ).clone().removeClass("placeholder") );

  });

});

</script>

<style>
.placeholder { display: none; }
a { display: block; }
</style>

</head>
<body>

<a class="document" href="#">This is a red document (PDF, 1.4MB)</a>
<a class="document" href="#">This is a white document (PDF, 2.3MB)</a>
<a class="document" href="#">This is a Postscript document (PS, 2.3MB)</a>
<a class="document" href="#">This is a blue document (PDF, 3.2MB)</a>

<img id="icon-pdf" class="placeholder" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAkACQDASIAAhEBAxEB/8QAGgABAQADAQEAAAAAAAAAAAAAAAYCBAUHA//EADQQAAEDAwIDAwsEAwAAAAAAAAECAwQABREGIRITMQcUQRciMjdRUlZxdJHCFScz0TR1tP/EABgBAQADAQAAAAAAAAAAAAAAAAABAwUE/8QAJhEAAQEGBAcAAAAAAAAAAAAAAAECAxESITEEBRMiFDJRYXGBkf/aAAwDAQACEQMRAD8AsL72iy7dqt+wQ7EiY6h1pptap3K5iloQoDHLIHpgdanDqjWrz0pxAdCObxNpYuMPgKVqXy0NEx1F04SU+aVElB6HautqHQuoZWuH9QWty1lBfZfaRJecSctoQMKCUHbKPA9KmrbbdZ8Ux5ESDOd75tKkzVqWh6OpxsLTnGcHiwFAggDI8K51V9NRKejYdsZdpIrTW6CR5rx7UsfaZrPVcKO0/JkPpS6lCkoTc4KnMKTxJJQIpUARg7gdR7aza7S7jarlapcyY/MtsyA3IdjSQwlxBUpYVwKQhGSOAYzsd84yCnk3Cw6wushmJIaiKVEZQ23H78eFpKUITkAjAyAknHU59m3oelbJ3LS9st91jMLkRWeBQUkLAOd8H7VLGosZqdCrE8E7kVzuvFKp4v8AS2gy2J8KPMiL5keQ0l1peCOJChkHB3Gx8aVNdlJ/buxfT/kaVeZhWVHae/xJf+ynf9TtWNedwLkptiXEhpC5a7nOQkn0UKMl07/IecR7Me8nIGyzKbbvkqWsITGcKYfNOf5E5PXpglRT80geNd2uU3ZGu4IhSJDzzATwqQDwBeepVjcknJO/jWP6EhtRMSVIaBIPnOKWU490k5HjtuN+nTAGz2UeruxfTfkaU7KPV3YvpvyNKArKnbjobS1zlLlTbFCcfWSVrDfCVkkkk4xkkncnelKA1fJtoz4eh/Y/3TybaM+Hof2P90pQFFbYEW1QWoNvZSzGZGG20kkJGc4GfnSlKA//2Q==" height="36" width="36" />

<img id="icon-ps" class="placeholder" src="data:image/jpg;base64,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"  height="36" width="36" />

</body>
</html>

Open in new window

0
 

Author Comment

by:jeremyll
ID: 35046022
@Proculopsis - they both work! but is it possible to have the icon image referenced inside the css or in the jquery script in <head?> tag? I prefer not to put an image tag inside the <body> tag.

Also, can this work without google's api?

Thanks!
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 2000 total points
ID: 35046212

Try this instead (you should be able to de-jQuery it but I promised myself never to type in .getEl*m*ntByID again):

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26866457.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script> 

var PlaceHolder = {
  PDF: $("<img/>").attr( { src: "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAkACQDASIAAhEBAxEB/8QAGgABAQADAQEAAAAAAAAAAAAAAAYCBAUHA//EADQQAAEDAwIDAwsEAwAAAAAAAAECAwQABREGIRITMQcUQRciMjdRUlZxdJHCFScz0TR1tP/EABgBAQADAQAAAAAAAAAAAAAAAAABAwUE/8QAJhEAAQEGBAcAAAAAAAAAAAAAAAECAxESITEEBRMiFDJRYXGBkf/aAAwDAQACEQMRAD8AsL72iy7dqt+wQ7EiY6h1pptap3K5iloQoDHLIHpgdanDqjWrz0pxAdCObxNpYuMPgKVqXy0NEx1F04SU+aVElB6HautqHQuoZWuH9QWty1lBfZfaRJecSctoQMKCUHbKPA9KmrbbdZ8Ux5ESDOd75tKkzVqWh6OpxsLTnGcHiwFAggDI8K51V9NRKejYdsZdpIrTW6CR5rx7UsfaZrPVcKO0/JkPpS6lCkoTc4KnMKTxJJQIpUARg7gdR7aza7S7jarlapcyY/MtsyA3IdjSQwlxBUpYVwKQhGSOAYzsd84yCnk3Cw6wushmJIaiKVEZQ23H78eFpKUITkAjAyAknHU59m3oelbJ3LS9st91jMLkRWeBQUkLAOd8H7VLGosZqdCrE8E7kVzuvFKp4v8AS2gy2J8KPMiL5keQ0l1peCOJChkHB3Gx8aVNdlJ/buxfT/kaVeZhWVHae/xJf+ynf9TtWNedwLkptiXEhpC5a7nOQkn0UKMl07/IecR7Me8nIGyzKbbvkqWsITGcKYfNOf5E5PXpglRT80geNd2uU3ZGu4IhSJDzzATwqQDwBeepVjcknJO/jWP6EhtRMSVIaBIPnOKWU490k5HjtuN+nTAGz2UeruxfTfkaU7KPV3YvpvyNKArKnbjobS1zlLlTbFCcfWSVrDfCVkkkk4xkkncnelKA1fJtoz4eh/Y/3TybaM+Hof2P90pQFFbYEW1QWoNvZSzGZGG20kkJGc4GfnSlKA//2Q==" } ),
  PS: $("<img/>").attr( { src: "data:image/jpg;base64,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" } )
};

jQuery(document).ready(function(){

  $(".document").each( function() {

    var fileType = $(this).text().replace( /^.*\((.+),.*\)$/, "$1" );
    if ( PlaceHolder[fileType] ) $(this).append( PlaceHolder[fileType].clone().css( { width: 36, height: 36 } ) );

  });

});

</script>

<style>
a { display: block; }
</style>

</head>
<body>

<a class="document" href="#">This is a red document (PDF, 1.4MB)</a>
<a class="document" href="#">This is a white document (PDF, 2.3MB)</a>
<a class="document" href="#">This is a Postscript document (PS, 2.3MB)</a>
<a class="document" href="#">This is a blue document (PDF, 3.2MB)</a>

</body>
</html>

Open in new window

0
 

Author Comment

by:jeremyll
ID: 35048254
Thanks Proculopsis, That's great. How can I put just one space between the imageicon and the anchor tag?
0
 

Author Comment

by:jeremyll
ID: 35048259
I'm actually using another image, which doesn't have sufficient white space to provide a gap.
0
 

Author Closing Comment

by:jeremyll
ID: 35050836
Proculopsis - LEGEND
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question