OnClick alternative for extensive list

[EmB23]

Hello,

I have pieced together bits of code (am a newbie) to create a series of drop down lists that are used to navigate to sections of an interactive chart. It uses the onClick event to make a selection. I'm wondering if anyone has a idea about the best way to get this to function in Safari and Chrome (it works perfectly on Firefox and Opera).

I have included an example of the code for zooming by month, but I also have an option for zooming by fortnight, week and day. The code is found below.

Thanks in advance for any advice!


HTML Extract:

<table>
<tr>
<td><b>Zoom Month:</b></td>
<td>
<select>
<option value="Jan">Select Month</option>
<option value="Jan" onclick="zoomGraphX(1325336400000, 1328014800000)">January</option>
<option value="Feb" onclick="zoomGraphX(1328014800000, 1330520400000)">February</option>
<option value="Mar" onclick="zoomGraphX(1330520400000, 1333198800000)">March</option>
<option value="Apr" onclick="zoomGraphX(1333198800000, 1335794400000)">April</option>
<option value="May" onclick="zoomGraphX(1335794400000, 1338472800000)">May</option>
<option value="Jun" onclick="zoomGraphX(1338472800000, 1341064800000)">June</option>
<option value="Jul" onclick="zoomGraphX(1341064800000, 1343743200000)">July</option>
<option value="Aug" onclick="zoomGraphX(1343743200000, 1346421600000)">August</option>
<option value="Sep" onclick="zoomGraphX(1346421600000, 1349013600000)">September</option>
<option value="Oct" onclick="zoomGraphX(1349013600000, 1351688400000)">October</option>
<option value="Nov" onclick="zoomGraphX(1351688400000, 1354280400000)">November</option>
<option value="Dec" onclick="zoomGraphX(1354280400000, 1356872400000)">December</option>
</select>
</td>
</tr>
</table>

Javascript zoom script:

var minDate = g.xAxisRange()[0];
var maxDate = g.xAxisRange()[1];
var minValue = g.yAxisRange()[0];
var maxValue = g.yAxisRange()[1];
showDimensions(minDate, maxDate, [minValue, maxValue]);

function showDimensions(minDate, maxDate, yRanges) {
showXDimensions(minDate, maxDate);
showYDimensions(yRanges);
}

function showXDimensions(first, second) {
var elem = document.getElementById("xdimensions");
elem.innerHTML = "dateWindow : [" + first + ", "+ second + "]";
}

function showYDimensions(ranges) {
var elem = document.getElementById("ydimensions");
elem.innerHTML = "valueRange : [" + ranges + "]";
}

function zoomGraphX(minDate, maxDate) {
g.updateOptions({
dateWindow: [minDate, maxDate]
});
showXDimensions(minDate, maxDate);
}

function zoomGraphY(minValue, maxValue) {
g.updateOptions({
valueRange: [minValue, maxValue]
});
showYDimensions(g.yAxisRanges());
}

function unzoomGraph() {
g.updateOptions({
dateWindow: null,
valueRange: null
});
}

function panEdgeFraction(value) {
g.updateOptions({ panEdgeFraction : value });
}

// end new zoom script

[Galway]

For whatever reason, perhaps due to superstition, I find jQuery works best for things like this.

<select id="monthSelect">
<option value="">Select Month</option>
<option value="1325336400000, 1328014800000">January</option>
<option value="1328014800000, 1330520400000">February</option>
.
.
.
</select>

<script>
$("#monthSelect").click(function(){
    var param = $(this).val();
    zoomGraphX(param);
});
</script>

I haven't actually run this code myself so it may not work exactly the way it is, but the logic is there.

[EmB23]

Thanks for your advice, I will test this tomorrow and let you know how it goes incase others have the same problem.

[Declan1991]

Either using jQuery (as above), Yahoo (in this link) or neither (my preference), Event delegation is the way to go.

[EmB23]

For whatever reason, perhaps due to superstition, I find jQuery works best for things like this.

<select id="monthSelect">
<option value="">Select Month</option>
<option value="1325336400000, 1328014800000">January</option>
<option value="1328014800000, 1330520400000">February</option>
.
.
.
</select>

<script>
$("#monthSelect").click(function(){
    var param = $(this).val();
    zoomGraphX(param);
});
</script>

I haven't actually run this code myself so it may not work exactly the way it is, but the logic is there.

I've been working on this option before trying the event delegation - only because its going to take me a while to learn what's going on in that option (yup, I'm really new at this..).

The only thing with the jQuery code is that when I select a month (as in the example) the chart goes blank. I've attached an example of how the chart should look and also how it looks after selecting a month using the jQuery code above. Would it be possible to provide a clue as to what may be going wrong?

Thanks again.