IE CSS 失效

CSS 在 IE 瀏覽器下失效

在網站開發時，總會發現 IE 瀏覽器跟別人不太一樣
最常出事就是 CSS，CSS 在 IE 瀏覽器下失效
提供幾個從 stackoverflow 找的方法能影響下面

Do not code CSS on the HTML file

    這裡應該是指 CSS Code 有很多 HTML Code 不一樣，舉個最常出現的例子就是註解。

 <style type ="text/css"> 
  <!-- You need this in order to have CSS, it has --> 
  p {color: blue; font-family:arial;}
 </style>

    沒意外上面這段註解會失效，且很可能影響下面的程式碼

Make a separate CSfile and link to it

 <link rel="stylesheet" href="css/style.css">

Always add <!DOCTYPE> tag to every HTML page

    其中最有效的就是第三點，在每個 HTML 頁面開頭都要加上所謂的 DOCTYPE 「文件類型」，DOCTYPE 的功能主要是標準化網頁，如果沒有這個 Tag，瀏覽器會依照自己的意思去解釋，而其中 IE 最怪，所以常常失效!

請把指定版本的<meta>放在第一位

    原話 : Make <meta http-equiv="X-UA-Compatible" content="IE=edge">, is the first <meta> tag on your page, otherwise IE may not respect it     上面這個指定 IE 用 Edge 去讀取這段 Code，不放第一個還真的會失效，你可以用 F12 去檢查當前瀏覽頁面用的 IE 版本，如果你沒有指定 DOCTYPE，不意外會變成 IE5，很慘的...

參考資料 :
1. https://stackoverflow.com/questions/595768/css-not-working-in-ie
2. http://www.flycan.com/article/css/html-doctype-97.html
3. http://www.webpage.idv.tw/maillist/maillist4/new/02/02.htm
4. https://www.itread01.com/p/648379.html
5. https://stackoverflow.com/questions/25557299/internet-explorer-11-disable-display-intranet-sites-in-compatibility-view-via

Read More

CSS vertical-align

有時候 Input 的 text 或 textarea 有時候預設的對齊可能不盡理想

這時候可以用 vertical-align，這主要是用來對齊圖片的

但有時候你會想讓 textarea 對齊隔壁的物件，因為沒有此參數的話他會對齊 textarea 的底線

textarea {
  vertical-align:25px; // 向上修正 25px
}

也有支援其他參數，但 w3schools 已有列表這邊不在贅述

這裡再列個w3沒列到的參數

// for firefox
textarea {
  vertical-align: -moz-middle-with-baseline;
}
// for chrome
textarea {
  vertical-align: -webkit-baseline-middle
}

效果為對齊text的底線

參考資料 :
1) https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
2) https://stackoverflow.com/questions/45852388/webkit-baseline-middle-and-moz-middle-with-baseline

Read More

改變 Radio Button 的文字 ( Change the text of a radio button )

如果你想要在網頁 Update Radio Button 的文字

通常用的 .val(), .text(), .html() 都沒有辦法

這時應該做的是在 HTML 裡把 Radio Button 的文字用一個Label包起來

然後再使用 .next().html() 去Update Radio Button 的文字

這裡的 Label 我使用的是 span

HTML : 

<input type="radio" name="year" value='1'><span> 1 年 </span>
<input type="radio" name="year" value='2'><span> 2 年 </span>
<input type="radio" name="year" value='3'><span> 3 年 </span>

JS :

tmp = $("input[name='year'][value='3']").next().html();

參考資料 :
https://stackoverflow.com/questions/9945748/how-to-change-the-text-of-a-radio-button

Read More

Javascript 做簡單的Table Sorting

用 Javascript 作 Table Sorting

這裡寫 2 種自己的做法

第一種 w3schools

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // If so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

第二種 自己亂寫的

function sort_table(col){
     var i, j, arr = new Array(), arr2 = new Array();
     var table = document.getElementById("mytable");
     var rows  = table.rows;
     // 從 1 開始，因為 0 是欄位的標題 (th)) 
     for (i = 1; i < rows.length; i++) {
          // 得 TD 內 innerHTML，加 i 是因應 innerHTML 完全一樣的 CASE
          arr[i-1] = rows[i].getElementsByTagName("TD")[col].innerHTML.toLowerCase() + i;
          // 用 MAP 紀錄 
          arr2[arr[i-1]] = i;
     }
     arr.sort();
     // 利用 insertBefore 來重新排序
     // 缺點有可能會影響 map 裡存的 index
     // 所以要記錄以移動的 cell
     var index = new Array();
     for(i = 0; i < arr.length; i++){
          var offset = 0;
          // 看過往 cell 的移動是否會影響現在的 index
          for(j = 0; j < i; j++){
               if(arr2[arr[i]] < index[j])offset++;
          }
          rows[1].parentNode.insertBefore(rows[arr2[arr[i]]+offset], rows[1]);
          // 紀錄 cell
          index[i] = arr2[arr[i]];
     }
}

參考資料 :
https://www.w3schools.com/howto/howto_js_sort_table.asp

Read More

HTML 下拉表單預設選項

在網頁裡有下拉表單 <Select>

有時會希望使用者真的有作過選擇，才進行下一步動作

這時會設置一個預設的 Option，使其 value = ""，來判斷使用者有無真的作選擇

    <option value='' selected disabled hidden>請選擇</option>

selected:	預設此選項
disabled:	使此選項不能點擊
hidden:	讓此選項在下拉的時候消失

    <option value='' selected disabled hidden style='display: none' >請選擇</option>

style='display: none' => 舊版本 Browser 可能不支援 hidden

參考資料 :
https://codeday.me/bug/20170611/22563.html

Read More