目前分類:HTML/CSS/JavaScript (39)

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

用一個之前建置的頁面來套版改寫,其中有用到 Bootstrap 3 的內置視窗 (modal) 功能,在舊網站裡連續開兩個也能正常顯示,但是在改寫後的另一個子網站裡使用,不知道被頁面上什麼內容干擾了,原本在 modal 跳出後底部遮蔽內容用的灰色遮罩,會在某一層 modal 出現後,就蓋在整個畫面上,連 modal 都被蓋住了。

這個情況是 body 裡的 class "modal-open" 不知道在什麼狀況下被移除了,補回去就好了。

原本是在各個段落裡確認 modal 出現異常的遮罩時補上,但是如果不加個半秒的遞延,又會被蓋過去,我猜是 modal 的動畫影響的?

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

第一次用 CSS 的 flex 排版時,覺得超級驚豔!可以輕鬆的將一系列物件調整至等高、置中對齊、基線對齊等,要把東西拉成一列或排成一欄也只要透過 "flex-direction" 一個 CSS 屬性,就能調整。就連分散對齊都是一秒設定!

所以收集一下覺得很不錯的教學文:

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

今天有同事問:可不可以只列印頁框的內容?

因為 IE (Internet Explorer) 可以在預覽列印中選擇列印範圍:

  • 「顯示的畫面」
  • 「只有選擇的框架」,在指定要列印的頁框 (frame) 點右鍵預覽列印,才會出現此選項
  • 「所有個別的框架」

(內容有框架的頁面,才會出現上述選項)

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

網路上有一篇嘉義大學在 106 年 8 月通過無障礙 A 等級的心得文,受益於該文章,而且覺得完整的「無障礙規範索引」超冗長,以下整理一些之前申請網站無障礙常遇到的問題。

(先寫想到的,有空再持續補充)


【顏色對比】

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

原本參考《透過Javascript觸發檔案下載》寫的下載檔案功能,會透過 JavaScript 在頁面內容塞 iframe,觸發瀏覽器的下載事件。

但在 IE 會出現錯誤訊息:

因為X-Frame-Options而出現錯誤訊息

小攻城師 發表在 痞客邦 留言(0) 人氣()

今天有 user 反映,在某個表單頁面,輸入資料後會出現以下訊息,每個瀏覽器反應都不同:

  • IE:「您必須輸入有效的值」
  • Firefox: 「請選擇有效的值。最接近的有效值為 1 與 2。」
  • Chrome: 「請輸入有效值。最接近的兩個有效值分別是 1 和 2。」

HTML5裡,設定input的type="number"後會跳出的訊息(訊息內容每個瀏覽器都不同)

雖然我們有使用 jQuery 或 Bootstrap,但是如果是使用這些 JavaScript Library 的驗證工具 (validation),應該不至於出現不同訊息才對。

小攻城師 發表在 痞客邦 留言(0) 人氣()

要申請無障礙網路空間的「網站無障礙規範」認證標章,需要先通過其檢測工具 freego 的機器檢測。

這天檢測時遇到一個問題:freego 程式出現錯誤訊息視窗,「瀏覽器開啟錯誤,請檢查ChromeDriver與本機Chrome瀏覽器的版本是否相應」

經查詢發現,我的個人電腦上的 Chrome 已經被更新到 93.0.4577.63,但是在命令提示字元下檢視 freego 目錄下的 "chromedriver.exe",其版本還停在 91.0.4472.19。

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

今天的題目是有人問在 LINE 上面看到分享網站連結時,因為頁面沒有在 <meta> 裡設定 description、og:description 這些內容,所以預覽文字會從頁面最上方的內容爬下來。

修改 description 後可以怎麼辦呢?

  • facebook:
文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

因為需要讓手上編寫的網頁符合無障礙標準,所以要安裝 Freego,想說在 macOS 上裝來用看看。

結果到 NCC 的無障礙網路空間服務網的下載專區,下載「單機版檢測工具 Freego 2.0」的 Linux 版後,解壓縮之後打開終端機 (terminal) 視窗,切到目錄、執行主程式:

./freego2_linux

會先出現權限不足的錯誤訊息:

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

有個網站昨天從 HTTP 升級成 HTTPS,但今天有部分使用者反映無法連線到該網站。

首先遇到的問題是,該 HTTPS 網站用了特殊 port 8080,而防火牆預設只提供 80 與 443,所以要請網管搭配設定。

防火牆放行後,IE 連線到該網站會出現錯誤訊息:

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

同事把一段內容放在純文字檔 (*.txt) 裡,有使用者反映從網站上下載下來,內容的換行符號都不見了,或是切換行的點被重置。

由於該文檔是先透過一支程式取出內容,response header 讀到的檔案類型是 text/html,目前基於一些神秘的原因,無法把 MIME Type 設為 text/plain。

