Change the background colour of a Raphael "Label" - javascript

If I create a Label using Raphael, the default style is a black block with white text.
How can I change the background box colour, but not the text colour? I've tried:
paper.label(x, y, value).attr("fill", colour)
but that also fills the text and I end up with invisible text.
I also can't simply change the default colour in this function because I need to have a few different ones depending on a line that it's added to:

As you noticed,
Paper.label(x, y, value).attr(
fill : color
);
changes both the background fill color and the text fill color, resulting in invisible text.
Unspecified correctly explained that this is an array, so each portion must be altered separately, as they illustrated. However, they didn't mention the easiest way to change update both sets of attributes, so I wanted to share this tip. In order to do this, change the attributes into an array with two sets. The first element is the background, and the second is the text.
Paper.label(x, y, value).attr([{
fill : backgroundColor
}, {
fill : textColor
}]);
You can add any other applicable attributes to each part. Here is a working example: http://jsfiddle.net/VzpeG/1/

I was working on a graph similar to this and used:
.attr({fill: "#EF7C4D"})
Let me know how this goes...

var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});​​​​
text.label().attr({fill:"#f00"});
Here's a working fiddle http://jsfiddle.net/vpGyL/216/
Set any color on text or on label both apply separately...Hope this helps !
Digging in furthur...Paper.label(x,y,text) is different from Element.label()
If you look at the source code Paper.Label(x,y,text) is a set of rectangle element & text element, so doing .attr({fill:"SomeColor"}) applies to the entire set, hence both rectangle & text share same color(Hence the invisibility).
Oh yeah If you just want to change the text color do this Raphael.g.txtattr.fill = "#yourColorCode" But this changes the text color globally on all the charts and tooltips(don't seem to be a good idea).
While Element.Label as the documentation says is takes the context element & embed in a label tooltip, basically whatever element you use, applying .label will embed it inside a rectangle

Related

Using JS to apply Hue-Rotation, Saturation, and Lightness Filters at the same time

I'm trying to get the colour of an image to change from Red to a specific other colour with CSS filters through Javascript. That way the user can select which colour they want and it'll change the colour of the image to that colour. I can get the button to change, Hue-Rotation, Saturation, or Lightness, but not all at once.
How do I make a function that sets all three at once?
What I have at the moment:
function OrdReset() {
document.getElementById("Ordinary").style.webkitFilter = "hue-rotate(0deg) saturation(0%) lightness(100%)";
}
Woops! Apparently, calling Saturate(%) "Saturation(%)", and Brightness(%) "Lightness(%)" breaks your code.

select colour from one object and then click on another object and change its background colour

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

Livecycle Javascript Change color of Circle Object

I am having difficulty accessing the circle object to change its color programmatically. I have tried:
form1.Page1.Subform1.Circle.ui.oneOfChild.border.fill.color = "1,191,158";
but that seems to fill the bounding box of the circle object. I want to change the circle itself. I noticed that within the livecycle UI when you change a color it's within the Object tab as opposed to other objects that have the color in the Border tab. Script assist doesn't seem to help either.
It looks like it is impossible.
This code gives such error:
Circle1.fillColor = "255,255,0";
Invalid property set operation; Draw does not have a "fillColor"
property
And this (your) code give such error:
Circle1.ui.oneOfChild.border.fill.color.value = "0,255,255";
Invalid property extraction operation; DefaultUi does not have the
property "border"
But you can create cicrles with the same size, place them on the same place, then fill them with different colors (in LC Designer), then make one of them invisible. And when it is needed just change circles visibility like that:
Circle1.presence = "invisible";
Circle2.presence = "visible";

Change content color depending on background color on scroll

I am looking to find a method of changing content color (overlaying content) dynamically as a user scrolls a page, depending on what the background color is. Mainly I just want to give the content a light color if against a dark bakground, and vice versa - it just needs to be either black or white. How would one approach this using JavaScript? Any ideas?
You can use function document.elementFromPoint( x, y ) that returns the most deeply nested child of the document at point ( x, y ).
You can check the background color of the element at point somewhere near the element that changes color using that function and the computed style of the element that is on the background.
Although not perfect, this is where i would start.

three.js mouseover on object only not background

I am new to Three.js. I am trying to show tooltip on cubes/blocks only for that I am successful with the help of this link http://stemkoski.github.io/Three.js/Mouse-Tooltip.html If you see the tooltip changes the color and text on background(checkboxes) as well. I don't want that. I only want to show tooltip on the cubes.
Also, what would be the possible way to show html tags in the tooltip? As you cannot insert html tags in
context1.fillText( '<h1>Hello World</h1>', 4,20 );
I also tried to implement jQuery tooltips moving towards the mouse pointer but all in vain.
I would really appreciate your help with this.
To remove the highlight colors, remove lines 192-194 and 197-200:
// restore previous intersection object (if it exists) to its original color
if ( INTERSECTED )
INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
and
// store color of closest object (for later restoration)
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
// set a new color for closest object
INTERSECTED.material.color.setHex( 0xffff00 );
In addition, to have better label customization options, I have written a different demo that you may want to consider at: http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html -- if you want to insert HTML tags to format the font (as it appears you do), instead consider drawing text on a canvas, and on the canvas you can set options like font family, size, weight, etc., and then use the canvas as the image for your tooltip. Again, to see a working implementation of the code, please see the link above.
Good luck!

Categories