[jQuery] Animation Progress Bar base on bootstrap progress bar

Source Code:

[jQuery] use .filter(':visible') to replace $('#id:visible')

Sometimes we will use

$('div:visible') // Does not use querySelectorAll()

to select something is visible, but it dose not utilize querySelectorAll()

so we can use

$('div').filter(':visible') // Uses it

to get high performance

See Also

http://tutorialzine.com/2011/06/15-powerful-jquery-tips-and-tricks-for-developers/

[JavaScript] remove all duplicate element from array 刪除陣列中重複的元素

jQuery的unique只支援DOM元素, 所以寫一個來支援Array的

jQuery.unique() only support DOM elements, so we need a function to do unique.



See also : http://www.devcurry.com/2010/04/remove-duplicate-elements-from-array.html

[Chrome Extension] 過濾網站內容留下圖片 Image Only Sample

今天在試著寫Chrome Extension, 就寫了一個把網站的內容都過濾掉只剩下圖片的小功能

例如在Google Image 搜尋 IU

然後按下ImageOnly Extension, 就會幫你把圖片等比例縮圖然後排好好的

Source Code
https://github.com/hankwang/image-only-chrome-extension

See Also
http://code.google.com/chrome/extensions/index.html

[Blogger] 讓非本站的外部連結, 自動開新視窗

Blogger如果要讓外部連結開新視窗, 都要手動自己加上target="_blank", 非常麻煩

所以寫了一個小程式判斷如果連結不是http://whhnote.blogspot.com開頭　就會另開視窗

展開小裝置範本後, 搜尋</body>

在</body>上面加上如下Code:

<script type="text/javascript">
jQuery("a").each(function(index) {
    var r = new RegExp("^http://whhnote");
    if (!r.test(jQuery(this).attr('href'))) {
        jQuery(this).attr('target', '_blank');
    }
});
</script>

Code中間的http://whhnote改成你自己網站的網址


我有用到jQuery, 通常Blogger應該都會讀取, 如果發現沒辦法用, 將以下code加在上面的Code的上面

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

[jQuery] Select All Checkbox 選取所有選取框checkbox

Sample Below: (save to html to try this)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
/**
 * Select all checkbox
 */
  flag = false;
  $(".selectall").click(function() {
    flag = !flag;
    $("input[name='box[]']").each(function() {
      $(this).attr("checked" , flag);
    });
    $(".selectall").attr("checked", flag);
  });
});
    

</script>

<input type="checkbox" class="selectall"> Select All<br />
<input type="checkbox" name="box[]"><br />
<input type="checkbox" name="box[]"><br />
<input type="checkbox" name="box[]"><br />
<input type="checkbox" name="box[]"><br />
<input type="checkbox" name="box[]"><br />
<input type="checkbox" name="box[]"><br />
<input type="checkbox" name="box[]"><br />
<input type="checkbox" name="box[]"><br />

[jQuery] Select DIV element by ID

It's a sample code below.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('div[id*="mydiv"]').append('*');  // containing the a given substring.
  $('div[id|="mydiv"]').append('|');  // mydiv- (string followed by a hyphen (-)
  $('div[id$="mydiv"]').append('$');  // a value ending exactly with a given string.
});

</script>

</script>
<div id="mydiv"></div>
<div id="0mydiv0"></div>
<div id="mydiv-1"></div>
<div id="mydiv1"></div>
<div id="mydiv2"></div>
<div id="3mydiv"></div>

Result:

*$
*
*|
*
*
*$

Reference: http://api.jquery.com/category/selectors/

[jQuery] 在Dreamweaver 加入jQuery 插件 - API extension for Dreamweaver

下載後用Dreamweaver的擴展管理安裝即可!!

重新啟動DreamWeaver後就會在片段裡出現很多jQuery的片段可以使用。

到此網站下載【jQuery API extension for Dreamweaver】

[jQuery] 判斷form裡的checkbox是否選取

Last Updated: 2013-04-02