Develop Reference

cytoscape.js and canvasXpress mixup

I am new to cytoscape.js and I have encountered a strange behavior when I have a div with my network (cy) and a canvasXpress element in the same div. The body structure is like so:
<div class="col-sm-12">
<div class="col-sm-6 result box" id="divHeatmap">
<!-- This div is replaced by a canvasXpress element-->
<div><canvas id="canvas1"></canvas></div>
</div>
<div class="col-sm-6 result row" style="padding-left:30px;" id="divNetwork">
<div class="col-sm-12 row result box" style="padding-left:30px; ">
<div class="result row">
<div id="cy"></div>
</div>
</div>
</div>
</div>
cy is created correctly (it works in every other case tested) as is the canvasXpress element. The trouble starts when my pointer hovers over the canvasXpress element and then returns over the cy network. When this happens the layers of the network seem to be broken. I can click the nodes but they either disappear or get stuck on the pointer (unless I right click). Moreover, the edges point to random points when i click at anything. My suspicion is that the canvasXpress element messes with the z-index of the cy layers. Do you have any idea what might be happening? Thank you for your time!

Don't share the same div for multiple lib containers. That's not a good idea in general.
Do this
some div
viz A div
viz B div
And just stack the A and B div on top of each other with CSS.

jQuery Remove Closest Issues in Chrome

Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/

The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.

Angular-Scroll: same as example, but not working (Plunker)

I'm trying to use Angular-Scroll (https://github.com/oblador/angular-scroll) to simply scroll to an <a> link on the same page, but do it nicely and smoothly. When I couldn't get it to work, I made a super simple setup in Plunker.
Plunker: https://plnkr.co/edit/w1GBTAjxtHL3H4LAuHoO
If you download the zip of the GitHub, there's an example I'm trying to do in the folder location angular-scroll-master/example/container.html. There's really nothing complex, the angular script is basically just finding the container id for the directive to use.
I cannot figure out why my page will not scroll.
HTML
<div class="medium-6 columns" du-scroll-container="container">
Link
</div>
<div id="container" class="medium-6 columns" du-scroll-container="">
<div id="junk">LINK JUNK HERE YAY!!</div>
</div>
</div>
JS
angular.module('scrollDemo', ['duScroll']).
controller('myCtrl', function($scope) {
var container = angular.element(document.getElementById('container'));
});

I edited your plunker and it seems to be working now. Here is the link.
The problem was that the container div is not the scrollable container that would be the body element to make it work as the scrollable element you can set the max-height of the container so that it will become the scrollable element or remove the du-scroll-container="container" atribute so that it will use the body as the scrollable element.

set Z index not working. button behind a container (HTML - CSS)

I using Metro css (windows 8 style) and have a problem.
I have container with alerts (the blue in the picture) ,
and above , there is 'IT -CENTER ' , If I click there it open a button.
the problem that the button behind the container..
I try to set the Z index of the container to -1 , and it's not help.
the dropdownlist with the button(IT-CENTER):
IT-CENTER
<li style="z-index:3">התנתק</li>
</ul>
</div>
and the container(blue one):
<div id="alerts-container" style="z-index:-1">
<div id="toast-example1" class="toast toasttext02 fade in">
<button type="button" class="close" data-dismiss="alert"></button>
<div class="pull-left">
<div class="toast-object icon-info-4"></div>
</div>
<div class="toast-body" style="text-align:right">
(it's without the closing tags..)
what should I do?
thanks!!

You must set position:relative if you are setting z-index - it is very important thing and can lead to your bug
If the 1 method doesn't help you should try to set z-indexes to the possible parents of that button (can say for sure I don't see your code)

overflow: hidden;
to parent DIV worked for me

Modal loaded from backend is being covered by other elements

I have an html fragment that is being loaded by the backend into the main div of my page. It contains a modal that appears when a link is clicked on. The issue is, is that the modal is able to be covered up by other elements on the page. Setting the z-index is useless, because if an element in the header has a higher z-index than the main div, the modal will show up behind the header, regardless of its z-index. I'm currently solving the problem by using javascript (jQuery) to clone the modal, appending the clone to the body, and then deleting the original modal. This seems like a hacky workaround and could cause potential problems, is there a better way to do this? How do modals usually get loaded so that they don't encounter this issue?
Here's a jsfiddle of the problem: http://jsfiddle.net/kraxF/
Here's the HTML, as you can see, the modal is pretty low in the DOM tree, and may be covered up by elements in the header or footer or main, if they have a higher z-index than "loaded-by-backend".
<div id="container">
<div id="header">
Header
</div>
<div id="main">
Main
<div id="loaded-by-backend">
<div id="modal">
Modal
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>

If you can change CSS, just remove position:relative from #main.
http://jsfiddle.net/kraxF/3/