Call transformation on targeted uls or ols (within the jquery ready function):
I'm very new to jQuery and I'm trying to use this script here:
http://plugins.jquery.com/project/nested-list-to-google-org-chart
I'm having trouble getting the script to load $("#list").g_orgchart(); within the jquery ready function.
Here's what I currently have, but the script is not loading correctly, I'm hoping someone can point me in the right direction.....the path to
jquery.g_orgchart-0.1.js is correct.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
google.load('visualization', '1', {packages:['orgchart'] });
</script>
<script type="text/javascript" src="jquery.g_orgchart-0.1.js"></script>
<script>
jQuery.ready(function() {
$("#list").g_orgchart();
});
</script>
</head>
<body>
<ul id='list'>
<li><a href='#food' title="Food">Food</a>
<ul>
<li><a href='#fruit' title="Fruit">Fruit</a>
<ul>
<li><a href='#orange' title="Orange">Orange</a></li>
<li><a href='#apple' title="Apple">Apple</a></li>
</ul>
</li>
<li><a href='#vegetable' title="Vegetable">Vegetable</a>
<ul>
<li><a href='#tomato' title="Tomato">Tomato</a></li>
<li><a href='#potato' title="Potato">Potato</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
I just need to know where to place $("#list").g_orgchart();
Thanks in advance for anyone who can help!