I am currently working on an application that monitors nodes within a cluster, and I have created a visual state example to demonstrate this. Each small box in the grid represents a node, and when hovering over a node, the rest of the nodes in that particular rack fade out.
If you would like to view the visual state image, please follow this link to Photobucket: visual state
While the fading effect works smoothly in Chrome and Firefox, there is a noticeable lag in IE 11. I understand that IE's javascript engine is slower compared to other browsers, so I would appreciate any input from the SO community on how to optimize my code for better performance. As someone who may not be the best front-end programmer, your suggestions are highly valued. Below are snippets of the code I am using:
Snippet from the Django template (each node has id="matrix-box-<node #>"):
<tr>
<td id="visual-state"><b>visual state</b></td>
<td id="matrix" colspan=5>
{% for row in v.22 %}
{% if v.23 == "ca" %}
{% if forloop.counter0|divisibleby:4 %}
<div id="rack-{% widthratio forloop.counter0 4 1 %}-{{ k }}" title="rack-{% widthratio forloop.counter0 4 1 %}">
{% endif %}
{% elif v.23 == "cs" %}
{% if forloop.counter0|divisibleby:8 %}
<div id="rack-{% widthratio forloop.counter0 8 1 %}-{{ k }}" title="rack-{% widthratio forloop.counter0 8 1 %}">
{% endif %}
{% endif %}
<div class="row">
{% for elem in row %}
{% if elem.1 == "#49E20E" %}
<div class="node node-faded" id="matrix-box-{{ elem.0 }}-{{ k }}" style="background: #00DC00;" title="{{ elem.0 }}"></div>
...continued
CSS code snippet:
.node {
width: 4px;
height: 4px;
float: left;
border: 1px solid #B0B0B0;
background: #cccccf;
margin: 0 !important;
cursor: pointer;
filter: alpha(opacity=100);
opacity: 1;
}
.faded .node-faded {
width: 4px;
height: 4px;
filter: alpha(opacity=50);
opacity: .5;
}
...more CSS code
Snippet from the JavaScript code:
var node = null;
var node_id = null;
var rack = null;
var nodes = null;
$(document).ready(function(){
$('[id^=matrix-box]').on({
mouseenter: function(){
node = $(this);
rack = node.parent().parent();
rack.addClass('faded');
node.removeClass('node-faded').addClass('active');
},
mouseleave: function(){
node.removeClass('active').addClass('node-faded');
rack.removeClass('faded');
},
click: function(e){
...continuation
I welcome any constructive criticism that can help improve my code quality. Thank you for your assistance!