cytoscape.js and jQueryUI modal dialogs

[re...@redsofa.ca]

Hello. 

Has anyone come across this before? I have a cytoscape.js network visualization on my page. When I right-click on a node, my application opens up a modal dialog box (jQuery UI dialog). Any (normal, left) clicks on the dialog box's buttons seem to be applied to the network visualization. Is there a way to stop these click events from propagating to the visualization? If I hide the visualization while the dialog box is opened then the clicks work properly but re-showing the visualization has an issue. I have to click on the visualization to see the graph again. Any pointers you can provide to help me work through this issue would be greatly appreciated.

Thank you in advance.

Rene

[re...@redsofa.ca]

This fixed my problem of events being processed by the Cytoscape.js visualization even though I had a modal dialog box opened but I'm sure there is a better way and that I'm missing something.

//Hide the cytoscape.js visualization

NodeRightClickPopUp.prototype.hideVisualization = function(){

   $("#visualization").hide();

};

//Show the cytoscape visualization and pan by 0,0 so the visualization is actually visible

NodeRightClickPopUp.prototype.showVisualization = function(){

   $("#visualization").show();

   var cy = $("#visualization").cytoscape("get");

   cy.panBy({x:0, y:0});

};

R.

[Bumbu Alex]

How about catching click event by your modal and stop its propagation?

Something like

$('#dialog').on('click', function(event){

  event.stopPropagation()

});

For supporting IE you can do:

$('#dialog').on('click', function(event){

  event.cancelBubble = true;

  if (event.stopPropagation)

    event.stopPropagation()

});

[Max Franz]

Try adding the menu outside and on top  of the cytoscape.js div. You really shouldn't add anything in the cy div yourself, unless you write a proper plugin that handles the events properly. -Max

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at http://groups.google.com/group/cytoscape-discuss?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Andrew Schriner]

FYI I am having the same problem even though the dialog is defined in a div outside the cytoscape div.  I also tried putting it before cytoscape in the dom (That's how I interpreted "outside and on top of" in your comment) but that doesn't help. 

[Andrew Schriner]

Also it's not just click events - hovering has the same behavior.  If I hover over my modal dialog buttons they change colors, but only when they are not on top of the cytoscape div.  If the modal is over top of the cytoscape div, the buttons don't change color on hover.  So it seems the cytoscape div is capturing all events.

[Max Franz]

Have you absolutely positioned your dialogue and made sure its z-index is greater than the cytoscape.js parent div?  Have you inspected the divs in your browser’s debugger to make sure it is indeed on top?

--

You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at http://groups.google.com/group/cytoscape-discuss.