jquery .height在chrome/safari無法抓到正確的數值

當使用jquery的$height()時.發現在chrome及safari無法抓到正常的高度.

經過google查詢.發現$(document).ready() 改用為$(window).load()就正常了.

兩個的差異如下:

$(document).ready()代表DOM已經完成讀取但不表示圖片已經讀取完成.

$(window).load()觸發在$(document).ready()之後且所有圖片已讀取完成.

資料來源:

http://littleshell-multimedia.blogspot.tw/2012/11/jquery-height-problem-in-chromesafari.html

mediaelement.js 延伸用法

mediaelement.js 是一個非常好用的播放器.
幾乎想的到的平台都支援.

再做某個案子的時候需要有播放列表以及輪撥功能.

剛好stackoverflow上有這樣的討論.就收來做參考.

參考資源：

mediaelement.js官網
http://mediaelementjs.com/

mediaelement.js and custom playlist
http://stackoverflow.com/questions/11867779/mediaelement-js-and-custom-playlist

超好用的撰寫jQuery技巧

再找資料的時候無意見逛到的~

真的是還不錯的觀念.

就收起來當參考啦~

參考來源:http://ithelp.ithome.com.tw/question/10021702

原始參考來源:http://haineault.com/blog/84/

window.open在ie顯示錯誤訊息為不正確的引數解決方式

最近在實作案子測試的時候發現window.open這個method.
在IE不能正常的運作,但其他的瀏覽器正常(FireFox,Chrome)
google了一下找到解答.原來是在IE的時候window.open的name Parameter不能有空白.

資料來源:
window.open in IE (invalid argument)

參考:
Window open() Method

jQuery radio buttons的Change event在IE8不能正常運作的解法

今天實作某個案子的時候發現jQuery 中的radio button change event在IE8中不能正常的運作.
在google上找到了如下的寫法,可以解決這個問題;

$("#myid").bind($.browser.msie ? 'propertychange': 'change', function(){...});


資料來源:
http://www.jamesrandell.com/?p=223

線上寫Code的服務

1.JS
http://jsfiddle.net/

2.PHP
http://codepad.viper-7.com/

待續....

關閉小視窗並 Refresh 母視窗

來源:http://it.nekounya.com/javascript-close-window-and-refresh-parent-window.html

有兩個寫法

1.寫法一

<Script>
window.opener.location.reload(true);
window.self.close();</Script>

2.相容性比較高的寫法
window.opener.location.reload(true);
window.opener=null; window.open("","_self");window.close();

javascript中foreach的用法

因為js沒有foreach所以是利用for in 的方式.
參考範例如下:

javascript中foreach的用法

Ajax參考資料

網站位址：

https://developer.mozilla.org/zh_tw/AJAX

[AJAX]檢查帳號是否重複

參考來源：http://eoffice.im.fju.edu.tw/phpbb/viewtopic.php?t=2633

JavaScript :


<script type="text/javascript">
      var xmlHttp;
      var proc;
      
      //程式由此執行
        function chkAccount() {
         proc = document.getElementById("imgproc");
         proc.style.visibility = 'visible';//顯示處理中的圖片
            createXMLHttpRequest();//建立XMLHttpRequest物件
            var myId = document.getElementById("txtAccount").value;
            var url = "ValiAccount.aspx?myId=" + myId;
           
            xmlHttp.onreadystatechange = callback; //資料回傳之後，使用callback這個函數處理後續動作
            xmlHttp.open("POST", url, true);//將輸入的帳號傳至後端作驗證
            xmlHttp.send(null);
        }
        //xmlHttp.open(a,b,c)
        //第一個參數是 HTTP request 的方法，也就是從 GET、POST、HEAD 中選一個使用,都要大寫
        //第二個參數是要呼叫的url,不過只能呼叫同一個網域的網頁
      //第三個參數決定此 request 是否不同步進行
      //如果設定為true則即使後端尚未傳回資料也會繼續執行後面的程式
      //如果設定為false則必須等後端傳回資料才會繼續執行後面的程式
      
      
   //此函式在建立XMLHttpRequest物件
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {//IE
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {//other browser
                xmlHttp = new XMLHttpRequest();               
            }
        }

        function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
               var xmldoc = xmlHttp.responseXML;//接收後端程式傳回來的xml
                    var mes = xmldoc.getElementsByTagName("message")[0].firstChild.data;//將Tag 為message的值抓出來
                    var val = xmldoc.getElementsByTagName("passed")[0].firstChild.data;//將Tag 為passed的值抓出來
                    setMessage(mes, val);
                }
            }
        }
        //xmlHttp.readyState 所有可能的值： 0 (還沒開始), 1 (讀取中), 2 (已讀取), 3 (資訊交換中), 4 (一切完成)
      //xmlHttp.status = 200 (一切正常), status = 404 (查無此頁), status =500 (內部錯誤)      
       
        function setMessage(message, isValid) {           
            var messageArea = document.getElementById("divAccount");
            var fontColor = "red";
 
            if (isValid == "true" || isValid == "True") {
                fontColor = "green";               
            }
            proc.style.visibility = 'hidden';//隱藏處理中的圖片
            messageArea.innerHTML = "<font color=" + fontColor + ">" + message + " </font>";//顯示是否有重複的帳號
        }
</script>


觸發事件的input及顯示message的div及圖片 :
<input  id="txtAccount" onChange="chkAccount();"><IMG id="imgproc" style="VISIBILITY: hidden; CURSOR: wait" src="checking.gif">
<div id="divAccount"></div>


