Tryy With Java: Javascript

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

2016年3月10日星期四

html submit to iframe and call parent function

最近用了一個古老的解法，就古老的系統只能用古老的解法～

主要是為了做出仿 ajax post input file 的行為
（那為什麼不用 jquery ajax post file 就好，就><...IE太舊在 ajax時不認識 file 這個 type）

所以這個解法的概念就是～
html XXX 內嵌一個看不見(display:none) 的 iframe AAA，
然後把 form BBB（ input type="file", ） post submit 到 iframe AAA 裡～
其 form 的 action （把檔案傳到server）後 response 結果會在 iframe AAA裡，
因為 iframe AAA 算子視窗的一個，所以就可以 call parent XXX 裡的 function 做 refresh (就像 ajax 的 callback function)

就～ form （其實這個 form 內容可以用 jqeury.html(xxxx) 生成...可以藏得更裡面XD），target 指向 iframe ，
<form enctype="multipart/form-data" action="xxxxx" id="sub-form" target="sub-iframe" method="POST" >
                                <input type="file" name="uploadFile" id="uploadFile">
</form>

<iframe style="display: none" id="sub-iframe" src="javascript:false;" name="sub-iframe"></iframe>

定個 callback function 進行後續動作，要傳值進去也是可以的～
function uploadFileCallback()   {
    .....
}

而在 action response 的內容時～
<html>
    <head>
    </head>
    <body onload="window.parent.uploadFileCallback();">
    </body>
</html>

題外話，用 jquery.html() 組 form 的資料是可行的～可以實現動態 submit 不同的form 內容，然後只看表面上的code是看不出來的喔XD...

2016年1月17日星期日

fix image width:auto

這問題似乎只有在chrome上會碰到～
在 IE 宣告陣亡之後，問題兒童的寶座快要交給chrome了＝＝|||...

測了很久，目前的結論就是，chrome的 width:auto，得到的圖片長寬不太正常....
正常在 firefox 上 width:auto 會得到原圖片的大小，但在chrome上有時會有時不會=_=a...
（規則大概就是，開新chrome，開page的那第一次，圖片大小會有問題（有誤差），但是如果縮放視窗、全螢幕、F12，之後看就又對了＝＝a）

總之，一個一勞永逸的方式就是～自己取得原圖片的原始大小Orz..
此外，自己取圖片的大小並設定還有一個好處就是～
順便解 chrome 在 jquery.load(xxx.html) image進來時，那些 image 的長寬都是0 的問題...
然後搞笑的是...在我的情況下，firefox ctrl+F5時，圖片自動會變 24px??!!!....

一般網路上給的資源大多是只取一個圖片的原始大小，
但在我的case裡，是要全部的圖片都一起縮放～
就改寫了一下～

重點就是... new Image 來暫存要讀的圖檔～
在 image onload 事件時，可以拿到他原始的長寬...
然後為了要觸發事件，所以在寫完 onload 事件後，再去把 image 的 src 指向位置過去。
http://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

---------------------------------------------------------------

2015年11月24日星期二

screen rotated on mobile and change background image

手機網頁，跨裝置的網頁，可以找一些 cross device 的 css framework...
搭配方塊排版的設計，就可以得到相當不錯的結果～

我覺得手機網頁最大的重點就是，好好的設定meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
如果在意某些瀏覽器放大縮小會讓版面爛掉的話，就加上 user-scalable=0...
然後自己做個字型放大功能一.一b...

另外就手機有直式跟橫式的差別～～
（PC基本上都是橫式）
若背景是張圖片的話，然後....想要像APP那樣子，做個比較漂亮的轉換的話～
當然首先要有兩張圖～
ex: background_h.jpg（橫）, background_v.jpg（直）

然後在 window.onresize (螢幕大小切換)
但～～直接改寫 window event 是件很可怕的事情～所以要用 event addEventListener 的方式實作較好～
參考網路上的資源修改成

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
        if (object.addEventListener) {
            object.addEventListener(type, callback, false);
        } else if (object.attachEvent) {
            object.attachEvent("on" + type, callback);
        } else {
            object["on"+type] = callback;
        }
    };

    addEvent(window, "resize", function(event) {
//check screen width and height
        var oh = $(window).height();
        var ow = $(window).width();
        var sz = 'h';
        if(oh > ow) {
            sz = 'v';
        }

            $('.content').css('background', 'url(imgs/background_'+sz+'.jpg) no-repeat');
            $('.content').css('background-position', 'center center');
            $('.content').css('background-size', 'cover');

    });

