Skip to content
Browse files

Change how canvases are initialized for IE9

With this change, IE9 can use the canvas element properly.

It also works for IE6-8 using the new _makeCanvas function.
  • Loading branch information...
1 parent 71ca15f commit 50f9a0b87e2947b5b9a94001670e2cc96d1695f3 @ryleyb committed Jan 20, 2011
Showing with 15 additions and 17 deletions.
  1. +1 −1 demo/test.html
  2. +14 −16 src/farbtastic.js
View
2 demo/test.html
@@ -5,7 +5,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/tags/m3/excanvas.compiled.js"></script><![endif]-->
+ <!--[if lte IE 8]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/tags/m3/excanvas.compiled.js"></script><![endif]-->
<title>Farbtastic v2</title>
<script type="text/javascript" charset="utf-8" src="../src/farbtastic.js"></script>
<script type="text/javascript" charset="utf-8">
View
30 src/farbtastic.js
@@ -75,6 +75,16 @@ $._farbtastic = function (container, options) {
}
/////////////////////////////////////////////////////
+ //excanvas-compatible building of canvases
+ fb._makeCanvas = function(className){
+ var c = document.createElement('canvas');
+ if (!c.getContext) { // excanvas hack
+ c = window.G_vmlCanvasManager.initElement(c);
+ c.getContext(); //this creates the excanvas children
@ryleyb
Owner
ryleyb added a note Mar 11, 2011

I'm not sure how I managed to submit this patch without also including:

fb.usingExCanvas = true;

At this point. Duh?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ }
+ $(c).addClass(className);
+ return c;
+ }
/**
* Initialize the color picker widget.
@@ -90,27 +100,15 @@ $._farbtastic = function (container, options) {
.html(
'<div class="farbtastic" style="position: relative">' +
'<div class="farbtastic-solid"></div>' +
- '<canvas class="farbtastic-mask"></canvas>' +
- '<canvas class="farbtastic-overlay"></canvas>' +
'</div>'
)
+ .children('.farbtastic')
+ .append(fb._makeCanvas('farbtastic-mask'))
+ .append(fb._makeCanvas('farbtastic-overlay'))
+ .end()
.find('*').attr(dim).css(dim).end()
.find('div>*').css('position', 'absolute');
- // IE Fix: Recreate canvas elements with doc.createElement and excanvas.
- $.browser.msie && $('canvas', container).each(function () {
- // Fetch info.
- var attr = { 'class': $(this).attr('class'), style: this.getAttribute('style') },
- e = document.createElement('canvas');
- // Replace element.
- $(this).before($(e).attr(attr)).remove();
- // Init with explorerCanvas.
- G_vmlCanvasManager && G_vmlCanvasManager.initElement(e);
- // Set explorerCanvas elements dimensions and absolute positioning.
- $(e).attr(dim).css(dim).css('position', 'absolute')
- .find('*').attr(dim).css(dim);
- });
-
// Determine layout
fb.radius = (options.width - options.wheelWidth) / 2 - 1;
fb.square = Math.floor((fb.radius - options.wheelWidth / 2) * 0.7) - 1;

0 comments on commit 50f9a0b

Please sign in to comment.
Something went wrong with that request. Please try again.