maxkfranz/code.js

## code.js
$(function(){ // on dom ready

var cy = cytoscape({
  container: $('#cy')[0],

  boxSelectionEnabled: false,
  autounselectify: true,

  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
        'text-valign': 'center',
        'color': 'white',
        'text-outline-width': 2,
        'text-outline-color': '#888'
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'text-outline-color': 'black'
      }),

  elements: {
    nodes: [
      { data: { id: 'desktop', name: 'Cytoscape', href: 'http://cytoscape.org' } },
      { data: { id: 'js', name: 'Cytoscape.js', href: 'http://js.cytoscape.org' } }
    ],
    edges: [
      { data: { source: 'desktop', target: 'js' } }
    ]
  },

  layout: {
    name: 'grid',
    padding: 10
  }
});

cy.on('tap', 'node', function(){
  try { // your browser may block popups
    window.open( this.data('href') );
  } catch(e){ // fall back on url change
    window.location.href = this.data('href');
  }
});

}); // on dom ready

## index.html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Linkout example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="code.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

## style.css
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#info {
  color: #c88;
  font-size: 1em;
  position: absolute;
  z-index: -1;
  left: 1em;
  top: 1em;
}
	$(function(){ // on dom ready

	var cy = cytoscape({
	container: $('#cy')[0],

	boxSelectionEnabled: false,
	autounselectify: true,

	style: cytoscape.stylesheet()
	.selector('node')
	.css({
	'content': 'data(name)',
	'text-valign': 'center',
	'color': 'white',
	'text-outline-width': 2,
	'text-outline-color': '#888'
	})
	.selector(':selected')
	.css({
	'background-color': 'black',
	'line-color': 'black',
	'target-arrow-color': 'black',
	'source-arrow-color': 'black',
	'text-outline-color': 'black'
	}),

	elements: {
	nodes: [
	{ data: { id: 'desktop', name: 'Cytoscape', href: 'http://cytoscape.org' } },
	{ data: { id: 'js', name: 'Cytoscape.js', href: 'http://js.cytoscape.org' } }
	],
	edges: [
	{ data: { source: 'desktop', target: 'js' } }
	]
	},

	layout: {
	name: 'grid',
	padding: 10
	}
	});

	cy.on('tap', 'node', function(){
	try { // your browser may block popups
	window.open( this.data('href') );
	} catch(e){ // fall back on url change
	window.location.href = this.data('href');
	}
	});

	}); // on dom ready
	<!DOCTYPE html>
	<html>
	<head>
	<link href="style.css" rel="stylesheet" />
	<meta charset=utf-8 />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
	<title>Linkout example</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
	<script src="code.js"></script>
	</head>
	<body>
	<div id="cy"></div>
	</body>
	</html>
	body {
	font: 14px helvetica neue, helvetica, arial, sans-serif;
	}

	#cy {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	}

	#info {
	color: #c88;
	font-size: 1em;
	position: absolute;
	z-index: -1;
	left: 1em;
	top: 1em;
	}