IE color picker problem

bobyper · 2006-08-16 14:44:29

hi there

i'm testing xinha and cant get change color working on IE. Select text first. Click on 'font color', click on selected color and popup close but text not changed color. Any idea why?

testing here

http://xinha.gogo.co.nz/xinha-nightly/e … ample.html

wymsy · 2006-08-16 17:37:01

See ticket #85.

Sernaton · 2006-08-18 03:58:50

Same problem here. It looks like there is a recent color picker, right? It looks like the onclick event handling works funny now. It goes first to the main editor, thus unselecting, and only then executes the color selection, which of course doesn't work without selected text.

difficultchild · 2006-08-18 08:44:03

I have equal problem with IE.
My solution: Downgrad from the last Changeset 550 to 549 and use popup. this works with IE. (http://xinha.python-hosting.com/changeset/550)

Sernaton · 2006-08-18 09:07:29

thanks, difficultchild, that worked for me as well. A pity, as the new color picker is much nicer, but IE is what my customers use...

difficultchild · 2006-08-18 09:22:48

Minumum requirement for XINHA is IE 5,5, XINHA doesn't work at me with Konqueror, Opera, Netscape and IE smaller than 5.5. With the other browser i have no problems.

mokhet · 2006-08-19 00:55:29

I have fixed the problem in the branch i'm working on.

http://mokhet.com/xinha/branch_events/e … demand.php

If it's ok for you, here is the patch to apply

Index: htmlarea.js
===================================================================
--- htmlarea.js    (revision 553)
+++ htmlarea.js    (working copy)
@@ -4253,7 +4253,17 @@
       } catch (ex) {}
     }
   }
-  var picker = new colorPicker({cellsize:editor.config.colorPickerGranularity,callback:function(color){editor._doc.execCommand(cmdID, false, color);}});
+  var cback = function(color) { editor._doc.execCommand(cmdID, false, color); };
+  if ( HTMLArea.is_ie )
+  {
+    var range = editor._createRange(editor._getSelection());
+    cback = function(color)
+    {
+      range.select();
+      editor._doc.execCommand(cmdID, false, color);
+    };
+  }
+  var picker = new colorPicker({cellsize:editor.config.colorPickerGranularity,callback:cback});
   picker.open(editor.config.colorPickerPosition, btn);
 };

difficultchild · 2006-08-19 01:33:36

the condition for this solution is version 6.0. she does not work with earlier versions. few of my customers do not have IE6.0
perhaps OT, or the above-mentioned problem:
I have a similar problem already for some time: a “Layer” over a form element does not work. the Layer is over that form, but form remains active.
for IE is a click on the Layer is equal click in form. that is an old problem with IE and i do not have a solution for it.
that is not “xinha problem”, that is a “IE problem”, but knows someone a solution?

mokhet · 2006-08-19 07:35:55

I dont see what can be wrong with IE5.5 and this patch, but i dunno IE5.5 at all, what is the error ? But well, IE5.5 !!!

Concerning your layer/form problem, I guess you are talking about <select> in <form> elements that are NEVER hidden by any element beneath it, right ? If so, the IE solution (since this problem is an IE specific) is to add an iframe behind the elements to hide. But then, there's no solution before IE.5.5.

http://www.google.fr/search?hl=en&q=ifr … cher&meta=

wymsy · 2006-08-19 11:55:06

I have posted an enhanced version of color_picker.js as an attachment to ticket #85 (http://xinha.python-hosting.com/ticket/85) which fixes the problem with <select> elements, among other things. I would welcome comments on the enhancements before I commit the changes.

bobyper · 2006-08-20 08:48:24

i like new color_picker.js.
One think except color of the buttons

It's a good idea to fix color code field maxlength, something like tihs

this.chosenColor.setAttribute('maxLength','7');

mharrisonline · 2006-08-20 15:26:08

The new color picker is really great, but I wish it had both the new and the old selectors on it (maybe the old selection limited to colors that could realistically be used for font and highlighting colors)... it's now hard for some users to pick the same color twice on the same page.

difficultchild · 2006-08-21 02:06:49

thx mokhet for help with my problem. this is a little solution, but this help me.
IE is not my favour browser ;-)

mokhet · 2006-08-21 16:21:02

Heya mharrisonline, what do you think of this patch ?

demo available here : http://mokhet.com/xinha/branch_events/e … demand.php

