The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Favicon : Make a use of your favicon with badges, images or videos

Plugin rate :

Favicon.js jQuery plugin allows you tu to use your favicon with badges, images or videos

 

Animate your favicon with animated badges (slide, fade, pop, etc...).

You can customize type of animation, position, background color and text color.

Implementation: 

1. First, include the jQuery files

1
2
3
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="favicon-0.3.4.min.js"></script>

2. Now, call Favicon plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
  $(document).ready(function(){
    // Simple call
    var badge = 5; // Set badge value
    var favicon = new Favico(); // Create favicon
    
 
    // Call Favicon plugin with options
    var badge = 5; // Set badge value
    var favicon = new Favico({
        animation : 'popFade', // set animation type
        bgColor : '#000', // set the badge bgcolor
        textColor: '#fff', // set the badge text color
        fontFamily : 'Arial' // set the badge font-family property
    });
  });
</script>

3. Play with badge values

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
  $(document).ready(function(){
 
    // Add +1 to bagde value when clicking on a button with id="plusOne"
    // exemple <button id="plusOne">+1</button>
    $('#plusOne').click(function() {
        badge = badge + 1;
        favicon.badge(badge);
    });
 
    // Add -1 to bagde value when clicking on a button with id="minusOne"
    // exemple <button id="minusOne">-1</button>
    $('#minusOne').click(function() {
        badge = (badge-1 < 0) ? 0 : (badge - 1);
        favicon.badge(badge);
    });
 
    // Reset badge value = hide badge
    // exemple <button id="reset">Reset badge</button>
    $('#reset').click(function() {
        favicon.reset();
    });
  });
</script>

4. Show image, video or webcam instead of your favicon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
  $(document).ready(function(){
 
    // Show an existing image on your webpage
    var favicon=new Favico();
    var image=document.getElementById('imageId');
    favicon.image(image);
 
    // Show a video instead of your classical favicon
    var favicon=new Favico();
    var video=document.getElementById('videoId');
    favicon.video(video);
    //stop the video
    favicon.video('stop');
 
    // Show your webcam instead of your classical favicon
    var favicon=new Favico();
    favicon.webcam();
    //stop
    favicon.webcam('stop');
  });
</script>
Options: 
bgColor
String
Default : #d00 - Badge background color
textColor
String
Default : #fff - Badge text color
fontFamily
String
Default : sans-serif - Text font family (Arial, Verdana, Times New Roman, serif, sans-serif,...)
fontStyle
String
Default : bold - Font style (normal, italic, oblique, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900)
type
String
Default : circle - Badge shape (circle, rectangle)
position
String
Default : down - Badge position (up, down, left, upleft)
animation
String
Default : slide - Badge animation type (slide, fade, pop, popFade, none )
elementId
Boolean
Default : false - Image element ID if there is need to attach badge to regular image
Screenshots
  • Favicon.js

Comments

Thx mate

Thanks!

You're awesome, Dude!
Thnx.

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
Current version
0.3.4
Browsers compatibility
Mozilla FirefoxOperaSafari
Fork it on github Comments [3]