www.webdeveloper.com
Results 1 to 5 of 5

Thread: OnClick alternative for extensive list

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Posts
    3

    Question OnClick alternative for extensive list

    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

  2. #2
    Join Date
    Feb 2011
    Location
    Waterloo, Ontario, Canada
    Posts
    80
    For whatever reason, perhaps due to superstition, I find jQuery works best for things like this.

    Code:
    <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.

  3. #3
    Join Date
    Mar 2012
    Posts
    3
    Thanks for your advice, I will test this tomorrow and let you know how it goes incase others have the same problem.

  4. #4
    Join Date
    Mar 2012
    Posts
    3

    Question

    Quote Originally Posted by Galway View Post
    For whatever reason, perhaps due to superstition, I find jQuery works best for things like this.

    Code:
    <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.
    Attached Images Attached Images

  5. #5
    Join Date
    Aug 2007
    Posts
    3,767
    Either using jQuery (as above), Yahoo (in this link) or neither (my preference), Event delegation is the way to go.
    Great wit and madness are near allied, and fine a line their bounds divide.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles