Tryy With Java: 5月 2015

2015年5月11日星期一

CSS3 resize and catch change event

在 CSS3 開始，div 也可以使用 resize的參數了～
http://www.w3schools.com/cssref/css3_pr_resize.asp

以非常簡單的設定方式，就可以得到一個隨意拖拉變大變小的區域～

BUT...又來了～
雖然CSS3 已經開放這個功能，但是tag上的onresize event 卻還沒搞好Orz...
當然是說只是單純不需要與 js 互動的話是沒問題，但是通常都還是要防呆之類的，抓不到事件觸發就很無言...

網路上有些作法討論，後來我是覺得暴力破解真是～～有點強過頭Orz...
（唯一的缺點就是，效能吃比較重吧，但是看跑起來似乎蠻流暢的就降子吧XD）
來源在
http://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events
與
http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery/1397500#1397500

簡單的說，就是只要css(style)的值一變動，就會跳進這個event，管你變長變短，變醜變漂亮，全都逃不掉的窮舉法～

試作的example如下：（有搭配jquery在用）
<style>
#test {
    width: 200px;
    height: 200px;
    border: dotted 1px #888888;
    resize: both;
    overflow: auto;
}
</style>

<script>
$(function() {
    document.getElementById('test').addEventListener('DOMAttrModified', function(e){
        if (e.attrName === 'style') {
            //console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
            divInfo(this);
        }
    }, false);

});
function divInfo(elem) {

    var w = $(elem).outerWidth(true);
    var h = $(elem).outerHeight(true);
    var x = $(elem).offset().left;
    var y = $(elem).offset().top;

    var msg = '('+x+','+y+')==>'+w+'*'+h;
    $('#info').html(msg);
}
</script>

<body>
<div id="info">test info</div>
<div id="test" >TEST</div>
</body>

2015年5月6日星期三

jquery outerHight sometimes wrong

先來看這個這個 jquery method
https://api.jquery.com/outerHeight/
裡面有圖解他取的範圍～

原則上，一般大家都會取用 ex: $('#test').outerHeight(true)，加上margin的計算～

不過，有時候他會出現很奇妙的數字...Google關鍵字也可以讓你找到不少人有一樣的問題。
但是，通常要用到這個method時，大多是計算位置，或是自動修正高度 scrollbar用，一但出現奇妙的數字就會非常Orz...

看了一下Google網路上說法，有時候是老IE的基本元件 padding/margin 本身 default就有問題，可以導入 reset.css 之類的解決。

不過我碰到的倒不是這樣子，但最後也是用改版面的 css 來解決，我想會讓他出錯的，應該是某些特定版面排版設定造成的（並不是單一個div，而是整體的使用，導致他誤判或是什麼的吧，但不容易想到去調別人～所以發生時，一定會覺得很鬼XD...）

講一下在我出錯的case裡，基本結構是：
<div>    O -->
    <table>    X -->
<thead>....</thead> 
<tbody>....</tbody>
    </table>
</div>

而我在抓 thead 的高度時GG了～
outerHeight 明顯的數字變高，但是我在 thead 裡的 tr, th, td 等，其實都沒動到height/margin/padding 等項目...一整個搞不懂為啥他喵的旁邊的table算對，就是這一個算錯～

後來比了很久的source code，發現出錯的那個 table tag，有定了 margin/border...然後正覺得table的上下margin，加起來的數字還跟多出來的高度很接近...果然拿掉 table的margin，計算後就正確了！

所以在結構上，整個table的外框與間隔，應該在外層再用一個div包起來，用div的外框與間隔來做比較好。table與table內的型態，就讓他單純點的不要搞太多設定會比較好～～

不過這表示說，outerHight這個method，可能也會受到 parent/child 等的影響，除了找該元件的內容外，相連的元件設定也該找找看，說不定會比較快找到鬼QQ～

2015年5月4日星期一

Html5 Storage

在HTML5的規格內，加入了一項新的東西，就是Storage
http://www.w3schools.com/Html/html5_webstorage.asp
如w3school的說明～比cookie好～就是打算來取代cookie的部分功能～

用法上已經改得相當簡單，把他想成是map。
只要setItem('test', 'tttt')，getItem('test')，clear()...
就已經可以滿足很多的使用情境～

另外有localStorage，與sessionStorage的內容值存取範圍差別，
在測試底下，sessionStorage，就大概是指用同一個頁面access的範圍
（開啟新分頁，或是瀏覽器重開就會不見）
而localStorage則是在同一瀏覽器上都可以運作，但是無法跨瀏覽器。
若要跨瀏覽器還是只能靠Server端儲存～

更詳盡的說明可以參考
http://apress.jensimmons.com/v5/pro-html5-programming/ch11.html

不過在打算使用這功能時，在規劃時要注意的是，到底能存多少資料在裡面？
查了一些網路文章，結論就是看各家瀏覽器的實作...而瀏覽器目前最少的應該是5M...
（應該會隨著時代而慢慢增加吧～如果網頁應用發展的好的話～～）
相較之下，原本的cookie 大概在4k左右，加上有分scope，在應用上會比較安全點，怎麼說Storage應該都是比較好的選擇～

貼一下簡單的測試程式
var supportStorage = false;
function checkStorageSupport() {
//sessionStorage
if (window.sessionStorage) {
    //alert('This browser supports sessionStorage');
    $('#show_session').html(sessionStorage.getItem('test'));
} else {
    //alert('This browser does NOT support sessionStorage');
}
//localStorage
if (window.localStorage) {
    //alert('This browser supports localStorage');
    supportStorage = true;
    $('#show_local').html(localStorage.getItem('test'));
} else {
    //alert('This browser does NOT support localStorage');
}
}

function saveIconList() {
    if(!supportStorage) {
        return;
    }

    var h1 = $('#myinput').html();
    localStorage.setItem('test', h1);
    sessionStorage.setItem('test', h1);
}

2015年5月11日 星期一