Home/ Questions/Q 7663889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T14:09:49+00:00

I have this script: JsBin It allows to display the corresponding favicon to a

  • 0

I have this script: JsBin

It allows to display the corresponding favicon to a certain url. As you can see the favicon is appended to the url, however I need it to append to the class="class" How can I do this? I don’t see anything in the code that I can change in order to make this work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve modified the script to include in the “config” var a “target” property. This “target” is nothing more than a jQuery selector (such as .class, in this case) which defaults to “this”.

    So:

    jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' }); //aplies to $('.class')

    //These 2 are the same
    jQuery('#hello').favicons({insert: 'insertBefore', target: '#hello' }); //target is the same as "this"
    jQuery('#hello').favicons({insert: 'insertBefore'});

    I hope this works out for you!

    This is the full working code:

    <!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>

<script type="text/javascript">

    jQuery.fn.favicons = function (conf) {
        var config = jQuery.extend({
            insert:        'appendTo',
            target:         this
        }, conf);

        return this.each(function () {
            jQuery('a[href^="http://"]', this).each(function () {
                var link        = jQuery(this);
                var faviconURL    = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';

                var faviconIMG    = jQuery('<img src="' + '" alt="" />')[config.insert]($(config.target));
                var extImg        = new Image();

                extImg.src = faviconURL;

                if (extImg.complete) {
                    faviconIMG.attr('src', faviconURL);
                }
                else {
                    extImg.onload = function () {
                        faviconIMG.attr('src', faviconURL);
                    };
                }
            });
        });
    };

    $(function(){
        jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' });
    });

</script>
</head>
<body>
  <p id="hello"><a href="http://www.google.nl/">Google</a></p>
  <p class="class">apend favicon over her instead</p>
</body>
</html>
    • 0