如果想要在轉換時，做個過場動畫...
可以用jquery 的 animate，但...因為圖是現load的，
在網路不穩的手機上～其實蠻讓人困擾的就是...

想想最簡單的方式，應該就是做一張大張的圖，直接符合橫，寬的版...
然後背景圖定位放在中間～
（缺點就是那張圖會很大張！還有一些美感的問題就是...）

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～

2014年12月14日星期日

jquery ui drag on android web browser

可能是因為觸控板的關係~
所以在pad的瀏覽器下~jquery的拖拉會有問題~
還好這時候~只要加入一隻修正就好了^O^b...

好心的stackoverflow
http://stackoverflow.com/questions/5796109/jquery-drag-and-drop-on-touch-devices-ipad-android

以及
http://touchpunch.furf.com/

2012年6月15日星期五

FB JS SDK-顯示粉絲團並檢查按讚

我也是現在才知道~原來在粉絲團按讚就等於加入粉絲團了!!

粉絲團內容+按讚使用like_box,
如果要跟網路上一樣精簡只有讚按紐可以用like_button

官網上這些被列入plugin, 還有預覽跟gen code很貼心!!
http://developers.facebook.com/docs/reference/plugins/like-box/

在送出page前check有沒有加入粉絲團一樣用FB.api...
此頁是接在之前登入APP後做的~ 所以能來到這的user是都已經登入過囉!!

---html/jsp include
<script src="http://connect.facebook.net/zh_TW/all.js"></script>

<div id="like_box" style="margin-top:5px;display:none">
       <div class="fb-like-box" data-href="http://www.facebook.com/tyepb" data-width="300" data-show-faces="true" data-stream="false" data-header="false"></div>
</div>

---script/js file
FB.init({
    appId: '{APP_ID}', // App ID
    //channelURL: '....................', // Channel File
    status: true, // check login status
    cookie: true, // enable cookies to allow the server to access the session
    oauth: false, // enable OAuth 2.0
    xfbml: true // parse XFBML
});

function fan2() {
    var pid = '{PAGE_ID}';
    var isFan = false;
    FB.api('/me/likes/'+pid,function(response) {
        //console.log(response);
        if( response.data ) {
            if(response.data) {
                for(var i = 0 ; i < response.data.length ; i++) {
                    if(pid == response.data[i].id) {
                        isFan = true;
                        //console.log('??it is fan!!');
                        //return true;
                    }
                }
            }
            if(isFan) {
                //do something when user like fans page
            } else {
                //do something when user unlike fans page
                return false;
            }
        } else {
            //user not login/or not connect FB APP
            return false;
        }
    });
    return false;
}

FB JS SDK-使用者登入FB APP

不知道是不是閏月的關係~ 最近真是太血淚了Orz..

在Java Base, FB沒有特製的SDK, 就只能用JS SDK
主要有Issue要判斷~ facebook的user是不是某某粉絲團的粉絲~
所以要先弄一個FB APP去access使用者資訊..

而如何讓使用者登入FB APP並同意隱私權授權..
不換頁~ 直接在同一頁登入..
在官網的範例有很不錯的範例~ 我只是把另開改成在原本頁面處理...
FB.api + oauth dialogs
http://developers.facebook.com/docs/reference/dialogs/oauth/

---html/jsp include FB js lib
<script src="http://connect.facebook.net/zh_TW/all.js"></script>

---js script/file
FB.init({
    appId: '{APP_ID}', // App ID
    //channelURL: '....................', // Channel File
    status: true, // check login status
    cookie: true, // enable cookies to allow the server to access the session
    oauth: false, // enable OAuth 2.0
    xfbml: true // parse XFBML
});

function loginUser() {
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            //login and permit APP access before
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            //do something when user login FB APP ok
            $('#like_box').css('display', 'block');
        } else if (response.status === 'not_authorized') {
            //login but not access app
            doLoginApp2();
        } else {
            // the user isn't logged in to Facebook.
            doLoginApp2();
        }
    }, true);
}

function doLoginApp2() {
    var appID = '{APP_ID}';

    var path = 'https://www.facebook.com/dialog/oauth?';
    //on moblie, display=touch
    var queryParams = ['client_id=' + appID, 'redirect_uri=' + window.location, 'response_type=token', 'display=touch'];
    //on PC web
    //var queryParams = ['client_id=' + appID, 'redirect_uri=' + window.location, 'response_type=token'];
    var query = queryParams.join('&');
    var url = path + query;

    window.location = url;
}

