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'
};
}
Related
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.
When changing the color of my model I end up with strange shadows on my model:
I tried different models already but had the same problem. Any ideas what might be wrong here?
Code below:
async foo() {
let myMaterial = this.addMaterial(0x7CD254);
const leafNodeIds = await this.getLeafNodes();
this.setMaterial(leafNodeIds, myMaterial);
}
addMaterial(color) {
var material = new THREE.MeshPhongMaterial({
color: color
});
this.viewer.impl.matman().addMaterial(
this.guid(),
material);
return material;
}
static async setMaterial(dbId, material) {
var fragIds = await this.getFragIds(dbId);
fragIds.forEach((fragId) => {
this.viewer.getFragmentList().setMaterial(
fragId, material);
});
}
EDIT: A different angle, showing that these weird shadows also appear on the top
Shout out to Philippe Leefsma for finding the right solution.
You have to turn off the Ambient shadows option by either
deselecting the option in the menu in the UI (gear icon)
or by using the viewer.setQualityLevel(bool,bool) function in your code and setting the first argument to false
why not change a new color....
material.color=new THREE.Color(0,0,0);// like this
forge's phongmaterial is not same as ThreeJS
so shadows will be broken~~~
I extended sap.ui.core.Icon with hover event handling:
sap.ui.define(function () {
"use strict";
return sap.ui.core.Icon.extend("abc.reuseController.HoverIcon", {
metadata: {
events: {
"hover" : {}
}
},
// the hover event handler, it is called when the Button is hovered - no event registration required
onmouseover : function(evt) {
this.fireHover();
},
// add nothing, just inherit the ButtonRenderer as is
renderer: {}
});
});
The event onmouseover is never fired. I also used this extension for sap.m.Button and it works. But I need this for sap.ui.core.Icon.
I also tried this jquery example but it did not work at all.
$("testIcon").hover(function(oEvent){alert("Button" + oEvent.getSource().getId());});
Please, do you have any idea why event handler onmouseover is not called for sap.ui.core.Icon? Or can you propose some other solution?
Bellow is how I added icon to my sap.suite.ui.commons.ChartContainer:
var oFilterIcon = new HoverIcon({
tooltip : "{i18n>filter}",
src : "sap-icon://filter",
hover : function(oEvent){alert("Button" + oEvent.getSource().getId());},
});
this.byId("idChartContainer").addCustomIcon(oFilterIcon);
This is my analysis:
Your new custom Control Icon for hover is correct. If you will use it independently it will work correctly .
However, your custom control will not work as your icons are converted to sap.m.OverflowToolbarButton when you use ChartContainer.
I looked into the source code of Chart Container and below is the code:
sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(i) {
var I = i;
var s = I.getTooltip();
var b = new sap.m.OverflowToolbarButton({
icon: I.getSrc(),
text: s,
tooltip: s,
type: sap.m.ButtonType.Transparent,
width: "3rem",
press: [{
icon: I
}, this._onOverflowToolbarButtonPress.bind(this)]
});
this._aCustomIcons.push(b);
}
So, you Icon is not used but its properties are used. As this is standard code, your hover code of Custom icon is not passed along.
One solution will be to add the onmouseover to sap.m.OverflowToolbarButton :
sap.m.OverflowToolbarButton.prototype.onmouseover=function() {
alert('hey')
};
However, this is dangerous as all OverflowToolbarButton button start using this code and I will not recommend it.
Next solution would be to overwrite the private method:_addButtonToCustomIcons ( again not recommendred :( )
sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(icon) {
var oIcon = icon;
var sIconTooltip = oIcon.getTooltip();
var oButton = new sap.m.OverflowToolbarButton({
icon : oIcon.getSrc(),
text : sIconTooltip,
tooltip : sIconTooltip,
type : sap.m.ButtonType.Transparent,
width : "3rem",
press: [{icon: oIcon}, this._onOverflowToolbarButtonPress.bind(this)]
});
this._aCustomIcons.push(oButton);
//oButton.onmouseover.
oButton.onmouseover = function() {
this.fireHover();
}.bind(oIcon);
};
Let me know if this helps u. :)
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'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 () {
});
}