Tag Archives: Chrome

Javascript

Javascript – Determine which event is triggered

Leave a comment

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 →

Chrome, Web Development

Chrome – Bypass Access-Control-Allow-Origin on Mac

Leave a comment

About a year ago, i posted an article about allowing the Javascript accessing the local file system in order to read the local JSON file.

 

So if you are using Mac, you need to quit the Chrome application. Then execute the following command in Terminal.

/usr/bin/open -a "/Applications/Google Chrome.app" --args --allow-file-access-from-files

 

Reference: Disable same origin policy in Chrome on Mac OSX

Chrome, Web Development

Chrome – Bypass Access-Control-Allow-Origin on local file system

2 Comments

Just wanna do some proof of concept on reading a JSON file in Javascript. So i open the index.html and read the JSON file locally. But the Chrome console throw the Access-Control-Allow-Origin error.

  • XMLHttpRequest cannot load file:///C:/Users/user/Desktop/readJson/data/file-1.json. Origin null is not allowed by Access-Control-Allow-Origin.

Although it should work if i upload those sources files to a web server, i would still make it work locally especially for development purpose. So here is a small trick which could ask the Chrome browser to bypass this cross-domain restriction.
Continue reading Chrome – Bypass Access-Control-Allow-Origin on local file system →

創業記

成立香港有限公司 @ 2

Leave a comment

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

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

CSS, jQuery

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

Leave a comment

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 →

CSS, Javascript

CSS Browser Selector – Align the CSS styles for different browsers and OS

Leave a comment

We have Modernizr to handle the HTML5 and CSS3 problem in old browsers.
Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

Today, i would like to introduce another tool which could help you aligning the CSS styles for different browsers as well as OS. This tool is called CSS Browser Selector. Although it is not updated for more than a year, it is still very useful if you need to deal with Internet Explorer 7 & 8.

Similar to Modernizr, what u need to do is just included the library in the <head> tag.
Continue reading CSS Browser Selector – Align the CSS styles for different browsers and OS →

CSS3, HTML5, Javascript

Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

3 Comments

Having problem on HTML5 and CSS3 with Internet Explorer? The Modernizr library could help you to tackle the problem. It checks the HTML5 and CSS3 features supported by the browser and developers could determine them by checking the classes of the <html> tag.

Download Modernizr and create the following index.html.
Continue reading Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming →

Chrome, CSS

CSS – Make font-size smaller than 12px in Chrome

4 Comments

In Chrome, the displayed text has a minimum font-size 12px even thought you set a smaller value in CSS. This is because the Chrome browser has a auto font adjustment.

So if you want to style a text with font-size smaller than 12px, include the following line in your CSS file.

body {
  -webkit-text-size-adjust: none;
}

 

Done =)

Reference: StackOverflow – Font-size <12px doesn't have effect in Google Chrome