Comments (21)
Hi @ct-js
thanks, great finding.
I was never spending enough time for the implementations,... so I guess this is the result ;o)
Thanks again, I committed the fix already.
from colorpicker.
@PitPik , D:
TypeError: Cannot read property 'nodes' of undefined
This one appeared when I was trying to pick a color, just after clicking on color field.
Also I noticed that colorPicker is displayed in wrong place if it was fired on absolutely positioned elements, or on an element inside a block with position: relative|absolute styling. So colorPicker works with parent's local coordinates, but displayed at absolute ones.
from colorpicker.
Btw, how can we embed such a cute color ring displayed on http://www.dematte.at/cpn/ ? :3
from colorpicker.
@ct-js
The positioning bug is fixed...
do you have a jsfiddle account? Could you set up a situation there so I can see what's going wrong. Here, everything seems to be fine when I'm trying to pick a color.
For the ring,... just look at the source code of index.js
from colorpicker.
Well, it works fine on codepen.io... I can pick colors on it, but colorPicker doesn't work in my nw.js app. Maybe there are some node-like variables like fs
, md
, path
, process
, events
etc. in source code?
pen http://codepen.io/anon/pen/YPxBqL
I'm going to test colorPicker with its uncompressed version; will reply with error placement soon...
from colorpicker.
Now it doesn't even create colorPicker form T___T Used latest version
TypeError: Cannot read property 'getElementsByTagName' of undefined
at getInstanceNodes (file:///D:/ct/build/app/js/main.js:1088:24) // <--- this is its first line: colorPicker == undefined
at initInstance (file:///D:/ct/build/app/js/main.js:928:25) // THIS.nodes = _nodes = getInstanceNodes(buildView(THIS), THIS);
at new ColorPicker (file:///D:/ct/build/app/js/main.js:810:4) // the end of ColorPicker constructor: initInstance(this, options || {});
at createInstance (file:///D:/ct/build/app/js/main.js:2198:13) // return new initConfig.klass(initConfig);
at HTMLInputElement.<anonymous> (file:///D:/ct/build/app/js/main.js:2208:32)
at HTMLInputElement.n.event.dispatch (file:///D:/ct/build/app/js/main.js:9:6444)
at HTMLInputElement.r.handle (file:///D:/ct/build/app/js/main.js:9:3219)
from colorpicker.
@ct-js
Now I see your problem (...took me a while to find out):
You probably forgot to load colorPicker.data.js. I think I made this a bit to confusing or it is just a lack of documentation (sorry for the confusion)...
If you run in single file mode (or source file mode), you have to load ./colors.js (the color module), ./colorPicker.data.js (the HTML, CSS and images for the UI), ./colorPicker.js (the UI itself)...
...or ./color.all.min.js instead that contains all three files.
The implementation file jQuery_implementation/jqColor.js must then be loaded to be able to run it with jQuery.
jQuery_implementation/jQueryColorPicker.min.js contains again all four files...
Let me know how this works out for you.
Cheers
from colorpicker.
BTW: the color circle on the demo page:
- either see the index.js how it's done (documentation will show you... less memory)
- or, the more KBs solution: inspect the page with DEV-tools (Chrome) and find the canvas (mark it...), then type $0.toDataURL() in your browser-console. This will give you a link, when clicked, opens a new tab with the image that you then can download and use...
from colorpicker.
Well, this error disappeared, but I have Cannot read property 'nodes' of undefined
again.
the color circle on the demo page
I meant the whole circular colorPicker :) It is really useful for painters to use such color pickers rather than rectangular ones. Color theory, triads, etc ;) Maybe there will be another colorPicker layout type? :)
from colorpicker.
... in colorPicker.js there is 5 spots where I use .node
. It is hard to 'guess' an error if I don't see the code or at least some more error information. Maybe you can get me more information??
BTW: are you also using AngularJS?
from colorpicker.
Maybe you can get me more information??
I'll try to...
BTW: are you also using AngularJS?
😷 No, I'm not. JS + jQuery + Node.js + nouislider
from colorpicker.
Hey, I just updated colorPicker.js (and all minified files). Maybe you want to try them first. It might bring you a solution.
from colorpicker.
@ct-js
Maybe http://www.dematte.at/cpn2/ would do it for you as well. I guess you don't need all the functionalities of colorPicker (it's actually great for more complex color manipulation, etc.).
The other one will be only about 4KB all together and still has a rich and nice color model (works with a subset of colors.js)... What do you think? I'll be finishing it in a few days, the you can try to implement it into your project.
from colorpicker.
Trying old version. You are too fast :D So, I take
colors.js
colorPicker.data.js
colorPicker.js
jqColor.js
And concatenate them in exactly this way. The error points to the doEventListeners
function found in jqColor.js
file, exactly here.
The reason is that there are no cP in colorPickers
array (it's empty as array but has evt: true
), so the current one can't be retrieved. Besides that, it seems that no arguments except elm
were specified.
from colorpicker.
@ct-js
I'm too fast :D that's funny!
I just committed a new version of jqColor.js. Maybe that does it then...
from colorpicker.
Off:
_html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
'lass="cp-z-cursor"></div></div><div class="cp-xy-slider"><div cl' +
'ass="cp-white"></div><div class="cp-xy-cursor"></div></div><div ' +
'class="cp-alpha"><div class="cp-alpha-cursor"></div></div><div c' +
'lass="cp-display"></div></div>'
Optimization? Which optimization?
:D
String concatenation is a complex (and long) process for computer, you would better just escape line breaks, like this:
str = 'Olala, what a long \
string!';
from colorpicker.
I just committed a new version of jqColor.js. Maybe that does it then...
IT WORKS!!! 🎊 🎊 🎊 🎊 🎊
Thank yoooouuuu ^_______^
from colorpicker.
:D I know... this is work in progress... the HTML will go anyhow ;o) for now I just want it to work... then there will be optimization...
from colorpicker.
Oh, great to hear that it finally works... If you find more issues, then let me know.
I assume I can close this issue then.
Cheers and good luck!!
from colorpicker.
V2: I guess _css
variable should create a style
tag, but it doesn't, so without it it is just a pile of invisible blocks. Maybe it is just WIP ^-^ But with css it works great for me too.
Thank you again :3 Truthly, your tool is one of two (another one is a small bootstrap component) well-looking and functioning colorPickers in the world for today. And your is more cool 😎
Yeah, the issue can be closed. (hooray!)
from colorpicker.
@ct-js
Hi again. The new one is onlin: https://github.com/PitPik/tinyColorPicker
from colorpicker.
Related Issues (20)
- How to use the Color Wheel picker?
- Unable to add letters to hex code if hex starts with 0
- potential failures with "document"
- WebGL support idea
- Plugin crashes when js files are called from html's head tag instead of body HOT 2
- 8 Digit Hex Code
- Reset all pickers with a single button click [jQuery version]
- Gradients Suggestion HOT 2
- Android web views and Chrome bad rendering HOT 1
- How initialize colorPickers without clicking on element HOT 7
- How to access colorPicker object? HOT 1
- positionCallback
- allMixDetails: false not working
- Picking color from L*a*b parameters HOT 2
- Color is not changing when colorpicker windows is opened and color defined programmatically
- active dev? HOT 1
- CMYK issues HOT 2
- How i can change the color of a div ?
- Integrate with Angular 8 project
- Can't get color-picker to open from input field
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from colorpicker.