我們實驗了一下,結果如下:

小攻城師 發表在 痞客邦 留言(0) 人氣()

最近在改一個需求,根據資安法與政府組態基準 (GCB),密碼必須要參考 Windows 的密碼安全性原則(密碼複雜度設定),達到以下要求:

  • 至少 8 個字元
  • 至少有以下四個內容的其中三個
    • 小寫字母
    • 大寫字母
    • 數字
    • 特殊符號

寫不出漂亮的正規表示式 (regular expression),光是中括號就一直卡住,只好上網求助萬能的網路搜尋。找到一篇 "RegEx for strong password",裡面提到:

「以下的 pattern 可以符合需求:

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

有同事說他用 iPad 把我們用 SharePoint 架的網站加到書籤,明明在瀏覽器的網址列是 A 網址,但加到書籤後,書籤裡存的網址卻會變成 B 網址

比方說本來的 A 網址是 http://www.abc.com.tw/Default.aspx,B 網址卻變成 http://abc/index.aspx

好納悶地測了一下:

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

有 user 抱怨某支程式在 IE 不能用、但在 Chrome 就正常,「按鈕我點都點不下去」。

開了 IE 看到主控台顯示SCRIPT1002: 語法錯誤,位置在第 1 行第 13 個字元,是 <!DOCTYPE HTML> 的 T 與 M 之間。

上網查了一下,別人也有一樣的問題,說是在 JavaScript 裡可能有錯誤。好險是一個簡單的頁面,發現是在使用 TemplatePower 時,原本打算這樣套版:

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

遇到一個狀況:有一支靜態的 JSON 檔,假設是 test.json 好了,我們把它放在共用目錄,分別可以經由以下路徑取用:

  • 主機一:http://192.168.1.1/test.json(此 server 為 Windows 主機)
  • 主機二:http://192.168.1.2/test.json(此 server 為 Linux 主機)

兩台主機都是跑 Apache 2.4,不確定到底是哪條設定,會造成在不特定的時間裡,test.json 會被加入一大串亂碼。

從 VIM 看,亂碼的內容是 ^@,透過 Google 的自動提示查了 "^@ character in vi",據說這個文字是 \x00。

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

公司辦了一個活動,吸引了大批網友來留言,因為合作廠商說只能幫忙分析 (parse) 公開留言,所以得手動把 facebook 誤判為廣告 (spam) 而隱藏的留言 (comments) 打開。

想要人工檢閱,但是點一次只展開其中的 50 筆,所以上網 Google "facebook expand all comments",找到這篇:"Expand All Facebook Comments"

 

文章標籤

小攻城師 發表在 痞客邦 留言(5) 人氣()

Google 自訂搜尋 (CSE)可以取得一段像這樣的 JavaScript 程式碼,讓自己的網站能有站內搜尋功能。

<script>
    (function() {
文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

前陣子去聽課,學 Google Analytics 怎麼用,當下還可以在 Google Analytics 裡找到先前設定連結的 Google Adsense,可是隔幾天就找不到 Adsense 報表跑去哪裡了。

參考 Google 官方文件的《我的 Analytics (分析) 中缺少 AdSense 資料》, 設定了老半天還是沒辦法從 Google Analytics 左上角的搜尋框找到 Adsense。

為什麼忽然會看不到 Google Adsense 報表呢?上網查到 "Google adsense disappeared from Google Analytics",發現只是 "Adsense" 名字改成「發佈商」,以後可以從「行為 > 發佈商 > 發佈商網頁」繼續查到每個網頁的期間營收情況。

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

之前為了想練習寫 Google Map 小程式(請見[JavaScript] Google Map API的標記叢集(marker clusterer)使用心得 ),抓了新北市政府的 open data,裡面用 TWD97 記錄座標,但 Google Map 只吃 WGS84,在網路上搜尋一下公式,裡面有很多符號看不懂。 Orz

求教了唸地理系出身的表姐,她幫我找了一篇使用 PHP 轉換 TWD97 到 WGS84 的文章:
Vexed 的《TWD97 座標轉經緯度》(PHP) 

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

目前的工作環境可以這樣切換正式主機與測試機:

  • 正式機:http://domanname/index.php
  • 測試機一號:http://localhost/index.php
  • 測試機二號:http://0.0.0.0/index.php    // 0.0.0.0 是機器的 IP

因為覺得每次都要手動改網址好麻煩,得把 domain name 選起來、改輸入 localhost,好浪費人生。

所以模仿[Misc.] 在 Firefox 書籤列加上 Delicious 按鈕 ,在 Google Chrome 上面加顆切換測試主機的按鈕。

文章標籤

小攻城師 發表在 痞客邦 留言(0) 人氣()

1 2