c8410716b2eafdadc6a1e4a0368ce6093669be32 kate Sun Mar 25 21:26:09 2012 -0700 Suppress mouseOver on X axis (Column headers) under IE8 as QA noted this results in a flashing effect diff --git src/hg/js/encodeDataMatrix.js src/hg/js/encodeDataMatrix.js index a0402c0..922b0fe 100644 --- src/hg/js/encodeDataMatrix.js +++ src/hg/js/encodeDataMatrix.js @@ -84,55 +84,59 @@ if (!matrix[cellType]) { matrix[cellType] = {}; } if (!matrix[cellType][dataType]) { matrix[cellType][dataType] = 0; } matrix[cellType][dataType]++; }); return matrix; } function tableHeaderOut($table, dataGroups, dataTypeExps) { // Generate table header and add to document // NOTE: relies on hard-coded classes and ids - var $tableHeader, $thead; + var $tableHeaders, $thead, $th; var maxLen, dataType; // fill in column headers from dataTypes returned by server - $tableHeader = $('#columnHeaders'); + $tableHeaders = $('#columnHeaders'); $thead = $('thead'); // 1st column is row headers // colgroups are needed to support cross-hair hover effect $thead.before('<colgroup></colgroup>'); $.each(dataGroups, function (i, group) { - $tableHeader.append('<th class="groupType"><div class="verticalText">' + + $tableHeaders.append('<th class="groupType"><div class="verticalText">' + group.label + '</div></th>'); maxLen = Math.max(maxLen, group.label.length); $thead.before('<colgroup></colgroup>'); $.each(group.dataTypes, function (i, label) { dataType = encodeProject.getDataTypeByLabel(label); // prune out datatypes with no experiments if (dataTypeExps[dataType.term] !== undefined) { - $tableHeader.append('<th class="elementType" title="' + - dataType.description + - '"><div class="verticalText">' + dataType.label + - '</div></th>'); + $th = $('<th class="elementType"><div class="verticalText">' + + dataType.label + '</div></th>'); + if (!encodeProject.isIE8()) { + // Suppress mouseover under IE8 as QA noted flashing effect + $th.attr('title', dataType.description); + } + $tableHeaders.append($th); + // add colgroup element to support cross-hair hover effect $thead.before('<colgroup class="experimentCol"></colgroup>'); maxLen = Math.max(maxLen, dataType.label.length); } }); }); // adjust size of headers based on longest label length // empirically len/2 em's is right $('#columnHeaders th').css('height', (String((maxLen/2 + 2)).concat('em'))); $('#columnHeaders th').css('width', '1em'); } function rowAddCells($row, dataGroups, dataTypeExps, matrix, cellType) { // populate a row in the matrix with cells for data groups and data types // null cellType indicates this is a row for a cell group (tier) @@ -157,30 +161,31 @@ if (cellType === null) { return true; } if (!matrix[cellType][dataType]) { $td.addClass('todoExperiment'); return true; } // this cell represents experiments that // fill in count, mouseover and selection by click $td.addClass('experiment'); $td.text(matrix[cellType][dataType]); $td.data({ 'dataType' : dataType, 'cellType' : cellType }); + $td.mouseover(function() { $(this).attr('title', 'Click to select: ' + encodeProject.getDataType($(this).data().dataType).label + ' ' + ' in ' + $(this).data().cellType +' cells'); }); $td.click(function() { // NOTE: generating full search URL should be generalized & encapsulated var url = encodeMatrix.getSearchUrl(encodeProject.getAssembly()); // TODO: encapsulate var names url += ('&hgt_mdbVar1=dataType&hgt_mdbVal1=' + $(this).data().dataType + '&hgt_mdbVar2=cell&hgt_mdbVal2=' + $(this).data().cellType + '&hgt_mdbVar3=view&hgt_mdbVal3=Any' ); // specifying window name limits open window glut