I have an uml diagram and I want to change the color of one cell when the cursor is on it.
I tried to do it programmatically, but it doesn't work.
Here's my code:
paper.on('cell:mouseover', function(cellView, evt, x, y) {
var cell = graph.getCell(cellView.model.id)
if (cell.isElement()) {
cellView.model.attr({'uml-class-name-rect': { fill: '#33C3FF' }});
}
}
paper.on('cell:mouseenter', function(cellView) {
var cell = graph.getCell(cellView.model.id);
if (cell.isElement()) {
cellView.model.attr({'.uml-class-name-rect': { 'fill': '#33C3FF' }});
}
});
CSS of class 'uml-class-name-rect' can't be set simultaneously through a global css file.
Related
Basically, I have to generate the same color, chosen randomly, for 2 different bodies. Does anyone have any tip on how I could link the two objects to have the same random colour? Evertime a condition happens, the colour should refresh and both bodies should have that particular colour.
Thx a lot!
//btw any code language is useful
The simple solution is to generate the random color once and then set the color of both bodies to that color. Put that in a refreshColors function and call that function when your condition is met.
if (condition) {
refreshColors()
}
function refreshColors () {
// generate color
let color = generateRandomColor()
// set Body A color
body_a.style.color = color
// set Body B color
body_b.style.color = color
}
I recommend using a custom property (also known as CSS variables):
function randomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r},${g},${b})`;
}
const root = document.documentElement;
root.style.setProperty("--random-color", randomColor());
.element-1,
.element-2 {
background-color: var(--random-color);
}
<p class="element-1">Element 1</p>
<hr />
<p class="element-2">Element 2</p>
If you want you can set the custom property to some default value in your CSS file:
:root {
--random-color: rebeccapurple;
}
And make sure your elements use this property, using the CSS var() function:
.element-1,
.element-2 {
background-color: var(--random-color);
}
Then you overwrite that property in you if statement using style.setProperty:
if (condition) {
const root = document.documentElement;
root.style.setProperty("--random-color", randomColor());
}
Read more about dynamically setting custom properties in this article.
for some reasons, this code does not want to work; its supposed to be a convenient alternative to using "arrays" for navigation buttons whereby the clicking of one button removes the click state from the rest -
nav_mc.buttonMode=true;
nav_mc.addEventListener(MouseEvent.MOUSE_OVER, navOver);
nav_mc.addEventListener(MouseEvent.MOUSE_OUT, navOut);
nav_mc.addEventListener(MouseEvent.CLICK, navClick);
nav_mc.nav1_mc.mouseChildren=false;
nav_mc.nav2_mc.mouseChildren=false;
nav_mc.nav3_mc.mouseChildren=false;
nav_mc.nav4_mc.mouseChildren=false;
var currentNav:MovieClip;
function navOver(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
trace(navItem.name);
if (navItem!=currentNav) {
navItem.gotoAndStop(2);
}
}
function navOut(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
if (navItem!=currentNav) {
navItem.gotoAndStop(1);
}
}
function navClick(e:MouseEvent):void {
var navItem:MovieClip=e.target as MovieClip;
if (currentNav!=null) {
navItem.gotoAndStop(1);
}
currentNav=navItem;
navItem.gotoAndStop(3);
}
please, been on this for hours now, what am I missing out?
My guess is: you should change the navItem variable to the currentNav, inside of the if block here:
if (currentNav!=null) {
navItem.gotoAndStop(1);
}
It looks like you want to make some changes to the current active item (currentNav).
UPD.: My advice is: try to change the code above to the next code
if (currentNav!=null) {
currentNav.gotoAndStop(1);
}
UPD 18-11-2015, Toggle buttons:
It's hard to say if my code works or not (I don't have the whole project to test it), but it looks like it should.
function navClick(e:MouseEvent):void
{
var navItem:MovieClip=e.target as MovieClip;
if (currentNav != null)
{
currentNav.gotoAndStop(1);
}
if(currentNav == navItem)
{
currentNav = null;
}else
{
currentNav = navItem;
navItem.gotoAndStop(3);
}
}
I am having unexpected problems with a couple of Nvd3 charts. I coded them withouht using the nvd3 css file (nv.d3.min.css). Without it everything was ok but when I added it suddendly the second chart took a lot of space (1500x1500). The normal size was 450x450 but now it is
If i look in the console of chrome and uncheck the style atributes "width: 100%;" and "height: 100%;" it works (actually with only one). The other thing that changes de css atributes is the "user agent stylesheet".
I can´t understand why because i thought that the size was explicitely coded while the configuration of the chart
HTML
<div id="charts">
<div id="piechart" ><svg></svg></div>
<div id="chart"><svg></svg></div>
</div>
NVD3
function setupGraph(data_graph) {
nv.addGraph(function() {
var pieChart = nv.models.pieChart();
pieChart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_graph[0].values;
pieChart.tooltipContent(function(key, y, e, graph) {
var x = String(key);
var y = String(y);
tooltip_str = '<center><b>'+x+'</b></center>' + y;
return tooltip_str;
});
pieChart.showLabels(true);
pieChart.donut(false);
pieChart.showLegend(true);
pieChart
.x(function(d) { return d.label })
.y(function(d) { return d.value });
pieChart.width(450);
pieChart.height(450);
d3.select('#piechart svg')
.datum(datum)
.transition().duration(350)
.attr('width',450)
.attr('height',450)
.call(pieChart);
nv.utils.windowResize(chart.update);
return chart;
});
}
function setupGraph2(data_graph) {
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label }) //Specify the data accessors.
.y(function(d) { return d.value })
//.valueFormat(d3.format(',.2f'))
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
.tooltips(false) //Don't show tooltips
.showValues(true) //...instead, show the bar value right on top of each bar.
.transitionDuration(350)
;
chart.width(450);
chart.height(450);
d3.select('#chart svg')
.datum(data_graph)
.attr('width',450)
.attr('height', 450)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
Can anybody see what is happening?
Just override the default width and height properties of the nvd3.css stylesheet, creating a rule in your stylesheet, and ensuring it is loaded after the nvd3 stylesheet.
The last rule (with the same specificity) wins:
svg {
width : auto;
height : auto;
}
or create a more specific rule to act on your svgs only, like:
#charts svg {
width : 450px;
height : 450px;
}
How can I change the barChart yaxis-tick color
.jqplot-axis .jqplot-yaxis .jqplot-yaxis-tick{
color: green;
}
I try any option that I could find (also using Firebug) and nothing is working
Any idea
Thanks
Attach the following extender function on your barChart:
function ext() {
this.cfg.axes.yaxis.tickOptions = {
textColor : '#00ff00'
};
}
I've never seen a hover effect like this before, and I'm trying to understand how it's achieved. You'll notice in this example, that when a user hovers over a link, the color the link turns can be any one 1 of 5 colors that are assigned within the style sheet (see below) at random.
How do you create this hover effect? Can it be done purely with CSS?
a:hover {
color:#1ace84;
text-decoration: none;
padding-bottom: 2px;
border: 0;
background-image: none;
}
a.green:hover { color: #1ace84; }
a.purple:hover { color: #a262c0; }
a.teal:hover { color: #4ac0aa; }
a.violet:hover { color: #8c78ba; }
a.pink:hover { color: #d529cd; }
Since a random factor is introduced, I don't think there's a way of doing it purely with CSS.
Here's my simple approach to the problem, using jQuery.
You can see a working example here: http://jsfiddle.net/GNgjZ/1/
$(document).ready(function()
{
$("a").hover(function(e)
{
var randomClass = getRandomClass();
$(e.target).attr("class", randomClass);
});
});
function getRandomClass()
{
//Store available css classes
var classes = new Array("green", "purple", "teal", "violet", "pink");
//Get a random number from 0 to 4
var randomNumber = Math.floor(Math.random()*5);
return classes[randomNumber];
}
The key piece of jQuery code is loaded in the footer of the page.
Please pay attention to the authors comment on the script, or seek the author's permission to reuse it.
/*
Code below this point is not licensed for reuse,
please look and learn but don't steal
*/
var lastUsed;
function randomFrom(arr){
var randomIndex = Math.floor(Math.random() * arr.length);
lastUsed = arr[randomIndex];
return lastUsed;
}
color_classes = ['green','purple','violet','teal','pink'];
function initLinks() {
$('#wrap a').hover(function() {
new_classes = color_classes.slice();
var index = $.inArray(lastUsed, new_classes);
new_classes.splice(index, 1);
var classes = $(this).attr('class');
if (classes) {
classes.split(' ');
$(classes).each(function(i, className) {
var index = $.inArray(className, new_classes);
if (index>0) {
new_classes.splice(index, 1);
}
});
}
$(this).removeClass(color_classes.join(' ')).addClass(randomFrom(new_classes));
}, function () {
});
}