Tag Archives: Javascript

jQuery – Select elements with or without specific child

In jQuery, the has() method allow us to reduce the set of matched elements which only contains the specified child. For example:

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

 

// Set background color to red to the li which contains ul
$("li").has("ul").css("background-color", "red");

Continue reading

About these ads

Google Visualization API – Group lines in tooltip

Instead of showing the data of the mouse hovering line in the tooltip, i would like to show all lines data of the same x-axis value. This can be easily done by adding the focusTarget in the chart options object.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var rawData = [
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ];
        var data = google.visualization.arrayToDataTable(rawData);

        var options = {
          title: 'Company Performance',
          focusTarget: 'category' // Group the lines in tooltip
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Continue reading

Google Visualization API – Implement event handler on data point

Here is an example on binding the select event handler on the data point.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var rawData = [
          ['Year', 'Sales', 'Expenses'],
          ['2004', 1000,    400],
          ['2005', 1170,    460],
          ['2006', 660,     1120],
          ['2007', 1030,    540]
        ];
        var data = google.visualization.arrayToDataTable(rawData);

        var options = {
          title: 'Company Performance'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        // Add the select event handler
        google.visualization.events.addListener(chart, 'select', function () {
          var sel = chart.getSelection();
          sel = sel[0];
          if (sel && sel['row'] && sel['column']) {
            var year = rawData[sel['row'] + 1][0];
            var salesValue = rawData[sel['row'] + 1][1];
            var expensesValue = rawData[sel['row'] + 1][2];
            console.log("year: " + year + ", sales: " + salesValue + ", expenses: " + expensesValue);
          }
        });
        
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Continue reading

Apache Ant – Iteration within a specific number range

Previously i have published a post about using for loop in Ant to read a text file line by line.

 

The <for> task requires a list attribute containing a comma separated string. Here is an example.

<echo message="The first five letters of the alphabet are:"/>
<for list="a,b,c,d,e" param="letter">
  <sequential>
    <echo>Letter @{letter}</echo>
  </sequential>
</for>

Continue reading

Javascript – Implement touch and gesture based interaction using hammer.js

We have talked about TouchSwipe in previously.

 

Unlike TouchSwipe which is a jQuery plugin, hammer.js is independent of jQuery. It supports tap, swipe, drag and other mobile touch events. Here is an simple example.
Continue reading

TouchSwipe – Implement delegated swipe event for inner elements

In the previous post, we attach the swipe event listener directly on the #box element.

 

How about if your target elements is dynamically added to the DOM? In that case, the event listener would not work for the newly inserted inner elements. A work around is attached the event listener to the parent element instead. Here is another example for the delegated event implementation of TouchSwipe.
Continue reading

Apache Ant – String to uppercase / lowercase using ScriptDef

In Apache Ant, we can define custom task using MacroDef.

 

Other than that, Apache Ant is now shipped with a Javascript engine so we could use ScriptDef to define our own task in Javascript. The following example defines two tasks converting a string to uppercase and lowercase.
Continue reading