AngularJS ng-view problem on Firefox

By default, multiple ng-view does not support in AngularJS. Assume that we have some pages with different layout as the code bellow:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="container-master" ng-switch on="layout">
        <div ng-switch-when="landing" ng-view></div>
        <div ng-switch-when="404">
            <div ng-include src="'views/header.html'"></div>
            <div ng-view></div>
        </div>
        <div ng-switch-when="default">
            <div ng-include src="'views/header.html'"></div>
            <div id="container">
                <div id="sidebar-right">
                    <div class="site-ad">
                        <img src="styles/img/layout/ad_1.jpg" alt="Example Ad" title="Example Ad" />
                        <img src="styles/img/layout/ad_2.jpg" alt="Example Ad" title="Example Ad" />
                    </div>
                </div>
                <div id="main-content" ng-view></div>
            </div>
        </div>
    </div>

As you can see, we have 3 ng-view directive and using ng-switch to decide which layout will be used. When run on Chrome browser, everything is fine. AngularJS uses only one ng-view (which matched with ng-switch-when). But on Firefox, the data will put to all ng-view, but only the div with matched with ng-swith-when is shown (the other is hidden), it also sends as many request as ng-view has, too.

Currently I cannot find the solution for this case so I reorganized the HTML to use only one ng-view:

1
2
3
4
5
6
7
8
9
10
<div ng-include src="'views/header.html'" ng-show="layout != 'landing'"></div>
    <div id="container" ng-class="{'landing-wrapper': layout != 'default'}">
        <div id="sidebar-right" ng-show="layout == 'default'">
            <div class="site-ad">
                <img src="styles/img/layout/ad_1.jpg" alt="Example Ad" title="Example Ad" />
                <img src="styles/img/layout/ad_2.jpg" alt="Example Ad" title="Example Ad" />
            </div>
        </div>
        <div id="main-content" ng-view></div>
    </div>

It works!!!

Sửa lỗi background bị giật khi swipe qua lại trên Ipad

Hôm nay tìm ra & fix được lỗi rất chuối khi swipe trên Ipad thì background image có thuộc tính background-size: cover bị giật.

Lý do là background image không hiểu do vô tình hay cố ý bị nhét thêm thuộc tính: no-repeat vào. Theo như mô tả của W3shools thì giá trị cover của background-size là:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

Rõ ràng, nếu đã scale tới giá trị lớn nhất có thể của kích thước containner thì no-repeat không cần thiết nữa, thử bỏ nó đi và đúng là lỗi đã được fix thật :)

Cập nhật: sau khi test lại thì lỗi chính xác là do thuộc tính background-attachment: fixed gây ra. Hiện vẫn chưa biết giải quyết thế nào với trường hợp này, vì nếu bỏ “fixed” đi thì với page có nội dung dài thì background sẽ không scale được toàn bộ màn hình :(

Special problem when use simplexml_load_string function

Today, my boss ask me to fix bug cannot parse XML string: simplexml_load_string cannot parse data correctly because of XML file contain some special characters.

Here is my simple code to test:

1
2
3
4
5
6
$xml_file = '139_1356677622_o1_13.jpg.xml';
if (file_exists($xml_file)) {	
    $xml = file_get_contents($xml_file);
    $xml = simplexml_load_string($xml);	
    print_r($xml);
}

After run it, system shows some warning/error message like bellow:

1
Warning: simplexml_load_string() [function.simplexml-load-string]: Entity: line 36: parser error : Input is not proper UTF-8, indicate encoding

and

1
Warning: simplexml_load_string() [function.simplexml-load-string]: Entity: line 56: parser error : CData section not finished

I thought about replacing special characters, but what is special characters? How do we know how many character cannot parse by simplexml_load_string/simplexml_load_file?

After search on internet, I found this article and luckily, I found the code of eZ Public too :D

1
$xmlDoc = preg_replace('/[\x00-\x08\x0b-\x0c\x0e-\x1f]/', '', $xmlDoc);

So my code will be:

1
2
3
4
5
6
7
8
$xml_file = '139_1356677622_o1_13.jpg.xml';
if (file_exists($xml_file)) {	
    $xml = file_get_contents($xml_file);
    $xml = utf8_encode($xml);
    $xml = preg_replace('/[\x00-\x08\x0b-\x0c\x0e-\x1f]/', '', $xml);
    $xml = simplexml_load_string($xml);	
    print_r($xml);
}

It works! The problem is solved :-)