a blog about programming, photography and electronics.

[Plugin] jQuery Holed Div

Posted: February 3rd, 2011 | Author: | Filed under: jQuery, WebDevelopment | Tags: , , , , , , | No Comments »

Recently I needed to create a holed div, like this:

I haven’t found any good solution to create a holed div without using images, so I tried to use canvas as a background and it worked nicely.

Anyway I wanted to share my result to everyone, maybe it’ll be useful to someone else :)
So I created a jQuery Plugin called jquery.holedDiv.

Here’s a demo: demo

Download Latest This version may not work, because is used for testing, download the minified version.

Download Minified (0.1)
Download Minified (0.1.1)

Update: code uploaded to bitbucket (see below)

Usage:

$('div.info').holedDiv({
      'padding': 10,
      'radius': 10, //0 if you don't want rounded borders
      'stroke': false, //if you want to add a (black) stroke to the background
      'holeRadius': 20,
      'drawInner': true, //if you want to draw an inner circle, like the demo
      'drawInnerColor': 'black' //the color of the inner circle
});

Tested On:

  • Chrome 10
  • Firefox 4b10
  • Opera 10
  • IE 9

If you find any bug, or have any question (or feature suggestions) please let me know :)

Update 03/02/2011 20.41

Added version 0.1.1 that supports IE 9.0

Update 04/02/2011 23.50

Version 0.2 is ready, supports IE < 9 using excanvas

You can download it on bitbucket:

http://bitbucket.org/patrick91/jquery.holeddiv/

Update 08/02/2011

Relased Version 0.3 check it on bitbucket