目前日期文章:201308 (8)

瀏覽方式: 標題列表 簡短摘要
document.onkeydown

document.onkeypress

document.onkeyup

<iframe align="top" height="30" name="KEY_1" scrollbars="0" scrolling="no" src="" width="100"></iframe><br />
<br />
document.onkeypress
<iframe align="top" height="30" name="KEY_2" scrollbars="0" scrolling="no" src="" width="100"></iframe><br />
<br />
document.onkeyup
<iframe align="top" height="30" name="KEY_3" scrollbars="0" scrolling="no" src="" width="100"></iframe><br />
<br />


<script>
function Fkeydown() {
KEY_1.document.close();
KEY_1.document.write("<font size='3' color='Blue' VALGIN='top' >" );
KEY_1.document.write(event.keyCode);
}
document.onkeydown=Fkeydown;


function Fkeypress() {
KEY_2.document.close();
KEY_2.document.write("<font size='3' color='Blue' VALGIN='top' >" );
KEY_2.document.write(event.keyCode);
}
document.onkeypress=Fkeypress;


function Fkeyup() {
KEY_3.document.close();
KEY_3.document.write("<font size='3' color='Blue' VALGIN='top' >" );
KEY_3.document.write(event.keyCode);
}
document.onkeyup=Fkeyup;
</script>

| CSS | HTML | document.onkeyup | document.onkeypress | document.onkeydown | VALGIN | scrolling | scrollbars | align |

c8cc168 發表在 痞客邦 留言(0) 人氣()

  • Aug 27 Tue 2013 22:10

setTimeout()


setTimeout('FFF( )', 3000)
FFF()  = 指定來執行 function
3000   = 指定時間為3秒

clearTimeout(XXX )
XXX = 指定名稱


例子:
XXX = setTimeout('FFF( )', 3000)
.
.
.
clearTimeout(XXX )

c8cc168 發表在 痞客邦 留言(0) 人氣()

Blogger 嵌入 Facebook Comments 

超級簡易版

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));



document.write('<div class="fb-comments" data-href="'+document.location+'" data-num-posts="5" data-width="470"></div>');
</script>



後台管理版
1.首先要去 Facebook 開發人員網頁建立一個新的應用程式(可按我前往

2. 取得帳號ID
再來就是要取得管理者也就是自己 Facebook帳號的 ID,方法如下:


Facebook查看個人首頁,如果網址是以下這種,那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字

如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱

代表你的個人首頁已經命名過了,那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱

進去後會看到「"id":"數字"」,那串數字就是你的帳號ID。

3. 在 Blogger 後台的「範本」->「編輯HTML」->「展開小裝置範本」打勾,開始艱辛的修改程式碼的步驟(變動前最好先將整份範本備份一下)。

(可按下Ctrl+F)搜尋 "<head>" (是""裡的字串不包括""),在這行下方新增一行貼上這兩行:(記得帳號ID和應用程式ID要置換成你剛剛取得的)

<meta property='fb:admins' content=' 你的帳號ID ' />
<meta property='fb:app_id' content=' 你的應用程式ID '/>

4. 搜尋 "<body" (是""裡的字串不包括""),在這行下方新增一行貼上以下的程式碼:
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : '你的應用程式 ID',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });
        FB.Event.subscribe('xfbml.render', function(response) {
        });
        FB.Event.subscribe('auth.sessionChange', function(response) {
            // 當 Facebook session 改變時通知
        });
        FB.Event.subscribe('edge.create', function(response) {
            // 當有人按讚時通知
        });
        FB.Event.subscribe('comments.create', function(response) {
            // 當有新留言時通知
        });

    };
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/all.js#appId=你的應用程式ID&amp;xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼,通常建議都放每篇文章結束後的下方,所以我們可以搜尋"<b:includable id='comments' var='post'>" (是""裡的字串不包括""),找到這個位置,在下面新增一行貼上這行:

<div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/>