It has the IE fix (see ticket #85) to prevent windowed elements (<select>) to go above the colorpicker and it remembers the 20 last colors. The saved colors are not splitted between foreground and background, but that's can of course be done if everybody think it should remember colors separatly.
It also removes the "web safe" checkbox since this is TOTALLY useless in 2006. However, it's still in, it's a configuration variable (websafe) sent when creating the widget.

DEPRECATED - loose colors between session. see patch in next post for a better fix

Index: color_picker.js
===================================================================
--- color_picker.js    (revision 554)
+++ color_picker.js    (working copy)
@@ -77,6 +77,7 @@
     var picker = this;
     this.callback = params.callback?params.callback:function(color){alert('You picked ' + color )};

+    this.websafe  = params.websafe?params.websafe:false;
     this.cellsize = params.cellsize?params.cellsize:'10px';
     this.side     = params.granularity?params.granularity:18;

@@ -288,6 +289,11 @@
       {
         this.table.style.left = (left - (this.table.offsetWidth - element.offsetWidth)) + 'px';
       }
+      // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+      /*@cc_on
+      this.iframe.style.top = this.table.style.top;
+      this.iframe.style.left = this.table.style.left;
+      @*/
     };

     /** Draw the color picker. */
@@ -338,7 +344,7 @@
                 picker.backSample.style.color = 'black';
               }
             }
-            td.onclick = function() { picker.callback(this.colorCode); picker.close(); }
+            td.onclick = function() { colorPicker.remember(this.colorCode); picker.callback(this.colorCode); picker.close(); }
             td.appendChild(document.createTextNode(' '));
             td.style.cursor = 'pointer';
             tr.appendChild(td);
@@ -413,7 +419,7 @@
               picker.backSample.style.color = 'black';
             }
           }
-          td.onclick = function() { picker.callback(this.colorCode); picker.close(); }
+          td.onclick = function() { colorPicker.remember(this.colorCode); picker.callback(this.colorCode); picker.close(); }
           td.appendChild(document.createTextNode(' '));
           td.style.cursor = 'pointer';
           tr.appendChild(td);
@@ -429,6 +435,8 @@
         td.colSpan = this.side + 3;
         td.style.padding = '3px';

+        if ( this.websafe )
+        {
         var div = document.createElement('div');
         var label = document.createElement('label');
         label.appendChild(document.createTextNode('Web Safe: '));
@@ -439,6 +447,7 @@
         label.style.fontSize = 'x-small';
         div.appendChild(label);
         td.appendChild(div);
+        }

         var div = document.createElement('div');
         var label = document.createElement('label');
@@ -466,10 +475,60 @@

         td.appendChild(sampleTable);

+        var savedColors = document.createElement('div');
+        savedColors.style.clear = 'both';

+        function createSavedColors(color)
+        {
+          var is_ie = false;
+          /*@cc_on is_ie = true; @*/
+          var div = document.createElement('div');
+          div.style.width = '13px';
+          div.style.height = '13px';
+          div.style.margin = '1px';
+          div.style.border = '1px solid black';
+          div.style.cursor = 'pointer';
+          div.style.backgroundColor = color;
+          div.style[ is_ie ? 'styleFloat' : 'cssFloat'] = 'left';
+          div.onclick = function() { picker.callback(color); picker.close(); };
+          div.onmouseover = function()
+          {
+            picker.chosenColor.value = color;
+            picker.backSample.style.backgroundColor = color;
+            picker.foreSample.style.color = color;
+          };
+          savedColors.appendChild(div);
+        }
+        for ( var savedCols = 0; savedCols < colorPicker.savedColors.length; savedCols++ )
+        {
+          createSavedColors(colorPicker.savedColors[savedCols]);
+        }
+
+        td.appendChild(savedColors);
+
         this.tbody.appendChild(tr);
         document.body.appendChild(this.table);
-
+        // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+        /*@cc_on
+        if ( !this.iframe )
+        {
+          this.iframe = document.createElement('iframe');
+          this.iframe.style.zIndex = 999;
+          this.table.style.zIndex = 1000;
+          this.iframe.style.position = 'absolute';
+          this.iframe.style.width = this.table.offsetWidth;
+          this.iframe.style.height = this.table.offsetHeight;
+          this.iframe.border = 0;
+          this.iframe.frameBorder = 0;
+          this.iframe.frameSpacing = 0;
+          this.iframe.marginWidth = 0;
+          this.iframe.marginHeight = 0;
+          this.iframe.hspace = 0;
+          this.iframe.vspace = 0;
+          document.body.appendChild(this.iframe);
+        }
+        this.iframe.style.display = '';
+        @*/
       }
       else
       {
@@ -495,6 +554,28 @@
     this.close = function()
     {
       this.table.style.display = 'none';
+      // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+      /*@cc_on
+      if ( this.iframe ) { this.iframe.style.display = 'none'; }
+      @*/
     };
+  }

