how to create a button in cytoscape.js

1,200 views

Skip to first unread message

David Tabernero

unread,

Oct 15, 2015, 8:28:35 AM10/15/15

to cytoscape-discuss

Hi,
I'm trying to create a button in my html with cytoscape but I can't make click in the button. Where and how shoud I create?
thanks and sorry for my english!
My code:
<!DOCTYPE html>

<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="[An example of getting started with Cytoscape.js]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/arbor.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/springy.js"></script>
<style id="jsbin-css">
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="cy"></div>
<form><input type="button" value="Download Now" onClick="window.location.href='yourpage.html'"></form>
<script id="jsbin-javascript">
var options = {
    name: 'breadthfirst',
    fit: true,
    directed: true,
    spacingFactor: 0.75,
    avoidOverlap: true,
    padding: 1
};
$('#cy').cytoscape({
style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
        'text-valign': 'center',
        'color': 'black',
        'font-size': '10',
        'text-outline-width': 1,
        'text-outline-color': '#888'
      })
    .selector('Edge arrow')
    .css({
        'source-arrow-color': 'red',
        'color': 'black'
        })
    .selector('edge')
      .css({
        'width': '1',
        'source-arrow-color': 'black',
        'target-arrow-color': 'black',
        'color': 'black',
        'line-color': 'black',
        'target-arrow-shape': 'triangle'
      })
    .selector(':selected')
      .css({
        'background-color': 'red',
        'line-color': 'red',
        'target-arrow-color': 'red',
        'source-arrow-color': 'red'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),
elements: {
    nodes: [

{ data: { id:'job.000.174.763.001.sh', name: '763' } },
...........
] ,
edges: [
{ data: { source: 'job.000.174.772.001.sh', target: 'job.000.174.770.001.sh' } },
...............
    ]
},

ready: function(){
    window.cy = this;

    // giddy up...
<form><input type="button" value="Download Now" onClick="window.location.href='yourpage.html'"></form>
    cy.elements().unselectify();
    cy.layout( options );

    cy.on('tap', 'node', function(e){
      var node = e.cyTarget;
      var neighborhood = node.neighborhood().add(node);

      cy.elements().addClass('faded');
      neighborhood.removeClass('faded');
    });

    cy.on('tap', function(e){
      if( e.cyTarget === cy ){
        cy.elements().removeClass('faded');
      }
    });
}
});
</script>
</body>
</html>

Max Franz

unread,

Oct 15, 2015, 1:26:53 PM10/15/15

to cytoscape-discuss

You're asking about a general HTML/CSS issue. This is a group related to Cytoscape discussion.

Your issue is related to your HTML elements and CSS. Here's a comprehensive reference on CSS: https://developer.mozilla.org/en-US/docs/Web/CSS

If you've read through the docs and still have trouble, you may want to post a question on Stackoverflow under the general `css` tag.

Reply all

Reply to author

Forward

0 new messages