In my website, I am using a color picker jquery plugin for picking colors from an image.I have change the cursor to an eyedropper icon using CSS. Right now,while clicking on the image,the color pointed by the upper part of cursor is picked.Since it is eyedrope cursor, i need to use its lower part to pick colors. Please help me out.
This is the cursoram that using :
Thanks
cursor:url(http://www.yourwebsite.com/yourcursorname.cur) 0 16,default;
Tell it where to set the x y coords in your css when declaring the cursor.
Related
Im making a game but I'm currently stuck on a problem that I've been trying to solve for a while now. I need to select a circle which is blue and then click on a clear circle and that clear circle needs to then change its attribute background to the blue but only when i click on the clear circle.
supposing the first circle has id "circle-1" and the second "circle-2", and supposing you specify the color of your elements using the css property "background-color", you can do the following:
document.querySelector('#circle-2').style.backgroundColor = window.getComputedStyle(document.querySelector('#circle-1')).getPropertyValue('background-color');
Of course you have to bind this code on click of the circle and adapt it using $(this) to select the current color in order to make it dynamic
First question as a new member
I need help creating a rotate button. The js fiddle is for a ruler and I would like to be able to display the ruler horizontally and vertically. Currently the default is Horizontal. A user can rotate the ruler using the rotate controls but as a quick option I would like for them to be able to set the ruler to Horizontal. Ideally the numbers would also be displayed Vertically but this might be asking too much.
My js fiddle is: http://jsfiddle.net/cAslin/7ws41p8a/92/
Currently there is a rotate text field but I would like that removed and only the option of horizontal and vertical being and option. I want to retain the rotate option via the icons.
I would appreciate any help I could get on this as I have very little coding experience or knowledge.
Thank you!
<span id="draggable-element"><span style="margin-right:30px;" title="Drag to rotate"><input id="clickable" class="click1" type="image" style="padding-right:0px;padding-top:0px;transform: scaleX(-1);" src="https://s15.postimg.org/76smxbgmz/cycle.png"/></span>
Get the Fiddle: http://jsfiddle.net/7ws41p8a/95/
I changed the target ID var target2 = $('#canvas'); in rot function. The ruler rotates
If my answer helped, don't forget to mark it as correct
I would like to know,
how can I move a gridLine up/down dynamically with the mouse in d3.js ?
Thanks a lot :)
The way I have done this in the past is to add an extra horizontal or vertical line to your graph and mark it as hidden.
Then whenever an element is moused-over show the line, whenever the element is moused-out hide the line again. You would need to set the X and Y values of the line such that it matches the location of the element the cursor is hovering over.
This is similar to the way showing/hiding tooltips work: https://gist.github.com/biovisualize/1016860 except you would not use a div (you would use a line) and would not use the location of the mouse pointer (you would use the x and y of the element).
I'm currently using the Dynamic drive java script code for a rotating banner on one of our company websites.
The problem I'm having is that the initial background colour for the banner when loading into the page is pure black, and I'm struggling to find where I can change that.
example website: http://www.sakawater.com
You'll notice the initial BG is black, going to white - which does not look great.
The javascript comes from : http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
I've not modified much apart from the scale of the banner and fade speed, can someone point me in the right direction on how to fix/change the initial loading background colour please? Or how to remove having a BG for that at all.
Thank you,
Navson
in fadeslideshow.js Try to search gallerylayer and you will see this line:
setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
Here you will see the color black, change it accordingly.
I already asked how HSV color pickers work, now I would like to know how RGB color pickers with JavaScript work. Those that don't use the HTML5 Canvas API. Could somebody explain me the concept behind them?
Here is an example of what I mean: http://www.eyecon.ro/colorpicker/
Note: I'm not looking for ready to use jQuery color pickers. I want to develop my own one for learning purposes! jQuery for the solution is fine though!
Assuming you want to pick RGB values between 0 and 255, similar to the example you are linking to, here's how I would approach it:
Generate 1 static image (1x256 pixels) that contains the 'rainbow gradient' shown in the slider on the right
Generate 1 static overlay image RGBA image of 256x256 pixels as follows
top left: R=1 G=1 B=1 A=1
top right: R=0 G=0 B=0 A=0
bottom left: R=0 G=0 B=0 A=1
bottom right: R=0 G=0 B=0 A=1
Use the first image as a background for the slider. It should generate the color to be displayed in the top left corner of the color picker. Use mouse coordinates to find the actual Y value for the color
create a 'background' div (256x256 px) that has the color picked with the slider. Use the second static image as on overlay div on top of it. With the alpha values it should give you a white and 2 black corners and one corner of the color you need.
use the mouse coordinates in that that square. The color will have to be calculated.
I'm leaving creating the formulas and images to you. :)