-  }
\ No newline at end of file
+colorPicker.savedColors = [];
+/** add the color to the savedColors */
+colorPicker.remember = function(color)
+{
+  // check if this color is known
+  for ( var i = colorPicker.savedColors.length; i--; )
+  {
+    if ( colorPicker.savedColors[i] == color )
+    {
+      return false;
+    }
+  }
+  // insert the new color
+  colorPicker.savedColors.splice(0, 0, color);
+  // limit elements
+  colorPicker.savedColors = colorPicker.savedColors.slice(0, 21);
+  return true;
+};

wymsy has also attached some files to update the color_picker on ticket #85, I dont have time to review them yet, but perhaps thoses updates are better than this patch. Need comments and review

Last edited by mokhet (2006-08-22 00:41:14)

mokhet · 2006-08-22 00:40:23

Even better, this patch is saving the last used colors accross session by using a cookie

Index: color_picker.js
===================================================================
--- color_picker.js    (revision 555)
+++ color_picker.js    (working copy)
@@ -74,9 +74,15 @@
 
   function colorPicker(params)
   {
+    // if the savedColors is empty, try to read the savedColors from cookie
+    if ( colorPicker.savedColors.length == 0 )
+    {
+      colorPicker.loadColors();
+    }
     var picker = this;
     this.callback = params.callback?params.callback:function(color){alert('You picked ' + color )};
 
+    this.websafe  = params.websafe?params.websafe:false;
     this.cellsize = params.cellsize?params.cellsize:'10px';
     this.side     = params.granularity?params.granularity:18;
 
@@ -288,6 +294,11 @@
       {
         this.table.style.left = (left - (this.table.offsetWidth - element.offsetWidth)) + 'px';
       }
+      // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+      /*@cc_on
+      this.iframe.style.top = this.table.style.top;
+      this.iframe.style.left = this.table.style.left;
+      @*/
     };
 
     /** Draw the color picker. */
@@ -338,7 +349,7 @@
                 picker.backSample.style.color = 'black';
               }
             }
-            td.onclick = function() { picker.callback(this.colorCode); picker.close(); }
+            td.onclick = function() { colorPicker.remember(this.colorCode); picker.callback(this.colorCode); picker.close(); }
             td.appendChild(document.createTextNode(' '));
             td.style.cursor = 'pointer';
             tr.appendChild(td);
@@ -413,7 +424,7 @@
               picker.backSample.style.color = 'black';
             }
           }
-          td.onclick = function() { picker.callback(this.colorCode); picker.close(); }
+          td.onclick = function() { colorPicker.remember(this.colorCode); picker.callback(this.colorCode); picker.close(); }
           td.appendChild(document.createTextNode(' '));
           td.style.cursor = 'pointer';
           tr.appendChild(td);
@@ -429,6 +440,8 @@
         td.colSpan = this.side + 3;
         td.style.padding = '3px';
 
+        if ( this.websafe )
+        {
         var div = document.createElement('div');
         var label = document.createElement('label');
         label.appendChild(document.createTextNode('Web Safe: '));
@@ -439,6 +452,7 @@
         label.style.fontSize = 'x-small';
         div.appendChild(label);
         td.appendChild(div);
+        }
 
         var div = document.createElement('div');
         var label = document.createElement('label');
@@ -466,10 +480,59 @@
 
         td.appendChild(sampleTable);
 
+        var savedColors = document.createElement('div');
+        savedColors.style.clear = 'both';
 
+        function createSavedColors(color)
+        {
+          var is_ie = false;
+          /*@cc_on is_ie = true; @*/
+          var div = document.createElement('div');
+          div.style.width = '13px';
+          div.style.height = '13px';
+          div.style.margin = '1px';
+          div.style.border = '1px solid black';
+          div.style.cursor = 'pointer';
+          div.style.backgroundColor = color;
+          div.style[ is_ie ? 'styleFloat' : 'cssFloat'] = 'left';
+          div.onclick = function() { picker.callback(color); picker.close(); };
+          div.onmouseover = function()
+          {
+            picker.chosenColor.value = color;
+            picker.backSample.style.backgroundColor = color;
+            picker.foreSample.style.color = color;
+          };
+          savedColors.appendChild(div);
+        }
+        for ( var savedCols = 0; savedCols < colorPicker.savedColors.length; savedCols++ )
+        {
+          createSavedColors(colorPicker.savedColors[savedCols]);
+        }
+        td.appendChild(savedColors);
+
         this.tbody.appendChild(tr);
         document.body.appendChild(this.table);
