顯示具有 firefox 標籤的文章。 顯示所有文章
顯示具有 firefox 標籤的文章。 顯示所有文章

2014年4月8日 星期二

使用 GreenSock 的 backgroundPosition 讓動畫在 FireFox 也能動

最近常常在使用  jQuery 的 Animation 發現,若想要對某個元素產生 animation 時,而且是更改其 css 的 background-position-x/y,在 Firefox 並不管用。雖然網路上有人也提了一樣的問題,不過我試了一樣是沒有成功。

這則 stackoverflow 的答案得到重點是

background-position-x/y is not really part of any CSS spec
以及
Opera and Firefox do not accept it


問題
因此後來為了不想繞路,後來我選擇了使用 GreenSock,去做任何某個 site 需要的 animation,而且 GreenSock 的寫法更直覺,效果更多,不料,一樣問題也發生了:


var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});


解決
一樣的問題發生在 background-position 在 FireFox 不管用,後來在 forums 得到了解法(FireFox animating background position),
你可以改用 backgroundPosition,記住,沒有'-',而且 P 大寫,就可以解決在 FireFox 的問題:


var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});



最後的寫法變成這樣 (我額外加上了 FireFox 的判斷):


var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
if( $.browser.mozilla ){
        TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});
}else{
        TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});
}



2013年4月9日 星期二

為什麼Firefox不能執行window.close?

情況描述,一個close me的按鈕在其他瀏覽器皆可close,但在ff不行
為什麼在firefox的window.close不能作用呢?


根據我精密的調查下...
我發現firefox是有條件的不能window.close
也許很多人會跟我一樣爬過很多文,網路上一堆文章說可以就是可以阿(握拳)
不過我試過真的不行...
後來我去找developer.mozilla.org關於window.close的描述
仔細看了,裡面就這麼寫著 :


This method is only allowed to be called for windows that were opened by a script using the   window.open method. 
---引用自 "https://developer.mozilla.org/en-US/docs/DOM/window.close" 


在正常情況下,firefox只能讓是被window.open打開的頁面執行window.close
而不是經由window.open打開的頁面是不能被window.close的

有個方法可以讓他不是藉由window.open也能執行window.close
不過要自己設定
首先打開firefox
在網址輸入about:config

輸入好之後按下enter
會看到非常多的設定值....


搜尋allow_scripts_to_close_windows,將設定值由false改成true




這個步驟的確有點麻煩,但是沒有辦法...
如果說自家產品因為這個功能無法在所有瀏覽器有一致行為
那麼只好跟寫spec的人好好溝通了xd
是說... 這種需求好像也不常見...

可參考以下網址:
http://www.jb51.net/article/17714.htm
https://developer.mozilla.org/en-US/docs/DOM/window.close
http://support.mozilla.org/zh-TW/questions/858332

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...