I have in my code both simple css/jquery menu and google.visualization.PieChart. However lately I’ve seen that my pie-chart covers the menu. i.e. when I drop down the menu, all of it is visible except the part behind the pie-chart (in example below I can’t see Technical manuals in menu).
If somebody could me advise what should I change in html/css/js code I would be very grateful.
Maybe it’s not necessary but for the completeness I’ve put below a sample of code that demonstrate my problem. You need to download jquerycssmenu.css and jquerycssmenu.js from dynamicdrive to get it running.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-2">
<meta name="robots" content="index,follow">
<title>Test Site</title>
<link rel="stylesheet" type="text/css" charset="utf-8" media="all" href="./common.css">
<link rel="shortcut icon" href="./favicon.gif" type="image/gif" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work', 11],['Eat', 2],['Commute', 2],['Watch TV', 2],['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chartClient_Group_all_div'));
chart.draw(data, options);
}
</script>
<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />
<script type='text/javascript' src='js/jquery-1.2.6.min.js'></script>
<script type="text/javascript" src="jquerycssmenu.js"></script>
</head>
<body lang="en" dir="ltr">
<!-- ================= HEADER ================= -->
<div id="myjquerymenu" class="jquerycssmenu">
<ul>
<li><a href="./resources.php">Resources</a>
<ul>
<li><a href="./resourcesQ.php">Infos on Queue</a>
<li><a href="./resourcesH.php">Infos on Hardware</a>
<li><a href="./resourcesS.php">Software manuals</a>
<li><a href="./resourcesT.php">Technical manuals</a>
</ul>
</li>
</ul>
</div>
<div id="naviline"><hr style="display:none;"></div>
<div id="page">
<TABLE border="1" BORDERCOLOR=white class="t0"><tr>
<td align="left" valign="top" width="500px" style="border-style: none; background: white;">
<center><h4> Some Title</h4><br>
<div id="chartClient_Group_all_div"> </div>
</td>
</tr></table>
<br>
</div> <! -- page -- >
</body>
</html>
You need to set the z-index css property for the menu to be higher than the pie chart. Try 9999 to start.