Archive for the ‘ Website ’ Category

[JavaScript]簡易網頁下拉選單,可支援 MouseOver 與 Click 事件

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

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

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

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

Read more

[jQuery]中文的 jQuery 教學資源

如果想學 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

2014 年 6 月之後如何轉換 Google 帳號到 Flickr

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

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

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

該怎麼辦呢?

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

使用 .htaccess 簡單防護 WordPress 的管理程式

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

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

.htaccess 認證

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

密碼請不要用跟 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

參考網頁

Facebook 專頁騙你按讚的方法 (騙讚粉絲團)

狀況一

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

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

狀況二

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

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

Read more

[PHP]將 Discuz! 由 7.2 昇級至 X3.0 的步驟

主要步驟

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

歡迎加入本站的 Facebook 粉絲頁

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

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

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

網站套件的「設定檔」安全性問題

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

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

  • wp-config.php~
  • wp-config.php.2
  • wp-config.php.bak
  • wp-config.php.old
  • wp-config.php.ori
  • wp-config.php.orig
  • wp-config.php.original
  • wp-config.php.sav
  • wp-config.php.save
  • wp-config.php.swp
  • wp-config_php
  • wp-config.php_2
  • wp-config.php_bak
  • wp-config.php_old
  • wp-config.php_ori
  • wp-config.php_orig
  • wp-config.php_original
  • wp-config.php_sav
  • wp-config.php_save
  • wp-config.php_swp

Read more

Adsense 與 IE8 的錯誤訊息 800a03e8

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

畫面如下:

解決方法:

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

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

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

[JavaScript]模擬 jQuery 的 CSS 選擇器 (Selector)

2017/03/21 更新:

可能是之前為了要相容舊版 IE (v9.0 之前) 的緣故,所以沒發現到 JavaScript 還有 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 衝突。

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

參考網頁

return top