Vixual

在網頁界已經有很多的「下拉選單」程式了，不過似乎都搞得太過複雜或太華麗了。

其實下拉選單的原理很簡單，一開始只是先讓「子選單」隱藏，當滑鼠移至「主選單」時再讓子選單顯示。因此，只要能控制網頁元件的 display 樣式屬性就已經成功一半了。

因為本人喜歡重新發明輪子，所以也寫了一個簡易的網頁下拉選單的程式，可以做為初學者入門的參考。

在範例的原始碼中，我儘量讓程式碼看起來淺顯易懂，並且只用 JavaScript，不使用 jQuery 或其它 Framework。我也儘量多寫一些註解，希望 JavaScript 的初學者能看得懂。

Read more

如果想學 jQuery 的話，可以從下列的教學資源開始，讀者應具有 HTML、JavaScript、CSS 的基礎。

網站

上官林傑 - ericsk (2007)

1. jQuery 學習心得筆記 (1) – 前言
2. jQuery 學習心得筆記 (2) – 怎麼使用 jQuery 來寫 JavaScript
3. jQuery 學習心得筆記 (3) – jQuery 的事件(Event)處理
4. jQuery 學習心得筆記 (4) – Ajax (上)
5. jQuery 學習心得筆記 (5) – Ajax (下)
6. jQuery 學習筆記 (6) - 操作 DOM 物件
7. jQuery 學習筆記 (7) - 擴充 jQuery

以上這幾篇是我的 jQuery 啟蒙文章。
Read more

今天看到 Flickr 改版的資訊，我才想起我好像有一個 Flickr 帳號已經很久沒登入了!!

不過去到 Flickr 網站卻已經找不到「Google 帳號」的登入選項了 (當時我的 Flickr 是用 Google 帳號)!

查了一下，原來 Yahoo 已經在 2014 年 6 月之後就取消透過 Facebook 和 Google 的帳號登入功能了! 在 2014 年 6 月之前還可以讓你以 Facebook 及 Google 帳號登入之後轉換成 Yahoo 的帳號，現在則是超過轉換的日期而不得其門而入了。

該怎麼辦呢?

原來可以透過 Yahoo 的「密碼小幫手」重設 Google 帳號的密碼來登入 Flickr。
Read more

本站曾用過 Limit Login Attempts 這個 WordPress 的外掛程式，用以防止被暴力破解登入密碼。當有人一直以錯誤的密碼進行登入時，就會對其 IP 進行幾個小時的封鎖，然後 mail 通知你又有什麼 IP 被封鎖了，效果其實也還不錯。

不過其實只要用「.htaccess 的權限認證方式」，就可以針對 wordpress 的 wp-login.php 這個單一檔案做防護，也可以達到很好的效果。

.htaccess 認證

首先找一個安全的地方放置 .htusers 這個檔案。所謂的「安全」，是指至少不要在網頁可以被下載到的路徑。.htusers 的設定方式請參考本站另一篇文章:

• .htaccess 的權限認證方式

密碼請不要用跟 WordPress 原本的登入密碼一樣。

編輯 wordpress 目錄下的 .htaccess，在檔案最後如入:

AuthType Basic
AuthName "Restricted Area"
AuthUserFile "/path/to/.htusers"
<Files wp-login.php>
require valid-user
</Files>

如果你想進一步針對整個 wp-admin 目錄做防護，則進到 wordpress 下的 wp-admin 目錄，新增或編輯 .htaccess，一樣在檔案最後如入:

AuthType Basic
AuthName "Restricted Area"
AuthUserFile "/path/to/.htusers"
require valid-user

參考網頁

• Dynamic Drive: .htaccess password generator
• 限制WordPress後台登入次數、封鎖IP、防駭客入侵 – 香腸炒魷魚
• 幫WordPress後台築城牆 « 高登工作室
• 隱藏 WordPress 後台網址 « 高登工作室
• WordPress 如何防範暴力攻擊 Brute Force Attack « 高登工作室

狀況一

經常看到某些才成立沒有多久的 Facebook 專頁，就已經有數以萬計的粉絲按讚了。例如: 放棄治療。

這個專頁加入 Facebook 的時間還不到一個月，竟然就有 17 萬個粉絲按讚:

狀況二

又或者是，在你個人的 Facebook 頁面會無緣無故出現一些你沒有分享過，也沒有按讚的內容!!

這到底是你的 Facebook 帳號被盜用? 還是電腦中毒? 還是得了失憶症? 還是自己眼花了?

Read more

主要步驟

Discuz! 沒辦法直接從 7.2 昇級至 X3.0，中間需先昇級至 X1.5 或 X2.0 才行! 主要的昇級步驟如下:

1. 將 UCenter 昇級至 1.6.0
2. 全新安裝 Discuz! X2.0，安裝時選「僅安裝 Discuz! X (手工指定已經安裝的 UCenter Server)」
3. 轉換 Discuz! 7.2 的資料庫至 Discuz! X2.0
4. 昇級至 Discuz! X3.0