而我們辛辛苦苦這麼多做這麼多步驟,無非就是為了可以管理呀(不然就用超級簡易版就好了)!按下「管理模式」切換到管理頁面就可以隱藏你不想出現的留言了,或者你也可以去專屬的後台網站去管理,網址是:https://developers.facebook.com/tools/comments




如上圖藍色部分,如果前面的設定都OK的話這塊 Debugger 區是會抓的到正確的資料的,如果這塊有奇奇怪怪的錯誤資訊,代表你有哪個地方沒設對,可以去 Debugger網站抓一下 bug,網址是:https://developers.facebook.com/tools/debug 。如果這網址下面有任何紅色Error區,代表你有哪個環節有問題,請自行照上面的錯誤提示去修改囉!修改完再測一次,紅色區塊消除的話,代表設定成功囉!



c8cc168 發表在 痞客邦 留言(0) 人氣()

在 Blogger 後台 → 新增小工具 →  HTML/JavaScript
加入下方 CSS


<style type='text/css'>
body {             /*全版背景圖案*/
background-image:url("https://lh3.googleusercontent.com/-eNDfdkO5YEA/U6tz9ceyZqI/AAAAAAAABXM/lmWdVlZ3HkM/w100-h71-no/1030178739_t.jpg");
background-repeat: repeat;}

body {min-width: 100%; /*全版寬度*/}

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 700px; /*文章寬度最小*/
max-width: 2500px;/*文章寬度最大*/
width:100%;       /*文章寬度*/}

.main-inner .column-left-outer {
width: 300px;         /*左邊欄位寬度*/
margin-left: -300px;  /*跟左邊欄位寬度*/}

.post {                 /*文章背景*/
border-radius: 50px;    /*文章背景圓角*/
background-color: rgba(238, 238, 238, 0.3);
border:5px solid peru;  /*文章背景邊界*/}


#navbar{display:none;  /*隱藏頂部Blogger 導覽列 */ }

#blog-pager{display:block;  /*呈現 新舊 文章選擇 */}

.feed-links{display:none;  /*隱藏底部訂閱:文章(Atom)*/}

.status-msg-wrap{display:none; /*隱藏 標籤 最新文章*/}

.Attribution {display:none;  /*最底下範本版權說明*/}

h1 {font-size:8px;
    font-weight:bold;
    text-align:left;
    color:gray;}

h3 {font-size:20px;
    font-weight:bold;
    text-align:center;
    color:blue;}

h4 {font-size:20px;
    font-weight:bold;
    text-align:left;
    color:black;}
</style>

c8cc168 發表在 痞客邦 留言(0) 人氣()

將Blogger標籤(分類)變成下拉式選單
本網誌頂部有下拉拉式選單 例子。 


此時再『開啟小裝置翻本』中勾選,之後搜尋以下片段:
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>


將以上內容替換為:
<select onchange='location=this.options [this.selectedIndex].value;' onmouseover='this.focus()' style='cursor: pointer;width:150px; background-color:#C0C0C0; color:#000;font-size:20px;border: 3px outset #d5d5d5;'>
<option>ALL</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
<optgroup style='font-size:5px;' label=""></optgroup>
</b:loop>
</select>

c8cc168 發表在 痞客邦 留言(0) 人氣()





document.body.appendChild(oTag)//body-主體子對象
document.body //指定文檔主體的開始和結束等價於body>/body>
document.body.bgColor //設置或獲取對象後面的背景顏色
document.body.link //未點擊過的鏈接顏色
document.body.alink //激活鏈接(焦點在此鏈接上)的顏色
document.body.vlink //已點擊過的鏈接顏色
document.body.text //文本色
document.body.innerText //設置body>…/body>之間的文本
document.body.innerHTML //設置body>…/body>之間的HTML代碼
document.body.topMargin //頁面上邊距
document.body.leftMargin //頁面左邊距
document.body.rightMargin //頁面右邊距
document.body.bottomMargin //頁面下邊距
document.body.background //背景圖片

