分類
Javascript

讓jQuery UI支援Touch device

在 jQuery UI 中, 使用像是 drag drop, slider 等, 在 iPhone/iPad/Android 上這種 touch 的設備, 可能會有不順或不支援的狀況, 這裡有個工具可以讓這樣的狀況改善, 並正常使用:

jQuery UI Touch Punch – http://touchpunch.furf.com/

這個只需要在引入 jQuery, jQuery UI 後, 再引入這個 jQuery UI Touch Punch 即可.

可以比較之前的一個範例: (原文: https://diary.tw/archives/1292 )

無使用 jQuery UI Touch Punch – http://sample.diary.tw/33/1.htm
有使用 jQuery UI Touch Punch – http://sample.diary.tw/33/2.htm

無使用 jQuery UI Touch Punch – http://sample.diary.tw/33/1-1.htm
有使用 jQuery UI Touch Punch – http://sample.diary.tw/33/2-1.htm

使用桌上型瀏覽器沒有差別, 不過使用 touch device 就有很明顯的差異了!

另外其實 jQuery Mobile 也有完整的功能, 若是直接要做 mobile 的網頁, 應該就直接使用 jQuery Mobile 的 framework 就有完整支援 touch 了:

jQuery Mobile 的 slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

分類
程式技術

網頁排版文字排不下的略語語法

在網頁排版上, 有個很麻煩的地方, 就是在固定寬度的文字走文, 若字數太多時, 需要隱藏, 但又希望在介面上看起來理想, 作法可以利用一個 css 的語法:

text-overflow: ellipsis;

這個語法可以應用在限制一定寬度時, 文字走文若有隱藏的部分, 則會出現 … 這種略縮語的方式, 讓看到的訪客可以理解後面還有文字, 只是被略縮掉了, 這是透過 css 的部分來進行, 而不是限制字數輸出(從server端的作法), 而且可以配合文字的字型(有些字型是調合字, 就是有寬有窄), 不是用字數來設限的方式, 會更有彈性的多了.

來看看效果吧:

http://sample.diary.tw/33/1.htm

這個範例利用了一個 slider (jQuery UI) 來進行寬度限制, 方便大家在測試時, 可以看到不同寬度對於略縮語的應用, 有不同的呈現效果.

這裡用的 css 語法如下:

.style1{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  backgroud: #eeffee;
  width: 240px;
  height: 30px;
}

其中, overflow: hidden; 是超出的部分就不要出現, 而 white-space: nowrap; 是不要換行.

繼續閱續:
http://ant4css.blogspot.tw/2009/03/text-overflow.html

[2013/3/22 12:33]
overflow: hidden; 及 white-space: nowrap; 和這兩個條件併用是必需的, 所以基本上是應用在標題比較適合, 若用在內文走文就沒有辦法利用這個方式來進行了.

可以參考這篇:
http://leeiio.me/text-overflow-ellipsis/

另外也實作了測試: http://sample.diary.tw/33/2.htm 是無法有這個效果的.

分類
程式技術

flickr的相片尺寸

上傳到 flickr 的相片會轉出數種尺寸, 一共有哪些尺寸呢? 以這張圖為例:

http://farm9.staticflickr.com/8423/7675009574_9053807c52_b.jpg

上面看到的尺寸分別為:

Square 75, Square 150, Thumbnail, Small 240, Small 320, Medium 500, Medium 640, Medium 800, Large 1024, Large 1600, Large 2048, Original 共計 12 種尺寸, 其中的 Medium 800, Large 1600, Large 2048 這 3種是要在 2012/3/1 後上傳才新增的尺寸.

尺寸說明如下:
Square 75 為 75×75, Square 150 為 150×150, Thumbnail 為長邊100, Small 240 為長邊240, Small 320 為長邊320, Medium 500為長邊 500, Medium 800為長邊 800, Large 1024為長邊 1024, Large 1600 為長邊 1600, Large 2048為長邊 2048, Original 則為原圖.

上面的範例圖來看, 網址為:

http://farm9.staticflickr.com/8423/7675009574_9053807c52_b.jpg

其中最後的 _b 就是他的尺寸代碼, 尺寸代碼共計以下:
Square 75 為 _s, Square 150 為 _q, Thumbnail 為 _t, Small 240 為 _m, Small 320 為 _n, Medium 500為預設無代碼, Medium 800為 _c, Large 1024為 _b, Large 1600 為 _h, Large 2048為_k, Original 則為 _o.

所以上面的 _b 就是 Large 1024了.

調整一下由 flickr setid 取出相簿功能的程式, 將相片尺寸也列入功能, 於是增加了可以選擇相片尺寸的版本:

http://sample.diary.tw/flickrset/

大家可以用看看!

ps. 由於 _o 必須是有 flickr pro 帳號才有的功能, 所以不把這個尺寸加到可選的功能內.

官方資料: http://www.flickr.com/help/photos/#18

分類
程式技術

table分行分色方式

在 HTML 中, 寫表格做報表是再平常不過的事了.

不過若是要分行分色, 一般可以設一個 class出來, 用個淺色的底色來放在奇數行或是偶數行來呈現, 效果就會出來了.

現在要利用 CSS3 的 selector 來進行這個操作, 也就是 nth-child 的語法. 來看看怎麼用吧!

基本上這個 selector 寫在 tr 後, 如:

tr:nth-child(odd)

這樣自然就會是在奇數行應用對應的 css, 可以參考 http://sample.diary.tw/32/1.htm 的 List1.

List1 用的 css 如下:

tbody.sample1 tr:nth-child(odd){ 
    background: #efefef;
}

當然若是需要選擇偶數行, 則可以使用 nth-child(even) 即可.

下面介紹選擇若是需要每 3行一次, 則可以利用以下語法:

tr:nth-child(3n)

自然就會是每 3行為選擇到的, 可以參考 http://sample.diary.tw/32/1.htm 的 List2.

List2 用的 css 如下:

tbody.sample1 tr:nth-child(3n){ 
    background: #efefef;
}

所以這裡出個題目, odd 及 even 等同於什麼呢? 分別為 2n+1 及 2n, 有興趣的朋友們可以自行試看看.

另外再來看一個更複雜的, 3行, 但用兩色, css 就會多一點:

tbody.sample3 tr:nth-child(3n){
    background: #efefef;
}
tbody.sample3 tr:nth-child(3n+1){
    background: #ffefef;
}

效果請參考 http://sample.diary.tw/32/1.htm 的 List3.

這個”第n個小孩”選擇器用的法, 可以參考這裡: http://www.qianduan.net/useful-nth-child-recipies.html , 其實就是數學的代數式, n從 0 開始, 1次加 1, 所以以下為幾種可能:

n+5 代表著第 5, 6, 7, 8, 9….
-n+3 代表著第 3, 2, 1
2n 代表著 2, 4, 6, 8… (因為沒有第 0個, 也等同於 even)
2n+1 代表著 1, 3, 5, 7… (也等同於 odd)
3n 代表著 3, 6, 9 …

這樣就容易看懂了!

分類
WebTrend

Google Reader將吹熄燈號

哇, 真是要命…. 今天打開 Google Reader 時…

對我來說幾乎和 Gmail 使用率幾乎差不多的 Google Reader 要停止服務了. 這個非常好用的 Google Reader, 無論是用在各種媒體, blog, video, 論壇等, 都十分方便, 而且也是目前很重要的一個媒體資訊來源, 居然要停掉了, 真的很可惜!

上面的 Learn more 連結是到這裡: http://support.google.com/reader/answer/3028851 說明如何下載自己的 Google Reader 資料, 利用 takeout service 可以將在 Google Reader 的資料取回, 裡面最重要的就是 subscriptions.xml 也就是訂閱的資料來源, 方便之後再匯入到其他的閱讀器中.

不知道大家有沒有什麼好的閱讀器可以分享介紹一下呢?

Google 停掉這個服務的原因是什麼? 看起來比較不像是成本問題, 而是使用率吧, 會使用閱讀器的用戶可能都是重度使用者, 一般用戶應該比較少在用, 而透過其他管道來取得資訊吧.

Farewell, Google Reader!

相關新聞:
http://chinese.engadget.com/2013/03/13/google-reader-shut-down-spring-cleaning/
http://mag.udn.com/mag/digital/storypage.jsp?f_MAIN_ID=319&f_SUB_ID=2941&f_ART_ID=445600
http://news.cnyes.com/Content/20130314/KH6OXRHLGUJ33.shtml
這篇寫得較深入: http://tech.qq.com/a/20130314/000085.htm

分類
.net

LOG4NET的基本操作

這個 LOG4NET是用來做 .net 應用程式LOG使用的套件, 主要用來做除錯, 線上系統記錄, 稽查等應用時可以用來做記錄的套件, 是基於 Apache Project 下的專案, Open Source.

這裡做個簡單的基本介紹, 其實這套件功能十分強大, 可以只利用 config 檔就可以做得很多深層的設定, 並加以記錄, 而不用改到主程式. (當然, 前提是在主程式內必須要下對應的 log information 才行)

首先先到官方網站下載此專案, 這裡建議抓 compile 好的版本, 內含有說明文件:

http://logging.apache.org/log4net/download_log4net.cgi

這頁下的 log4net-1.2.11-bin-newkey.zip , 下載解開後, 裡面主要是 compile 好的 binary 檔, 找到 bin/net/[版本]/release 下的 log4net.dll 檔, 複製到自己的專案中, 就算初步完成了.

接下來就是在自己的專案裡加入參考 (reference), 並使用它的 namespace:

using log4net;

接下來就是設定 config file, 先列出下面 config xml內容:

<configSections>
    <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,log4net" />
</configSections>

<log4net>
    <logger name="loginfo">
        <level value="INFO" />
        <appender-ref ref="InfoAppender" />
    </logger>
    <appender name="InfoAppender" type="log4net.Appender.RollingFileAppender">
        <param name="File" value="Log//info.log" />
        <param name="AppendToFile" value="true" />
        <param name="MaxFileSize" value="4096" />
        <param name="MaxSizeRollBackups" value="10" />
        <param name="StaticLogFileName" value="false" />
        <layout type="log4net.Layout.PatternLayout">                
            <param name="ConversionPattern" value="%date [%thread] %-5level %logger - (%file:%line) %message%newline" />
        </layout>
    </appender>
</log4net>

其中的 section name = log4net 是用來說明會有一個 config section 是給 log4net 用的, 而下面的 log4net 才是真的 config 要寫的內容.

這裡只建了一個 logger, 名為 loginfo (名稱可以自訂), 然後 appender-ref 設為 InfoAppender 就是指向再下面的 appender , 這個 appender type 設為 RollingFileAppender 是用檔案來記錄用, 其他內容說明如下: (logger 也可以是 database 等其他的輸出裝置, 這裡以檔案為例)
File: 檔名
AppendToFile: 是否要寫到檔案
MaxFileSize: 單一 log 檔大小上限 (bytes)
MaxSizeRollBackups: 多少檔案一個循環, 當達到 MaxFileSize 時, 會自動附上 CurBackups 來檔案獨立出來, 並於達到這個數值時, 再重頭用(overwrite).
StaticLogFileName: 若設為 true, 則會以 File 名稱為 log檔名, false 則會以 [file].yyyy-mm-dd 的方式記錄
下面的 layout 則是用來設定 log 內容的欄位, %date 是日期時間, %thread 是執行緒, %level 是記錄層級, %logger 是 logger 名稱, %file %line 是原始程式檔名及行數, %message是 log的內容, %newline 就是換行了.

接下來就是在程式內呼叫的方式, 程式如下, 以 asp.net 為例:

protected void Page_Load(object sender, EventArgs e)
{
    log4net.Config.XmlConfigurator.Configure();  
    ILog infologger = LogManager.GetLogger("loginfo");

    infologger.Info("Page_Load - useragent:" + Request.UserAgent);
}

在 page_load 時, 使用 Config.XmlConfigurator.Configure() 將 log4net 的 config 載入, 然後建立一個 ILog 的 interface, 利用 LogManager.GetLogger(“logger name”) 來取得 logger, 再來利用 .Info(“message”) 方法來將要記錄的 log 內容寫入 log 檔.

而除 Info 方法外, 還有 Debug, Error, Fatal, Warn 共計5個 log level.

最後以 asp.net 做的 log 內容如下:

2013-03-13 15:30:37,925 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:42,721 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:46,456 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:46,800 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:47,112 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:47,393 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; MS-RTC LM 8; InfoPath.1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
2013-03-13 15:37:52,065 [4] INFO loginfo – (d:\testlog4net\Default.aspx.cs:19) Page_Load – useragent:Mozilla/5.0 (Windows NT 5.2; rv:19.0) Gecko/20100101 Firefox/19.0

是不是很容易上手呢, 大家可以再試看看!

官方說明文件:
log4net SDK: https://logging.apache.org/log4net/release/sdk/
RollingFileAppender: https://logging.apache.org/log4net/release/sdk/log4net.Appender.RollingFileAppender.html
其他的 Appender: https://logging.apache.org/log4net/release/sdk/log4net.Appender.html

繼續閱讀:
http://biancheng.dnbcw.info/c/72275.html
http://blog.csdn.net/javc/article/details/4022677

分類
Javascript

反向排序內容(倒排)

今天在整理 http://sample.diary.tw/ 時, 發現 sample 愈來愈多了, 而且內容是由舊往新排, 想說把它反過來排, 新的放在上面, 舊的在下面.

由於內容不多, 把 <li> 手動一筆筆排一下應該不會花太多時間, 不過又想到應該是要用指令來才有效率才對, 於是想說用 sort 指令來操作, 發現 sort 功能強大, 要用來做倒排反而不是很快速方便.

乾脆又來動手寫個小程式好了(又是一個 sample): http://sample.diary.tw/31/1.htm 只利用了 javascript 的 array 功能, 馬上就寫好了一個反向排序功能(倒排功能), 用法很簡單, 就是把文字內容貼進去, 按下[反向排序]按鈕, 就會倒排完成.

程式如下:

//var arrData = document.getElementById("data").value.split("\n");
//arrData = arrData.reverse();
//document.getElementById("data").value = arrData.join("\n");
document.getElementById("data").value = document.getElementById("data").value.split("\n").reverse().join("\n");

前三行可以簡化為最後一行, 簡單說明, 就是把 textarea 內容取出, 用換行 split分割為陣列, 再用 reverse 倒排後, 再利用 join 用換行合併, 塞回去原本的 textarea 完成.

所以現在的 http://sample.diary.tw/ 是由新到舊排了!

分類
Blog服務

Line分享按鈕及連結

早期利用 Facebook 的讚及分享按鈕, 現在看到愈來愈多的網站有提供 Line 的分享按鈕, 不過目前是提供手機版的網頁來應用, 官方有說明的文件, 不過只有日本版:

http://media.line.naver.jp/howto/ja/

應用指令如下:

http://line.naver.jp/R/msg/<CONTENT TYPE>/?<CONTENT KEY>

其中的 <CONTENT TYPE> 目前也就 text 而已, 而重點在於 <CONTENT KEY>, 內容主要是代入傳遞的內容, 可以傳入任意不違反 line 傳送內容規定的文字, 記得要用 utf-8 編碼.

實際上應用還蠻簡單的, 就是傳遞訊息出去, 所以一般我們會需要傳遞的就是網頁標題及連結, 而組合的方式就是利用一個換行符號 %0D%0A 這樣, 整個組合起來如下:

http://line.naver.jp/R/msg/text/?test%20message%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F

上面的內容就是傳遞如下訊息:

test message
http://line.naver.jp/

傳到 line 應用程式中的 http:// 連結, 會自動轉成 url 連結的型態, 也就可以正常讓收到訊息的人利用該 url 來進行連結了.

範例連結: http://sample.diary.tw/30/1.htm

該頁利用 javascript 將傳遞的訊息及 url 組合好, 再傳遞到 line app 中, 很容易理解.

function sendtoline(){
    var link = "http://line.naver.jp/R/msg/text/?";
    link += encodeURIComponent(document.getElementById("msg").value) + "%0D%0A" + encodeURIComponent(document.getElementById("url").value);
    location.href = link;
    return false;
}

試看看在你的手機版網頁上加上 line 的分享吧!

繼續閱讀:
http://sofree.cc/line-share-button/

[2013/5/23 15:39]
補充一下, 利用這樣的重導, 實際上在 MOBILE DEVICE 上的工作狀況又是如何呢?
在 iPhone 上會導入註冊的 protocol: “line:/”, 而在 android 上則是會使用 intent:/ 語法來達成呼叫 line 應用程式出來.

[2015/11/16 13:35]
中文設置說明連結: http://media.line.me/howto/zh-hant/
語法的部份如: http://line.me/R/msg/<CONTENT TYPE>/?<CONTENT KEY>

[2020/11/18 18:33]
若是 wordpress 下, 配合 Jetpack 的分享按鈕設定可以參考: https://prstudio.idv.tw/wp%E5%B0%8F%E6%8A%80%E5%B7%A7%E5%8A%A0%E5%85%A5line%E5%88%86%E4%BA%AB%E6%8C%89%E9%88%95/

分類
數學

中國剩餘定理

這是個古老的數學問題, 當然也有對應的解法. 在解這個數學問題之前, 我們先來看簡單一點的題目, 就是相同餘數的數字.

舉例來說, 某數除以 7 餘 4, 除以 13 也餘 4, 則某餘最小的自然數為何?

計算方式還蠻單純的, 就是 7 和 13 的最小公倍數, 再加上 4 即得, 如下:

lcm(7,13) = 91, 由於兩數互質, 所以最小公倍數就是該兩數的乘積, 故答案則為 91 + 4 = 95

另一個變形的題目, 某數除以 7 餘 5, 除以 13 餘 11, 除以 15 餘 13, 則某數的最小自然數為何?

再看一下題目, 雖然和上面的同餘數不太一樣, 不過有個規律, 就是都差 2 就會整除, 也就是雖然餘數不一樣, 但同樣少了 2, 所以計算方式也很類似, 找出 7, 13, 15 的最小公倍數, 然後減 2就是答案了, 如下:

lcm(7, 13, 15) = 1365, 故答案為 1365 – 2 = 1363

以上兩種都是比較單純的餘數問題, 再來看看這個中國餘數定理的問題:

孫子算經中的: 有物不知其數,三三數之剩二,五五數之剩三,七七數之剩二。問物幾何?

換成數學白話, 某數除以 3餘 2, 除以 5餘 3, 除以 7餘 2, 某數為何?

這個既不是同樣的餘數, 也不是同樣的差某一值可整除, 要如何解呢? 這時會用到一些餘數的式子, 可以先參考這裡: http://www.mikekong.net/Maths/Problems/chinese_remainder02.html

所以只需要先找出 5, 7 的公倍數, 除以 3餘 1的; 再找出 3, 7的公倍數, 除以 5餘 1的; 再找出 3, 5的公倍數, 除以 7餘 1的, 如下:

找出 5, 7 的公倍數, 除以 3餘 1的: 5 x 7 x 2 = 70, 該數除以 3會餘 1
找出 3, 7的公倍數, 除以 5餘 1的: 3 x 7 = 21, 該數除以 5會餘 1
找出 3, 5的公倍數, 除以 7餘 1的: 3 x 5 = 15, 該數除以 7會餘 1

然後利用:
a ≡ b (mod m) 則 ac ≡ bc (mod m) 這個式子(注意反之不然), 得
70 ≡ 1 (mod 3) … (a)
21 ≡ 1 (mod 5) … (b)
15 ≡ 1 (mod 7) … (c)
因為要除以 3餘 2, 所以 (a) x 2:
70 x 2 ≡ 1 x 2 (mod 3) … (d)
因為要除以 5餘 3, 所以 (b) x 3:
21 x 3 ≡ 1 x 3 (mod 5) … (e)
因為要除以 7餘 2, 所以 (c) x 2:
15 x 2 ≡ 1 x 2 (mod 7) … (f)

再利用:
a ≡ b (mod m) 則 a + c ≡ (b + c) (mode m) 這個式子,
並綜合以上 (d), (e), (f) 得該數應為
x ≡ (70 x 2 + 21 x3 + 15 x 2)(mod 105)

所以最小的某數應為 23, (即 70×2 + 21×3 + 15×2 – 105×2 = 23)

相關閱讀:
http://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9B%BD%E4%BD%99%E6%95%B0%E5%AE%9A%E7%90%86
http://www.mikekong.net/Maths/Problems/chinese_remainder02.html
http://www.geocities.ws/goodprimes/SCCongruence.html

分類
WebTrend

WhatsAPP要收費-很合理啊!

先說, 我沒有在用 WhatsAPP.

iPhone版本的 WhatsAPP 本來就是收費的, Android 版本的, 是首一年不收費, 第二年起收費, USD 0.99, 很合理啊!

使用者付費, 本來就很合理, 再加上這個費用遠比上網傳輸費及通話費便宜的多了, 有什麼好抱怨的呢? 最重要的, 這個 APP 在安裝時就很明確的說明一年免費, 第二年起才收費, 試用的時間夠久了吧!(我承認這也是一種強大的行銷手法, 一年免費)

比起手機, 比起皮包, 比起吃飯, USD 0.99 是有貴嗎?

當然啦, 想轉台就轉台囉, 免費的通訊軟體多的是, 什麼好用什麼不好用, 哪種習慣, 哪裡的朋友多, 見人見智了, 但沒必要在抱怨這件事吧! 新聞也報的好像收費是什麼天大不了的事, 真的怪哉!