-
+        // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+        /*@cc_on
+        if ( !this.iframe )
+        {
+          this.iframe = document.createElement('iframe');
+          this.iframe.style.zIndex = 999;
+          this.table.style.zIndex = 1000;
+          this.iframe.style.position = 'absolute';
+          this.iframe.style.width = this.table.offsetWidth;
+          this.iframe.style.height = this.table.offsetHeight;
+          this.iframe.border = 0;
+          this.iframe.frameBorder = 0;
+          this.iframe.frameSpacing = 0;
+          this.iframe.marginWidth = 0;
+          this.iframe.marginHeight = 0;
+          this.iframe.hspace = 0;
+          this.iframe.vspace = 0;
+          document.body.appendChild(this.iframe);
+        }
+        this.iframe.style.display = '';
+        @*/
       }
       else
       {
@@ -495,6 +558,50 @@
     this.close = function()
     {
       this.table.style.display = 'none';
+      // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+      /*@cc_on
+      if ( this.iframe ) { this.iframe.style.display = 'none'; }
+      @*/
     };
+  }
 
-  }
\ No newline at end of file
+// array of the saved colors
+colorPicker.savedColors = [];
+
+// add the color to the savedColors
+colorPicker.remember = function(color)
+{
+  // check if this color is known
+  for ( var i = colorPicker.savedColors.length; i--; )
+  {
+    if ( colorPicker.savedColors[i] == color )
+    {
+      return false;
+    }
+  }
+  // insert the new color
+  colorPicker.savedColors.splice(0, 0, color);
+  // limit elements
+  colorPicker.savedColors = colorPicker.savedColors.slice(0, 21);
+  //[mokhet] probably some more parameters to send to the cookie definition
+  // like domain, secure and such, especially with https connection i presume
+  // save the cookie
+  var expdate = new Date();
+  expdate.setMonth(expdate.getMonth() + 1);
+
+  document.cookie = 'XinhaColorPicker=' + escape (colorPicker.savedColors.join('-')) + ';expires=' + expdate.toGMTString();
+  return true;
+};
+
+// try to read the colors from the cookie
+colorPicker.loadColors = function()
+{
+  var index = document.cookie.indexOf('XinhaColorPicker');
+  if ( index != -1 )
+  {
+    var begin = (document.cookie.indexOf('=', index) + 1);
+    var end = document.cookie.indexOf(';', index);
+    if ( end == -1 ) { end = document.cookie.length; }
+    colorPicker.savedColors = unescape(document.cookie.substring(begin, end)).split('-');
+  }
+};

Once again, see ticket #85 for more informations.

mharrisonline · 2006-08-23 03:35:41

Sweet!

mharrisonline · 2006-08-30 05:09:21

Actually, Mokhet, I was able to get everything I wanted by pre-loading a few colors into what you did. I commented out lines 78, 79, and 81:

function colorPicker(params)
{
// if the savedColors is empty, try to read the savedColors from cookie
// if ( colorPicker.savedColors.length == 0 )
// {
colorPicker.loadColors();
// }
var picker = this;

and pre-populated the array with my preferred colors on line 569:

// array of the saved colors
colorPicker.savedColors = ['#FFFF00','#006600','#003366','#990000','#FFFFFF','#000000'];

so now, I have my suggested colors and the colors that user has used all available.

Thanks!

Xinha Discussion Forum

Announcement

#1 2006-08-16 14:44:29

IE color picker problem

#2 2006-08-16 17:37:01

Re: IE color picker problem

#3 2006-08-18 03:58:50

Re: IE color picker problem

#4 2006-08-18 08:44:03

Re: IE color picker problem

#5 2006-08-18 09:07:29

Re: IE color picker problem

#6 2006-08-18 09:22:48

Re: IE color picker problem

#7 2006-08-19 00:55:29

Re: IE color picker problem

#8 2006-08-19 01:33:36

Re: IE color picker problem

#9 2006-08-19 07:35:55

Re: IE color picker problem

#10 2006-08-19 11:55:06

Re: IE color picker problem

#11 2006-08-20 08:48:24

Re: IE color picker problem

#12 2006-08-20 15:26:08

Re: IE color picker problem

#13 2006-08-21 02:06:49

Re: IE color picker problem

#14 2006-08-21 16:21:02

Re: IE color picker problem

#15 2006-08-22 00:40:23

Re: IE color picker problem

#16 2006-08-23 03:35:41

Re: IE color picker problem

#17 2006-08-30 05:09:21

Re: IE color picker problem

Board footer