2011年8月15日星期一

[CSS]下拉選單被google map檔住

標題說真的有點長~
發生的情況還要幾個先決條件~
drop down menu(float) + google map + IE
反正又是萬惡IE啦~~

解法當然首先要設定z-index..
float的 ul style="z-index:100"(反正要大)
google map的 div style="z-index:1"(比上面的小)

但是在某些情況下IE還是會被地圖擋住..
這時候要檢查css裡面的 position
IE下z-index要正常運作的一個前題是position:absolute..
所以如果這兩個地方如果有一個不是~ 很可能就不會作用..

2011年8月11日星期四

[CSS]排版置中

超久沒更新~ 最近來更新一些最近的心得QQ

萬惡的IE版都排不好~~為了在寬螢幕置中
align=center是不夠低, 那就加上這個吧~

body
{
_text-align:center;
}
#main
{
width:1024px;
margin:0 auto;
_text-align:left;

}

2009年10月29日星期四

[HTML]img下的邊線

感謝一位只會table的美工...
CSS真的是沒有這麼的突飛猛進過一_一|||...
不過很多原因跟本都是IE跟FF~ 一個吃一個不吃~
唉...真是會給他昏倒...

調到最後終於剩下莫名其妙的圖片底下有一條線...
還好google大神幫偶找到了這個Q_Q...
http://www.fming.cn/chengxu/44.htm
我只能說這位仁兄你解決了偶N個疑問Orz...

就只要很簡單的設定font-size:0...T^T...感動阿~

2009年7月28日星期二

[Javascript] 詭異的IE6 href 換頁

話說~ ie6真是萬惡的淵藪.. 這個問題卡了整整兩天Orz..

原文是降子低~
< a href="javascript:void(0);" onclick="submitForm('Insert');">新增使用者< / a>

