I want to load some data from a JSON file and graph them in Sigma.js, and bind overEdge and outEdge event with all edges. I read some examples in official document and solved the problem when I want to bind overNode event in my code, but the the same way using to bind overEdge event doesn't work. Here is my code:
<script>
sigma.parsers.json(
'../data/data.json',
{
container: 'graph-container',
type: 'canvas',
settings: {
defaultNodeColor: '#ec5148',
enableEdgeHovering: true,
edgeHoverColor: 'edge',
defaultEdgeHoverColor: '#000',
edgeHoverSizeRatio: 1,
edgeHoverExtremities: true,
}
},
function(s) {
s.graph.nodes().forEach(function(n) {
s.bind('overNode',
function(e) {
alert("node");
}
);
});
s.graph.edges().forEach(function(n) {
s.bind('overEdge',
function(e) {
alert('edge');
}
);
});
}
);
</script>
When I run my code, it seems that
enableEdgeHovering: true,
made some mistake like
Uncaught Error: The edge events feature is not compatible with the WebGL renderer
but when I delete that, my edge can not bind events. I see official example do the same, and their code can work on my browser, but my code can't.
May it isn't actually for you. This is working example from my project:
<div id="container">
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
<div id="graph-container"></div>
</div>
<script>
s = new sigma({
graph: 0,
container: 'graph-container',
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
doubleClickEnabled: false,
minEdgeSize: 0.5,
maxEdgeSize: 4,
enableEdgeHovering: true,
edgeHoverColor: '#000',
defaultEdgeHoverColor: 'red',
edgeHoverSizeRatio: 1,
edgeHoverExtremities: true,
defaultEdgeLabelSize: 20,
edgeLabelSize: 'proportional',
minArrowSize: 10,
}
});
sigma.parsers.json('data/arctic.json', s);
s.bind('overNode outNode clickNode doubleClickNode rightClickNode', function(e) {
console.log(e.type, e.data.node.label, e.data.captor);
});
</script>
Related
I am using cubeportfolio.js as part of a bootstrap template. It seems to be working but the custom .js part of the template is causing an error in the console.
The template I am using can be seen here, which is working without errors.
The error is 'Uncaught Error: cubeportfolio is already initialized. Destroy it before initialize again!'
For confidentiality reasons I can't post all the code but I have called the jquery.cubeportfolio.min.js at the bottom of the with the custom .js underneath.
Here is the custom .js
(function($, window, document, undefined) {
'use strict';
var gridContainer = $('#grid-container'),
filtersContainer = $('#filters-container'),
wrap, filtersCallback;
/*********************************
init cubeportfolio
*********************************/
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: '*',
animationType: 'slideLeft',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100
});
/*********************************
add listener for filters
*********************************/
if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');
wrap.on({
'mouseover.cbp': function() {
wrap.addClass('cbp-l-filters-dropdownWrap-open');
},
'mouseleave.cbp': function() {
wrap.removeClass('cbp-l-filters-dropdownWrap-open');
}
});
filtersCallback = function(me) {
wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
me.addClass('cbp-filter-item-active');
wrap.trigger('mouseleave.cbp');
};
} else {
filtersCallback = function(me) {
me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
};
}
filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
var me = $(this);
if (me.hasClass('cbp-filter-item-active')) {
return;
}
// get cubeportfolio data and check if is still animating (reposition) the items.
if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
filtersCallback.call(null, me);
}
// filter the items
gridContainer.cubeportfolio('filter', me.data('filter'), function() {});
});
/*********************************
activate counter for filters
*********************************/
gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function() {
// read from url and change filter active
var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
item;
if (match !== null) {
item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
if (item.length) {
filtersCallback.call(null, item);
}
}
});
})(jQuery, window, document);
You have to destroy it before init:
gridContainer.cubeportfolio('destroy');
/*********************************
init cubeportfolio
*********************************/
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: '*',
animationType: 'slideLeft',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100
});
It is initialized somewhere else and therefore it throws an error because it doesn't know with which cubeportfolio() instance has to deal.
From the error output I’m pretty sure that you instantiate Cube Portfolio twice for the same element.
If you want to instantiate again the plugin call on that element the method destroy
jQuery('#my-grid').cubeportfolio('destroy');
and then the init method to instantiate again
jQuery('#my-grid').cubeportfolio(options);
If you need further help please send me a link to your website to check your code.
I'm using the javascript library tooltipster and I don't know why the text is wrapping in the tooltip box.
HTML:
<div id="spanBackground" style="background: rgba(238, 0, 140, 120);"
class="tooltipjs" title="Touch to interact">
Javascript:
function AnimateUpDown(toolTipElement) {
$(toolTipElement).animate({ top: '+=20' }, 1000);
$(toolTipElement).animate({ top: '-=20' }, 1000, AnimateUpDown);
}
$(document).ready(function () {
$('.tooltipjs')
.tooltipster(
{
animation: 'grow',
arrow: false,
//Custom trigger effectively disables the default onhover trigger
trigger: 'custom',
functionReady: function (instance, helper) {
AnimateUpDown(helper.tooltip);
}
});
toolTipOpenAndClose();
});
There is an open issue about that, that's the first place to check. Should be fixed in a few days. https://github.com/iamceege/tooltipster/issues/600
I've got the following situation: some controls that are located next to a button and are slided in and out on button click.
Ext.define ('Site.widget.SomeButton', {
extend: 'Ext.button.Button',
xtype: 'SomeButton',
width: 30,
controlled_inputs: null,
expanded: false,
setControlledCmp: function(controlledInputs) {
var me = this;
me.on('click', function(){
if (me.expanded)
controlledInputs.getEl().slideOut('r', { duration: 250 });
else
controlledInputs.getEl().slideIn('r', { duration: 250 });
me.expanded = !me.expanded;
});
}
});
Ext.define('Site.widget.ComingOut', {
extend: 'Ext.Container',
xtype: 'ComingOut',
layout: 'hbox',
header: false,
referenceHolder: true,
items:[{
xtype: 'SomeItems',
reference: 'SomeItems'
},{
xtype: 'SomeButton',
reference: 'SomeButton'
}],
onBoxReady: function() {
me.lookupReference('SomeButton').setControlledItems(me.lookupReference('SomeItems'));
}
});
The code works fine when the controls are initially shown. The question is: what should I do if I want them to be initially hidden? hidden:false is not the option since when controls are hidden the button moves into the freed position. I suppose I am missing something easy here. Thank you in advance!
PS I've found solution, though it doesn't seem good enough (hides element instead of correctly setting its initial state), so if anyone knows a better one - you are welcome. My solution is the following
setControlledCmp: function(controlled_inputs) {
var me = this;
me.on('click', function( view, eOpts ){
controlled_inputs.setOpacity(1);
if (me.expanded)
controlled_inputs.slideOut('r', { duration: 250 });
else
controlled_inputs.slideIn('r', { duration: 250 });
me.expanded = !me.expanded;
});
}
and
onBoxReady: function() {
var me = this;
var inputs = me.lookupReference('search_inputs').getEl();
inputs.setOpacity(0);
inputs.slideOut('r', { duration: 5 });
me.lookupReference('search_button').setControlledCmp(inputs);
}
Here's my code:
$("#ticker-wrapper").rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
});
$('#js-news').ticker({
controls: false,
titleText: ''
});
Basically, a rssfeed is placed inside the wrapper, I then want .ticker to add a ticker effect to the items pulled through by the .rssfeed.
The problem seems to be that the .rssfeed creates the id #js-news (which is where I want to apply the .ticker). Then it seems the .ticker gets fired before #js-news has been created. Effectively it seems to be trying to apply .ticker to the element which hasn't yet been created which then results in nothing appearing.
I've been looking into jQuery .live() and I can get all the code working on a click command. But I need to create the rss feed and apply the ticker when the page loads. Not quite sure what to do?
------ Edit ------
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}
Call the ticker() on ajaxStop()
$("#ticker-wrapper")
.rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
})
.ajaxStop(function() {
$('#js-news').ticker({controls: false, titleText: '' });
});
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
var usr = 'charliesheen';
function changeusr()
{
usr = document.getElementById("usrText").value;
updatetwitter();
}
var twitter;
newtwitter();
function updatetwitter()
{
twitter.render().setUser(usr).start();
}
function newtwitter()
{
twitter =
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#367542'
},
tweets: {
background: '#e3dfe3',
color: '#000000',
links: '#110af5'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>
The results I see are: It loads fine. When I enter a new username and click "go" it may or may not reload the twitter widget, and the link "join the conversation" points to the correct url. I'd like it to reload the url with the new user entered. I'm a complete javascript noob. Thanks in advance.
Your input needs an id:
<input id='usrText' name="usrText"/>
Internet Explorer will return elements by name from "getElementById()", but that is simply legacy broken behavior and it's not imitated by other browsers.
edit — an update:
There doesn't appear to be much documentation for that widget thing. Things work somewhat better if you set the "live" feature to true. Also, when you update the user, you have to zap an internal variable on the widget:
function updatetwitter()
{
twitter._profileImage = null;
twitter.setUser(usr).render().start();
}
Here is the jsfiddle if you'd like to see it.