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

陶傑 – 電梯裏的異味

電視牌照風暴,出現特區權力階層的互咬:「經濟局長」出來宣佈,一片唾罵之下,說是行政會議的決定。

行政會議召集人說:我們都有不同的建議,但特首是那個力排眾議自我決定的人。

立法會主席看不過眼,說:即使行政會議人人一致反對,特首一人即有權力推翻。

矛頭所指,至為明顯。特首梁振英一巴掌再摑回去:過去的行政長官,從來沒有過不聽行政會議大部分的意見。

一個極其醜陋的決策,就像香港的商場,拖男帶女的自由行和購物的師奶,人來人往之際,地板上忽然出現一堆糞便。是誰排洩的?你推我,我賴你,無人願意承擔。

不發牌給王維基,如果真的合乎「程序公義」,就是一件對社會有益的好事。既然是好事,理應個個出來領功勞。只有人人心裏明白:這是一個如糞便一樣的決策( A shitty policy),才都你推我,我不認是我,不,是你。
Continue reading

陶傑 – 綑綁之驚

王維基申請電視牌照,雖然投入大量資金,積極工作,卻被梁振英的特區政府踢出局,理由是「過份高調進取」、「冒犯政府權威」、「有『逼宮』之嫌」,而且更進一步,因電視劇太受香港市民歡迎,有可能「號召香港人遊行示威」。

梁振英時時自稱中國人,而且「中國」得很百分之百,擁有這等中國人的誅心陰暗性格,十分正常。

慘在與所謂梁班子綑綁的一些「前朝港英餘孽」,英國人教出來的黃皮膚精英,你看所謂行政會議的人馬排開,有幾位:穿西裝戴眼鏡、相貌端莊而一對眼睛不矇豬的;早生了點白髮的、蓄了奇勒基寶式小鬍子的,還有若干女士,穿上衣裙,頗有一兩分牛津劍橋淑女氣的──這一幫,一看就知道「中國人」的味道不是太濃的,略受過英國文明洗浸的人士,對於王維基不獲發牌的「中國深層次理由」,一定不敢認同,甚至如英語說的:「深深受到驚怖」(Deeply appalled)。
Continue reading

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