We Keep Coding

Setting node style in cytoscapeJs

As you can see below not all the node style that i declare are working. I want to make the text inside the node larger and in the documentation i found the code: 'labelFontSize': 100. Than, i want to make the edge weight (that you cannot see in the picture but are present) white, and the code "labelFontColor": "white" isn't working. I am using CytoscapeJs.
Can someone explain to me why this happen?
My code is the following:
var json_obj = response.Cy_json_archi_prima_di_chiusura_atk_supp
var cy = cytoscape({
container: document.getElementById('cy_atk_supp'),
elements: JSON.parse(json_obj),
style: [
{
selector: 'node',
style: {
'shape': 'circle',
'labelFontSize': 100,
'label': 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'color': 'black',
"height": 150,
"width": 150,
'border-width': '2px',
'border-color': 'black',
'background-color': '#399AF9'
//'font-size': 20
}
},
{
selector: 'edge',
style:{
'label': 'data(weight)',
'labelFontSize': 300,
"labelFontColor": "white",
'labelFontWeight': 'bold',
'lineColor': 'data(color)',
'width': 3,
'target-arrow-color': 'data(color)',
"curve-style": "bezier",
'target-arrow-shape': 'triangle',
}
}
],
layout: {
name : 'circle'
}
});
And this is the resulting Graph:

I was checking the wrong library.
For cytoscapeJS these is the correct style option: https://js.cytoscape.org/#style/labels

Why don't the button letters change color?

new Ext.Button({
text: 'testing'
,style: {
'background-color': 'blue',
'color': 'red',
'margin-right' : '15px'
}
,handler : function() {
window.open("https://www.google.es");
}
})
I'm putting in the style 'color': 'red', but the letter is still black and does not change color. Anyone have any idea why ..?

In case someone need..that's my solution:
new Ext.Button({
text: '<div style="color: white">testing</div>'
,style: {
'background-color': '#0099ff',
'border-radius': '5px',
'padding-left': '5px',
'padding-right': '5px',
'padding-top': '1px',
'padding-bottom': '1px'
}
,handler : function() {
window.open("https://www.google.es");
}
})

How can I change the attrs of a custom object in JointJS?

I created a custom element with the JointJS library . The object have two nested Rectangles with two associated Texts.
I want to change his atributtes inside de Model... I only get through JQUERY change his attributes and css, through its ids.
I want to change the attrs in the model and then, update the node to show his new look.
Sorry if I can not explain it well enough, I leave a jsFiddle ->
http://jsfiddle.net/y9ucn/
If you need additional information, please ask.
Thank you.
Here's the class who defines my custom object and on the jsfiddle you can play an example:
MyRect = joint.shapes.basic.Generic.extend({
markup: [
'<g class="rotatable">',
'<g class="scalable">',
'<rect class="firstRect"/><rect class="secondRect"/>',
'</g>',
'<text class="textFirstRect"/><text class="textSecondRect"/>',
'</g>'].join(''),
defaults: joint.util.deepSupplement({
type: 'basic.MyRect',
attrs: {
'.firstRect': {
'stroke': '#0A1317',
'stroke-width': 1,
'fill': '#DBF024',
'width': 100,
'height': 30,
},
'.secondRect': {
'stroke': '#0A1317',
'stroke-width': 1,
'fill': '#DBF024',
'width': 100,
'height': 30,
},
'.textFirstRect': {
'ref': '.firstRect',
'ref-x': .5,
'ref-y': .5,
'y-alignment': 'middle',
'x-alignment': 'middle',
'fill': '#333',
'font-size': 12,
'font-family': 'Calibri,Arial',
},
'.textSecondRect': {
'ref': '.secondRect',
'ref-y': .5,
'ref-x': .5,
'y-alignment': 'middle',
'x-alignment': 'middle',
'fill': '#333',
'font-size': 12,
'font-family': 'Calibri,Arial'
}
}
}, joint.shapes.basic.Generic.prototype.defaults),
initialize: function () {
_.bindAll(this, 'format');
this.format();
joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
},
format: function () {
var attrs = this.get('attrs');
attrs['.secondRect'].transform = 'translate(0,30)';
}
});

You can use the attr() method:
cellView.model.attr('.textSecondRect/text', 'foo');
See the API reference: http://jointjs.com/api#joint.dia.Element:attr.

How to change div style when click to another

I would to change the div css style when click, then change to it primary status when click to another.
i used this code but it just rechange it when click on another div,
here the code am trying:
$('.mydiv').click(
function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500);
}, function () {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});

You're probably looking for the toggle() function :
$('.mydiv').toggle(function() {
$(this).stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$(this).stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});​
And you need jQuery UI to animate colors ?
FIDDLE
EDIT:
You're probably still looking for the toggle() function, but to animate one div when clicking on another div, stop using the this keyword and target the div you're trying to animate :
$('#someDiv').toggle(function() {
$('.mydiv').stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$('.mydiv').stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});​
FIDDLE

Try this:
$('.mydiv').click(function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500, function() {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});
});

escClose in simple modal

I'm working with simple modal, and I'm trying to prevent the close on escape. This says it should be simple, but this doesn't work for me, am I putting this in the wrong place?
$(document).ready(function(){
$("#login_modal").modal({
overlayCss: {
backgroundColor: '#000',
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94,
escClose: false,
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});

Yes, escClose is in the wrong place - it's a parameter on the modal itself, not the containerCss array. You also have extra commas at the end of your overlayCss and containerCss property arrays. This sometimes causes issues in browsers. Try this;
$(document).ready(function(){
$("#login_modal").modal({
escClose: false,
overlayCss: {
backgroundColor: '#000'
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});