用 jquery 實做 更多/減少 文字

本文主要參考jQuery More/Less Text一文。 首先，請在html中增加下列 elements
 <div class=\"more-less\">
   <div class=\"more-block\" ></div>
   <a href=\"#\" class=\"adjust\"></a>
 </div>
接著是 js:

  $(function(){                                                                   
                                                                                
// The height of the content block when it's not expanded                       
var adjustheight = 52;                                                          
// The "more" link text                                                         
var moreText = "+  More";                                                       
// The "less" link text                                                         
var lessText = "- Less";                                                        
                                                                                
// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
                                                                                
// The section added to the bottom of the "more-less" div                       
//$(".more-less").append("[...]");                                              
// Set the "More" text                                                          
$("a.adjust").text(moreText);                                                   
                                                                                
$(".adjust").toggle(function() {                                                
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded                                         
        //$(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);                                                 
    }, function() {                                                             
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        //$(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);                                                 
});                                                                             
});       

其中14,21,25是原文中用來增加 [...] 字串的。 我自己覺得不需要，所以註解掉了。

讀取下一頁或ajax局部更新時以jquery顯示 loading 訊息

不論是使用ajax局部更新或整頁換新，假如loading時間過長，都容易讓user以為網站掛點了。
使用blockUI這個jquery pulgin可以在讀取時顯示相關資訊，讓user知道正在讀取資料（其實類似的jquery plug in很多，但我只用過這個，也覺得blockUI使用簡單且功能夠強）
首先當然要在 html 的 head 中讀入 jquery 及這個plugin，此處不贅敘。（注意！要把jquery放在前面plugin放後面，否則會有bug導致無法執行。）
假設是要整頁換新，可以將負責換新的那個DOM設個id（此處為block），然後使用以下code，就可以在點擊該DOM後，以iphone的形式顯示「please wait」的資訊，直到下一頁出現。

            $('#block').click(function(){
                 $.blockUI({ css: { 
                            border: 'none', 
                            padding: '15px', 
                            backgroundColor: '#000', 
                            '-webkit-border-radius': '10px', 
                            '-moz-border-radius': '10px', 
                            opacity: .5, 
                            color: '#fff' 
                        } }); 
            });

blockUI的官網有很多DEMO和sample code，可以挑自己喜歡的套用。

檢視 ruby 和 python 的變數型態

ruby和python這兩個script language分別有內建的函式可以讀取變數的型態，只是用法不太一樣。

自己常常搞混，特此紀錄一下：

#python
s='ww'
type(s)

#ruby
s='qq'
s.type()

將ruby script編譯成exe檔

網路上有幾個將ruby script編譯成windows可執行的exe檔的工具，常見的包括exerb、rubyscript2exe，可是我自己實際使用，這兩個工具都有一些難解的bug，用了一下就放棄了。

最後找到ocra這個工具，它其實也有bug，但很好解決。

首先，請在command line用gem安裝ocra（我是用linux系統，windows下指令可能會有點不一樣，但應該大同小異，請自己變通）

gem install ocra

接著，用ocra compile你的.rb檔

ocra example.rb

第一次使用時，可能會產生下列錯誤（因為我已經解決下列錯誤，所以以下訊息是google來的）

Invalid gemspec in [c:/Ruby187/lib/ruby/gems/1.8/specifications/ocra-1.3.0.gemspec]: invalid date format in specification: "2011-06-19 00:00:00.000000000Z "
Invalid gemspec in [c:/Ruby187/lib/ruby/gems/1.8/specifications/win32-autogui-0.5.0.gemspec]: invalid date format in specification: "2011-08-17 00:00:00.000000000Z" 1.8.8

循著錯誤訊息的路徑（c:/Ruby187/lib/ruby/gems/1.8/specifications/）找到「ocra-1.3.0.gemspec」這分檔案後，把"2011-06-19 00:00:00.000000000Z"改成"2011-06-19"即可。
第二個錯誤訊息我自己其實沒碰到，是google時發現別人有這個問題。不過依法修改它的date format應該就沒問題了。

接著，重新執行第二個指令，應該就會產生一份example.exe
這份.exe檔在沒有安裝ruby的windows上也可以執行。

ps, 我用的ruby是1.8.7

讓html中的元素隨著捲軸移動

如題，這個功能在比較動態的網頁應該都很常用，以前要用長的可怕的js code才有辦法達成，現在用jquery，幾行code就輕鬆搞定
當然，要使用這個功能，務必在html的head中讀入jquery，此處不贅言，直接切入script
以下code主要參考Keep element in view while scrolling using jQuery這篇文章

 $().ready(function() {  
  var $scrollingDiv = $("#scrollingDiv"); // #scrollingDiv請改成自己要移動的元素
 
  $(window).scroll(function(){ 
   $scrollingDiv
    .stop()
    .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );   
  });
 });

有幾行值得特別說明
2.因為捲軸一移動，就會用到這個function，假如直接把這個DOM選取的動作存成一個jquery object，可以省去每次都尋找element的運算，效率會比較好
6.捲軸轉動的幅度可能很大，在第7行調整元素位置前，要先確保上個動作停止
7.animate是jquery內建調整css的函式；scrollTop是計算捲軸位置的函式。此處讓選取到的div的top margin隨著捲軸位置增加30px，即可確保這個div永遠距離頁面頂端30px

取消iframe的scroll bar

在iframe的tag中加上scrolling="no"這個attribute即可
簡潔有力！

js計算某字元出現的次數

假設有個字串 s="abbbbc" 我們要用js計算這個字串中b出現了幾次，可以用 s.split("b").length-1 其他語言也大同小異