※Js關閉瀏覽器視窗

※Js關閉瀏覽器視窗 - IE、Chrome、Safari、Firefox

※Firefox必須將偏好設定 dom.allow_scripts_to_close_windows設定為true，才能以Js關閉視窗。

在Chrome中 使 vertical-align:top 有作用

Two methods for vertical centering in CSS

< div id="outer">
    < div id="inner">Element to be aligned< /div>
< /div>

#outer {
    display: table;
    width: 100%;
    height: 100%; /* Height can be anything */
}
#inner {
    display: table-cell;
    vertical-align: top;
}

當Win8 RT IE10遇到Flash內容，HTML Page需要這行，來啟動桌面版(傳統版) IE 及其Flash Player plugin播放swf

當Win8 RT IE10遇到Flash內容，HTML Page需要這行，來啟動桌面版(傳統版) IE 及其Flash Player plugin播放swf。

< meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" >

http://msdn.microsoft.com/en-us/library/ie/
Developer guidance for websites with content for Adobe Flash Player in Windows 8 (Internet Explorer)前往

[CSS] Cross Browser Opacity

CSS → Cross Browser Opacity

例：透明度0： ↓↓↓

.opacityClass {

  /* IE 8 */

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  /* IE 5-7 */

  filter: alpha(opacity=0);

  /* Netscape */

  -moz-opacity: 0.0;

  /* Safari 1.x */

  -khtml-opacity: 0.0;

  /* Good browsers */

  opacity: 0.0;

}

引用來源：http://css-tricks.com/snippets/css/cross-browser-opacity/

ios裝置瀏覽器播放HTML5 Video & Audio無法自動播放，必須點擊後播放。

ios裝置瀏覽器播放HTML5 Video & Audio無法自動播放，必須點擊後播放。
即便設成：
audioObj.autoplay = true;
或
audioObj.play();

仍得點擊內建播放介面的play鈕，才能開始播放。

Chrome瀏覽器 + 從iframe裡調用父視窗裡的函數

我們理解通常可使用「window.parent.函數()」在iframe裡調用父視窗的某個函數
但在作業平台的檔案系統，以Google Chrome瀏覽器預覽HTML，卻總是發現無法如IE、FF、Opera、Safari瀏覽器正常運作。
例如，file:///C:/mypages/mainPage.html

百思不得其解之後，終於發現：
問題其實出在Chrome不允許在檔案系統中使用 parent 參照父視窗。
但在web server下，「window.parent.函數()」則可如常運作。
例如，http://localhost/mypages/mainPage.html

undefined

HTML5_canvas_drawImage()_在canvas上繪製外部jpg點陣圖

< !DOCTYPE HTML>
< html>
< head>
< meta charset="utf-8">
< title>無標題文件< /title>
< style type="text/css">
#canvas1 {
 color: #000000;
 font-size: 100px;
 background-color: #000000;
 border: medium dotted #ffffff;
}
body {
 background-color: #000000;
}
< /style>< /head>

< body>

< canvas id="canvas1" width="550" height="400">< /canvas>
< script language="javascript">
//
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
//
var image = new Image();
image.onload = function(){
 context.drawImage(image,0,0,canvas.width,canvas.height);
};
image.src = "nv007-001a.jpg";
< /script>

< /body>
< /html>

HTML5__canvas標籤

< canvas id="canvas1" width="550" height="400">< /canvas>

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

context.fillStyle = "#aabbff";
context.fillRect(100,100,100,100)

context.fillStyle = "#ffffff";
context.fillText("Hello World!!!",150,130);

HTML 5 新增 < canvas> 標籤。
藉由JavaScript 操作 HTML DOM CanvasRenderingContext2D 對象所提供的一組繪圖 API，
達到在畫布上繪圖的目的。

A.在html5中加入標籤：
< canvas height="400" id="canvas1" width="550">< /canvas>

B.取得canvas 畫布的參照：
var canvas = document.getElementById("canvas1");

C.取得 Context 繪圖環境的參照：
var context = canvas.getContext("2d");
這即是取得 CanvasRenderingContext2D 對象的參照
CanvasRenderingContext2D 對象提供了一組豐富而可在畫布上繪圖的圖形函數。

< !DOCTYPE HTML>
< html>
< head>
< meta charset="utf-8">
< title>無標題文件< /title>
< style type="text/css">
#canvas1 {
 color: #000000;
 font-size: 100px;
 background-color: #FC0;
 border: medium dotted #036;
}

< /style>< /head>

< body>
< canvas id="canvas1" width="550" height="400">< /canvas>
< script language="javascript">
//
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
//
context.fillStyle = "#aabbff";
context.fillRect(100,100,100,100)
context.fillStyle = "#ffffff";
context.fillText("Hello World!!!",150,130);

< /script>

< /body>
< /html>

HTML5+JS_小動畫實驗

HTML5+JS_小動畫實驗