I just made a small example of the Drop Down Graph on MTGOX.com.
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<meta charset="utf-8" />
<script>
jQuery(function ()
{
// We bind the <a>I'm the push link!</a> click event to the toggle function
$("#topPart a").click(function()
{
toggleSlide(this);
});
});
function toggleSlide(element)
{
var drawer = jQuery("#drawer");
var content = jQuery("#drawerContent");
if (jQuery(content).is(":hidden"))
{
// The order here is important, we must slide juste before starting blinding
setTimeout(function()
{
jQuery(content).effect("slide", { direction: "up", mode : "show"}, 500);
},1);
setTimeout(function()
{
jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 490);
},1);
}
else
{
setTimeout(function()
{
jQuery(drawer).effect("blind", { direction: "vertical", mode : "hide" }, 500);
// The previous blind effect hide the drawer
// However we want it to be shown again, if not the next "drawer opening effect" won't play
jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 1);
},1);
setTimeout(function()
{
jQuery(content).effect("slide", { direction: "up", mode : "hide" }, 460);
},1);
}
}
// THE CONTENT
</script>
<div id="topPart">
<a href="javascript:void(0)">Chart <img src="/yourimage.jpg"/></a>
</div>
<div id="drawer">
<div id="drawerContent" style="display:none;border:1px solid transparent;width:600px;">
<p>
Bitcoin Chart
</p>
<p>
<img src="http://bitcoincharts.com/charts/chart.png?width=940&m=mtgoxUSD&SubmitButton=Draw&r=60&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=&m1=10&a2=&m2=25&x=0&i1=&i2=&i3=&i4=&v=1&cv=0&ps=0&l=0&p=0&"/>
</div>
</div>
<div id="bottomPart">
</div>
Graph from Bitcoincharts.com
If this has helped you feel free to donate : 17gVpBZYSXdXfWCbPFG1Q8FKskQT5k4XA
