Tag Archives: Firefox

Javascript – Determine which event is triggered

Recently i have been working with Dashing which is a great tool to displaying information as a dashboard. I would like to show the dashboard on a big TV. Everything works fine on my Mac but when it is shown on the TV screen, the onclick event is not triggered.

I need to check which event is triggered when i press on the TV screen. The web developer console in Chrome of Firebug in Firefox could help you to determine which event is triggered. For example, the menu bar of Eureka! has the following HTML structure.

<div class="nav-menu">
  <ul>
    <li class="page_item page-item-1630"><a href="https://eureka.ykyuen.info/about-eureka/">About</a></li>
    <li class="page_item page-item-8284"><a href="https://eureka.ykyuen.info/portfolio/">Portfolio</a></li>
    <li class="page_item page-item-731"><a href="https://eureka.ykyuen.info/faz-jewelry/">Faz Jewelry</a></li>
    <li class="page_item page-item-6494"><a href="https://eureka.ykyuen.info/linux-commands/">Linux Commands</a></li>
    <li class="page_item page-item-8388"><a href="https://eureka.ykyuen.info/reads/">Reads</a></li>
    <li class="page_item page-item-7349"><a href="https://eureka.ykyuen.info/syntax-highlight/">Syntax Highlight</a></li>
    <li class="page_item page-item-9773"><a href="https://eureka.ykyuen.info/%e6%97%85%e8%a1%8c%e8%a8%98/">旅行記</a></li>
  </ul>
</div>

 

I would like to monitor all the events which are triggered by the first li.page_item element. This can be done by inputing the following command in the console.
Continue reading Javascript – Determine which event is triggered

Advertisement

成立香港有限公司 @ 2

起初我想親身到位於金鐘的公司註冊處填寫及遞交申請文件,原因是我對於註冊的過程不太清楚,所以希望在那裡直接完成所有手續,誰知道詢問處的職員說現在所有申請都必須在網上進行,所以只逗留了數分鐘便離開。

在網上成立有限公司,第一步就是要登記一個註冊易用戶。
註冊易網站
Continue reading 成立香港有限公司 @ 2

Font/Text distortion on animate() and opacity in Internet Explorer

I have a HTML div which will be shown from hidden to visible by changing the opacity with jQuery animate(). It works fine in normal browser like Chrome and Firefox. But from the abnormal browser like Internet Explorer, the font/text is distorted.

Internet Explorer has problem with opacity and font antialiasing in animate(). A workaround is to remove the opacity after the animation is completed.

$("#my-div").animate({opacity: 1},500, function() {
  $(this).css('opacity', '');
});

Continue reading Font/Text distortion on animate() and opacity in Internet Explorer

CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

Text rotation can be done by CSS3 3D Transforms. But after the transform the text is aliased. For WebKit browser, the anti-aliasing feature could be enabled by adding the following CSS style.

  * {
    -webkit-transform: translate3d(0,0,0);
  }

Continue reading CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

CSS3 – Text Rotation by 3D Transforms

Next: CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

We can rotate text by using the CSS3 transform.

To rotate a text in clockwise direction with 45 degree:

p {
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* IE 9 */
  -o-transform: rotate(45deg);      /* Opera */
  transform:rotate(7deg);
}

 
Continue reading CSS3 – Text Rotation by 3D Transforms

HTML5 – Play sound/music with <audio> tag @ 1

Next: HTML5 – Play sound/music with <audio> tag @ 2

With HTML5, we can easily play audio file with the <audio> tag. Here is an example.

<html>
  <head></head>
  <body>
    <audio controls loop autoplay>
      <source src="music.ogg" type="audio/ogg" />
      <source src="music.mp3" type="audio/mp3" />
      Your browser does not support the audio element.
    </audio> 
  </body>
</html>

Continue reading HTML5 – Play sound/music with <audio> tag @ 1