看起來一點問題都沒有=_=a..firefox也很正常..就這個link搞了很久居然都不動..
本來以為是沒有call到submit..可是jsp log也說跑了後面的頁面流程了...
就是該死的網頁沒換成下一頁~ 一度懷疑過struts, html onload..最後只能懷疑到這...擺明沒錯的東西了!!(這個用法寫了n百次, 都沒出過事, 怎麼會這麼怪一"一?)

後來改成...
< a href="#" onclick="submitForm('Insert');">新增使用者< / a>
Ohya...能動了..但是#會跳去網址列很醜阿Q_Q...

這時候請出貴公司的javascript大師解惑..

原來..在瀏覽器上, href的行為, 其實就等於是onclick 動作..所以有href沒click不會有事...
相當於這樣..
< a href="submitForm('Insert');" >新增使用者< / a>
但是這樣會把js function直接show在底下的status bar..比較不安全跟不好看...

但是當兩個同時存在時..則會執行onclick, 又執行href..就變成最後的結果是void(0);<---什麼都不做了Orz...

所以要怎麼搞才有最完美的解.. 就是在onclick最後加上return false;!!

< a href="javascript:void(0);" onclick="submitForm('Insert');return false;">新增使用者< / a>

這樣可以強迫瀏覽器在onclick事情做玩後跳掉..就不會跑到href了~
或者在submitForm function裡面的最後return false也可以..
但是要記得~ 只有return false有用...return true..href還是會執行的O.O/

2008年10月22日星期三

[Javascript]快速建立物件屬性

最近有需要用到很大量的Javascript, 但是原本都只會一個var等於一個值...
想說要是如果能把他當物件使用就好了...

這個是後來集合最快給值的寫法XD:
(其實有一些是用了json之後才發現原來javascript可以這樣子寫O.Oa)

var items=[]; // equals var items=new Array();
items[0]={name:'剪刀',type:'文具',price:150};
items[1]={name:'訂書機',type:'文具',price:200};

以此類推...

取值就可以用:
items[0].name
items[0].type
items[0].price

另外如果是要快速建立已經定好的物件, 可以用這個方式
var item1 = new Item({name:'原子筆',type:'文具',price:25});

2008年8月6日星期三

[Javascript]判別是否用IE瀏覽器

現在就IE跟FF為大宗...
雖然有個標準在...不過反正兩個沒事就在那邊偷吃步一下支援一下不支援...
每次都還要量身定做=_=|||...

function isIE() {
var b =navigator.appName;
if(b != "Microsoft Internet Explorer") {
return false;
} else {
return true;
}
}

習慣上就IE...不是IE就當FF跑...

補充如果在IE上才用b.js 的include寫法(補破洞專用的js寫用=.=)
< !--[if IE]>
< script type="text/javascript" src="./b.js">< /script>
< ![endif]-->

[Javascript]取得網址列參數

平常jsp寫習慣了...拿個參數都是request.getParamter("ooxx");
簡單易懂又好拿...

不過覺得麻煩的是要嵌jsp的一堆東西...
有次偷懶只寫了html, 後來發現要接參數..又懶得把他改成jsp...
就從google大神問到了javascript取得網址列參數的用法...
不過我想...post method可能拿不到吧~

function getQuery(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}

應用上:
var id = getQuery("id");
等同於:
var id = <%=request.getParamter("id")%>

[Javascript]圖片無法顯示使用其他圖片

這個問題的起源是因為...
因為有要上傳圖檔到server上預覽...
但是因為有很無聊的上一步, 下一步流程...
搞不懂圖現在是在temp區還是正式區了...

用個js小撇步
< IMG id="preview_pic" ALT="" src="'+imgPath+'" >

document.getElementById('preview_pic').onerror = function(){
this.src = document.getElementById('imgPath2').value;
};

2008年6月17日星期二

[JavaScript]完整保存TextArea的文字

這個主要是在textarea內給人填html語法, submit過後好幾頁還需要預覽那個html語法...
因為裡面會有換行, <>, ", ', \, 這堆跳脫字元...
要去加字也不對...
因為之後直接取出來不能用...
後來有Javascript大師提供的...偷吃步XD"...

提示: 用div包起來, 不要顯示

< div id="noDisplay" style="display:none">
<%out.print(session.getAttribute("html_text"));%>
< /div>

javascript:
document.getElementById('preview').innerHTML = document.getElementById('noDisplay').innerHTML;

\囧/ 想一想這個真是有夠神奇的偷吃步...

2008年1月22日星期二

[Javacript]讀取解xml資料

這是算用IE/FireFox裡內建讀xml資料的方法...
(網路上老是只貼一半, google大神問了好幾次XD)
跨兩個瀏覽器ok的寫法...

IE跟FireFox兩個讀xml的function跟後來取node的方式都不一樣...所以還是得分開寫

另外xml load進來的時間有點慢, 若是xml檔太大...有時後還沒load完...
items還沒建完, 就會有點怪怪的...
所以建議是...load xml最好是能寫在最前面, 讓程式有足夠的時間去load
我的偷吃步是寫死一個default的item[0]...所以才會看到從i+1開始算XD...
反正總是剛開啟用default值跑就夠了^_^!

另外同事是說...也可以用ajax去out print一個xml出來讀也是可以啦...
不過ajax要另外寫一隻...就又懶惰了一_一|||

還有用這個方法的話, 瀏覽器會暫存住資訊...所以發現要是改了xml資訊...
發現程式沒有做對應的變動...記得去清一下暫存資訊/表單資訊應該就可以了~
(差點被FireFox嚇死XD)

blog不能吃 < 緊連的字XD...又試了老半天...空一格就好了QQ

var xmlDoc;
var items = new Array();
function init() {
if(document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load("./aabbcc.xml");
xmlDoc.onload = function(){itemFireFoxSetting();}
} else {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("./aabbcc.xml");
itemIESetting();
}
}

function itemFireFoxSetting() {
var ads = xmlDoc.getElementsByTagName('item');
/*
< item >
< id >A11< / id >
< /item >
*/
//alert(ads.length);

for(var i=0; i < ads.length; i++) {
var tmp = new Array();
tmp[0] = ads[i].getElementsByTagName('id')[0].firstChild.nodeValue;
items[i+1] = tmp;
//alert(tmp[0]);
}
}

function itemIESetting() {
var ads = xmlDoc.documentElement.selectNodes('item');
for(var i=0; i < ads.length; i++) {
var tmp = new Array();
tmp[0] = ads[i].getElementsByTagName('id')[0].firstChild.nodeValue;
items[i+1] = tmp;
//alert(tmp[0]);
}
}

訂閱：文章 (Atom)

2016年3月10日 星期四

2016年1月17日 星期日

2015年11月24日 星期二

2015年5月6日 星期三

2014年12月14日 星期日

2012年6月15日 星期五

2011年8月15日 星期一

2011年8月11日 星期四

2009年10月29日 星期四

2009年7月28日 星期二

2008年10月22日 星期三

2008年8月6日 星期三

2008年6月17日 星期二

2008年1月22日 星期二