Tutorials - jQuery resizable
Make your charts resizeable.
stuff
Grab the latest jQuery and jQuery UI,
jQuery UI will ask you what components you want to include, I chose core and re-sizable.
This is the Javascript I used:
This goes into the <head> of the page:
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"open-flash-chart.swf", "my_chart", "100%", "100%",
"9.0.0", "expressInstall.swf",
{"data-file":"gallery/data-lines.php"} );
$(document).ready(function(){
$("#resize").resizable();
});
function ofc_resize(left, width, top, height)
{
var tmp = new Array(
'left:'+left,
'width:'+ width,
'top:'+top,
'height:'+height );
$("#resize_info").html( tmp.join('<br>') );
}
</script>
This writes the chart into a div with id="my_chart",
right click and view source to see it in action,
[the tutorials have more details]
And this is the HTML I used.
<div id="resize" style="width:400px height:200px padding: 10px">
<div id="my_chart"></div>
</div>
The charts raise an event when they are resized via the ofc_resize event.
|
Adverts:
|