Google Pie Chart Covers jQuery Menus

Go To StackoverFlow.com

0

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).

enter image description here

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>
2012-04-05 21:04
by Kris_R


1

You need to set the z-index css property for the menu to be higher than the pie chart. Try 9999 to start.

2012-04-05 21:07
by Fresheyeball
Thanks - I didn't new this one - Kris_R 2012-04-05 21:48
Ads