document.body.appendChild(oTag) //動態生成一個HTML對象

常用對象事件
document.body.onclick=」func()」 //鼠標指針單擊對象是觸發
document.body.onmouseover=」func()」 //鼠標指針移到對象時觸發
document.body.onmouseout=」func()」 //鼠標指針移出對象時觸發
———————————————————————
location-位置子對象

document.location.hash // #號後的部分
document.location.host // 域名+端口號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分
document.location.port // 端口號
document.location.protocol // 網絡協議(http:)
document.location.search // ?號後的部分

documeny.location.reload() //刷新網頁
document.location.reload(URL) //打開新的網頁
document.location.assign(URL) //打開新的網頁
document.location.replace(URL) //打開新的網頁
———————————————————————
selection-選區子對象
document.selection
———————————————————————

images集合(頁面中的圖像)

a)通過集合引用
document.images //對應頁面上的img標籤
document.images.length //對應頁面上img標籤的個數
document.images[0] //第1個img標籤
document.images[i] //第i-1個img標籤

b)通過nane屬性直接引用
img name=」oImage」
document.images.oImage //document.images.name屬性

c)引用圖片的src屬性
document.images.oImage.src //document.images.name屬性.src

d)創建一個圖像
var oImage
oImage = new Image()
document.images.oImage.src=」1.jpg」
同時在頁面上建立一個img /標籤與之對應就可以顯示

———————————————————————-

forms集合(頁面中的表單)

a)通過集合引用
document.forms //對應頁面上的form標籤
document.forms.length //對應頁面上/formform標籤的個數
document.forms[0] //第1個/formform標籤
document.forms[i] //第i-1個/formform標籤
document.forms[i].length //第i-1個/formform中的控件數
document.forms[i].elements[j] //第i-1個/formform中第j-1個控件

b)通過標籤name屬性直接引用
/formform name=」Myform」>input name=」myctrl」/>/form
document.Myform.myctrl //document.表單名.控件名

c)訪問表單的屬性
document.forms[i].name //對應form name>屬性
document.forms[i].action //對應/formform action>屬性
document.forms[i].encoding //對應/formform enctype>屬性
document.forms[i].target //對應/formform target>屬性

document.forms[i].appendChild(oTag) //動態插入一個控件
document.all.oDiv //引用圖層oDiv
document.all.oDiv.style.display=」" //圖層設置為可視
document.all.oDiv.style.display=」none」 //圖層設置為隱藏
document.getElementId(」oDiv」) //通過getElementId引用對象
document.getElementId(」oDiv」).style=」"
document.getElementId(」oDiv」).display=」none」
/*document.all表示document中所有對象的集合
只有ie支持此屬性,因此也用來判斷瀏覽器的種類*/

圖層對象的4個屬性
document.getElementById(」ID」).innerText //動態輸出文本
document.getElementById(」ID」).innerHTML //動態輸出HTML
document.getElementById(」ID」).outerText //同innerText
document.getElementById(」ID」).outerHTML //同innerHTML


c8cc168 發表在 痞客邦 留言(0) 人氣()


overflow:控制當內容超過顯示區域時捲軸的顯示

overflow-x:x捲軸的顯示
overflow-y:y捲軸的顯示
捲軸顯示有四種狀態
visible(預設):內容完全顯示不嵌入顯示區域
auto:內容嵌入顯示區域,並視情況顯示水平與垂直捲軸
scroll:內容嵌入顯示區域,水平捲軸會出現但視情況顯示可捲動或不可捲動

hidden:內容嵌入顯示區域,捲軸不會出現 取消 捲軸


| CSS | HTML | overflow | overflow-y | overflow-x | scroll | visible | auto | auto | 捲軸的顯示 | 控制 | 捲軸的顯示 |

c8cc168 發表在 痞客邦 留言(0) 人氣()

c8cc168 發表在 痞客邦 留言(0) 人氣()