你需要準備的帳號、密碼:

1. Discuz! 7.2 的資料庫名稱、帳號、密碼
2. UCenter 創始人的密碼
3. Discuz! 7.2 的管理者帳號、密碼

昇級前請先至 Discuz! 的管理中心關閉站點。

Read more

因為 Google Reader 關了，想到 RSS 這樣方便的東西在未來可能也會有被拋棄的一天，所以才想要開始經營 Facebook 的粉絲頁。Google 這樣的作為，沒讓 Google+ 得利，反而讓 Facebook 更有機會成為網路上最大的資訊來源。

本站的 Facebook 粉絲頁冷冷清清的，寫這些文章也不是為了賺錢，如果覺得 Blog 的內容還不錯的話，還希望大家按個讚來 follow 一下:

不過每次在 Blog 寫個文章還要自己把網址貼到 Facebook 粉絲頁實在有點麻煩，還是來找找看有沒有比較簡單的方法好了...

這是我在 Facebook 上看到的安全資訊，我覺得很重要，也適用在任何的網站套件上。

以 WordPress 為例，首先，請查看你的 WordPress 目錄下是否有這些檔案:

Read more

最近變更網頁的佈景主題, 也插入了 Adsense 的廣告。網頁在 Firefox、Chrome 的顯示都正常, 唯獨在 IE8 卻會出現 "800a03e8" 的 Javascript 錯誤, 有時甚至連網頁都無法顯示!!

畫面如下:

解決方法:

因為新的佈景主題有加入了 IE7 的 "相容性檢視", 只要把這一行從佈景主題的原始碼刪除即可:

<!meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

這樣做了的缺點是，以後只能使用 IE8 允許的標準設計網站!!不過這也不算什麼缺點，畢竟 IE 過去都不按照 W3C 的網站設計標準走。

2017/03/21 更新:

可能是之前為了要相容舊版 IE (v9.0 之前) 的緣故，所以沒發現到 JavaScript 還有 querySelector() 與 querySelectorAll() 這兩個函式，它們的功能分別為:

• querySelector(): 回傳第一個符合選擇器規則的元素
• querySelectorAll(): 回傳全部符合選擇器規則的元素

從範例中可以得知，這兩個函式遵循 CSS 語法，可以實現複雜的 CSS 選擇器的層級、屬性、分組、串聯、偽元素...等判斷，功能已不是 getElementById()、getElementsByClassName()、getElementsByTagName() 可以比擬!

當然複雜的 CSS 層級可改由 querySelector() 或 querySelectorAll() 來取得元素，不過若是目標明確，考量效率我還是用 getElementById() 來處理可能會比較好。

自訂函式 $$() 改寫如下:

function $$(element, isFirst){
    if(isFirst === 1){
        // 強制回傳第一筆符合的元素
        return(document.querySelector(element));
    }
    else if(/^\#[\w\-]+/.test(element)){
        // 以 $$("#id") 回傳元素
        return(document.getElementById(element.slice(1)));
    }
    else{
        // 回傳元素陣列
        return(document.querySelectorAll(element));
    }
}

($$() 增加了第二個參數: isFirst，若設為 1 則強制回傳第一筆符合 CSS 選擇器的元素，而非元素陣列)

之前的內容:

自訂函式

JQuery 強大、方便的選擇器 (Selector) 是 jQuery 不可或缺的功能之一。不過如果我們不想載入 jQuery 而只想使用類似 jQuery 選擇器的功能，那可以用自訂函式的方式做到:

function $$(element){
    switch(element.charAt(0)){
    case("#"):
        // 以 $$("#id") 回傳元素
        return(document.getElementById(element.slice(1)));
    case("."):
        // 以 $$(".class") 回傳元素陣列，IE 要 v9.0 之後才支援
        return(document.getElementsByClassName(element.slice(1)));
    default:
        // 以 $$("tag") 回傳元素陣列
        return(document.getElementsByTagName(element));
    }
}

或是單純一點，僅傳回指定 id 的元素就好:

function $$(element){
    return(document.getElementById(element));
}

我把這個自訂的函式命名為 $$()，用以與 jQuery 的工廠函式 $() 做區隔。

但是要注意，以上自訂函式回傳的都是 DOM 元素，與 jQuery 在其它操作上並不相同。

換掉 jQuery 的工廠函式

如有需要也可以用 jQuery.noConflict() 換掉 jQuery 的工廠函式 $()，ex:

var jq = jQuery.noConflict();

這樣就能改用 jq() 來做為 jQuery 操作，而原本的 $() 只要再次重新定義為自訂函式即可使用，不會與 jQuery 衝突。

幫大家試過用 € 與 ¥ 做為自訂函式的名稱，不過都失敗，大家可以不用試了!

參考網頁

• [jQuery]中文的 jQuery 教學資源 | Vixual
• [jQuery]《網頁設計-愛上jQuery》讀書心得及評論 | Vixual