there seems few subjects on anchor tags missing on how use javascript use anchor tag without jump. page loaded , have div holds 2 charts ( 1 hidden ) , has 2 tabs on side. i'd use tabs interchange charts without having page jump down anchor tag. have code below not sure need switch make work.
html:
<div style="width:550px; height:200px; padding:0px; border:0px; margin:0px;"> <div id="chartcontainer" style="width:500px; height:200px; overflow:hidden; position:relative; float:left;">chart...</div> <div style="width:25px; height:200px; float:left; position:relative; padding-top:11px;"> <div id="tabs1_div" style=" position:relative; float:left; padding-bottom:10px;"><a href="#" onclick="chartrender('tab1');" ><img src="images/labortab.png" /></a></div> <div id="tabs2_div" style=" position:relative; float:left;"><a href="#" onclick="chartrender('tab2');" ><img src="images/odctab.png" /></a></div> </div> </div>
javascript:
<script type="text/javascript"><!-- fusioncharts.setcurrentrenderer('javascript'); var mychart = new fusioncharts("charts/column2d.swf", "mychartid", "100%", "100%", "0"); mychart.setxmlurl("data/data.xml"); mychart.render("chartcontainer"); var mychart1 = new fusioncharts("charts/column3d.swf", "mychartid1", "100%", "100%", "0"); mychart1.setxmlurl("data/data.xml"); //mychart1.render("chartcontainer"); function chartrender(arg) { if (arg == "tab1") { mychart.render("chartcontainer"); } else if (arg == "tab2") { mychart1.render("chartcontainer"); } } // --> </script>
add return:false
chartrender function.
function chartrender(arg) { if (arg == "tab1") { mychart.render("chartcontainer"); } else if (arg == "tab2") { mychart1.render("chartcontainer"); } return false; }
your links following href attribute (#
) defaults top of page. returning false cancel behavior. sure modify call function onclick="return chartrender('tab2');"
Comments
Post a Comment