後端處理程式
ValiAccount.aspx.cs 
 private void Page_Load(object sender, System.EventArgs e)
      {
         Response.ContentType="text/xml";
         Response.AddHeader("Cache-Control", "no-cache");
         Response.Write("<response>");

         
         bool uFlag=false;
         string message="";
         if(Request["myId"]!=null)
         {
            string myId=Request["myId"].ToString();
            if(myId=="paddy")
            {
               message="帳號無人使用";
               uFlag=true;
            }
            else
            {
               message="帳號重覆";
            }

         }
         else
         {
            message="參數錯誤";
         }
         Response.Write("<passed>" + uFlag.ToString() + "</passed>");
         Response.Write("<message>" + message + "</message>");
         Response.Write("</response>");
         Response.End();

      }


回傳的XML如下：
<response>
   <passed>False</passed>
   <message>帳號重覆</message>
</response> 

JavaScript Note

Javascript的參考資料：
http://irw.ncut.edu.tw/peterju/jscript.html

Javascript開新視窗的函數

function wshow(a_Url){
  var sUrl = a_Url;
  var sTitle = "Cupon"; // 視窗標題
  var sToolbar = "no"; //
  var sLocation = "no"; //位置列
  var sDirectories = "no"; //目錄
  var sStatus = "no"; // 狀態列
  var sMenubar = "no";
  var sScrollbars = "no";
  var sResizable = "no";
  var sWidth = "410";
  var sHeight = "240";
  var sParams = "toolbar=" + sToolbar + ",directories=" + sDirectories + ",status=" + sStatus + ",menubar=" + sMenubar + ",scrollbars=" + sScrollbars + ",resizable=" + sResizable + ",width=" + sWidth + ",height=" + sHeight;
  //alert(sParams);
  //
  window.open(sUrl,sTitle,sParams);
 }

IE使用錨點時.Title後面會帶錨點值

資料來源：http://www.zwjoy.com/blog/?p=131

解决方法1：修改FLASH（这个是网上的，但我没有用这个方法）

<param name="movie" value="images/banner.swf" />
    <param name="loop" value="true" />
    <param name="menu" value="false" />
    <param name="quality" value="best" />
    <param name="wmode" value="transparent" />

生成的代码;
解决方法2：（JS修改标题，替换锚点后的内容）

$(document).ready(function() {
 //js 更换标题(去掉锚点产生的标题后缀)
 var title = $('#_headerTitle').html(); 
 var regx = /(\#.+)+/;
 title = title.replace(regx, '');
 document.title = title;
 
});

讓window.open的彈出視窗置中

function openwindow(url,name,iWidth,iHeight)
{
  var url;     //網頁位置;
  var name;    //網頁名稱;
  var iWidth;  //視窗的寬度;
  var iHeight; //視窗的高度;
  var iTop = (window.screen.availHeight-30-iHeight)/2;  //視窗的垂直位置;
  var iLeft = (window.screen.availWidth-10-iWidth)/2;   //視窗的水平位置;
  window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',status=no,location=no,status=no,menubar=no,toolbar=no,resizable=no,scrollbars=no');
}

資料來源：http://www.cnblogs.com/shiyu007/archive/2006/12/05/582801.html

Switching DIV Background Image With jQuery

範例如下：

$('#divID').css("background-image", "url(/myimage.jpg)"); 

$('#divID').click(function()
{
  // do my image switching logic here.

});

$('#divID').mouseover(function()
{
  // do my image switching logic here.
});

$('#divID').mouseout(function()
{
  // do my image switching logic here.
});

解決javascript的window.close()在IE7會有提示的問題

資料來源：http://blog.blueshop.com.tw/hent/archive/2008/01/04/53939.aspx

<script   language=javascript>
        window.opener=null;
        window.open("","_self");
        window.close();
</script>

[Google Map]自訂標籤圖示(GIcon)

資料來源：http://klcin.tw/net/google-map-gicon

如果我們能在地圖上標上加油站之類的圖示就能更直覺的表達訊息。

GIcon

• GIcon 標籤的圖示
  • .image 圖示的網址
  • .iconSize 大小，如 new GSize(16,16)
  • .iconAnchor 定位，如 new GPoint(8,8)
  • .infoWindowAnchor 訊息視窗定位，如 new GPoint(8, 8)
    若沒有指定會無法顯示訊息視窗

程式碼

執行範例

view sourceprint?

01.google.load("maps", "2.x");

02.google.setOnLoadCallback(initialize);

03. 

04.var map = null;

05.function initialize() {

06.// 檢查瀏覽器是否可使用 Google Map API

07.if ( GBrowserIsCompatible() ) {

08.map = new google.maps.Map2(document.getElementById('map'));

09.// 設定地圖中心點

10.map.setCenter(new GLatLng(25.036772,121.520269), 12);

11. 

12.addSite(map,12,'中山',25.062361,121.526194,'台北市中山區林森北路511號',1);

13.addSite(map,13,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號',2);

14.addSite(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',3);

15. 

16.} // if

17.else {

18.alert('您的瀏覽器不支援Google Map');

19.} // else

20.}

21. 

22.function addSite(map, siteCode, siteDesc, lat, lng, address, type) {

23.var icon=new GIcon();

24.icon.image="images/"+type+".gif";

25.icon.iconSize = new GSize(16,16);

26.icon.iconAnchor = new GPoint(8,8);

27.icon.infoWindowAnchor = new GPoint(8, 8);

28. 

29.var mark = new GMarker(

30.new GLatLng(lat,lng),

31.{icon:icon, title:siteDesc}

32.);

33.map.addOverlay(mark);

34.GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('地址：'+address);});

35.}