分類: jQuery & javascript

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link)，換頁或不換頁，都可以把瀏覽器卷軸自動捲到錨點位置，但如果網頁上方有一個黏頭的Header (sticky header)，RWD手機版本則習慣使用(sticky header)，Header 懸浮本文之上，可能會把錨點的元素內容遮蔽，這時我們則需要偏移(sticky header)的高度，避免錨點元素被遮蔽。[……]

閱讀更多

javascript list all the plugins installed in the browser

取得瀏覽器安裝的所有插件

有時需要判斷瀏覽器安裝那些第三方插件，比如：VLC、Flash Player、PDF Viewer等等，藉以作後續的動作，比如說沒有Flash Player引導user安裝，下面這程式就非常有用：

navigator.plugins

會返回一個已安裝plugin的數組

<!doctype html>
<html>
<body>
<div id="example"></div>
<script type="text/javascript">
var x=navigator.plugins.length; // store the total no of plugin stored 
var txt="Total plugin installed: "+x+"<br/>";
txt+="Available plugins are->"+"<br/>";
for(var i=0;i<x;i++)
{
  txt+=navigator.plugins[i].name + "<br/>"; 
}
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>

輸出：

Total plugin installed: 4
Available plugins are->
Widevine Content Decryption Module
Native Client
Chrome PDF Viewer

參考：

取得某一Plugin版本：

<scrip>
function getFlashVersion() {
  var flash = navigator.plugins.namedItem('Shockwave Flash');
  if (typeof flash != 'object') {
    // flash is not present
    return undefined;
  }
  if(flash.version){ 
    return flash.version;
  } else {
    //No version property (e.g. in Chrome)
    return flash.description.replace(/Shockwave Flash /,"");
  }
}
</script>

參考：

[……]

閱讀更多

javascript get query values from url 取網址參數

本篇使用 Javascript ， 若想用jQuery的方法，可參考本站另一篇

jQuery get query values from url 取網址參數 

本篇提供兩種方法，擇一使用

方法一：

/*
    VECTOR COOL
    https://vector.cool
*/
function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

方法二：

/*
    VECTOR COOL
    https://vector.cool
*/
function getURLParameter(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

 

用法：

/*
    VECTOR COOL
    https://vector.cool
*/
var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');

[……]

閱讀更多

jQuery get query values from url 取網址參數

本篇使用 jQuery方法， 若覺得jQuery的方法很大包，可參考本站另一篇

javascript get query values from url 取網址參數

QueryString.js

把第一段的程式碼放到一個名叫 QueryString.js 的檔案，以後需要時再去引入這支檔案就可。

/*
    VECTOR COOL
    https://vector.cool
*/
(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

用法：

/*
    VECTOR COOL
    https://vector.cool
*/
//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

參考資料：

[……]

閱讀更多

jQuery 確認是否擁有某一標籤屬性

jQuery 並沒有 .hasAttr() 用於判斷某一屬性是否存在，所以透過下面代碼來檢查

此代碼優點在於可檢查屬性是否存在，並檢查是否為空值

/**
* VECTOR COOL
* https://vector.cool
*/
var attr = $(this).attr(‘name’);
if (attr && attr !== false) {
// Element has this attribute
}

 

 [……]

閱讀更多

解決 WordPress 無法使用 jQuery 問題

設計WordPress主題或插件開發時，常會需要使用jQuery，WordPress其實很貼心的已經載入jQuery，但實際使用時發現，原本可以跑的jQuery程式，放進WordPress卻不能跑了，才知道原來WordPress的jQuery要這樣寫。

 

WordPress 頁面中，確實看到 jQuery 已載入

<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

頁面中加入一段測試碼

<script>
$( document ).ready(function() {
        alert("hello");
});
</script>

理論上應該是會順利看到 hello 對話框，但是沒有

 

解決方法：

主要是jQuery寫法的問題，選擇器不能使用習慣的簡碼 $ 符號，而要用下面這兩種寫法，
順利看到hello 對話框

jQuery( document ).ready( function( $ ) {

    alert("hello");

} );
或
( function( $ ){

    alert("hello");

} )( jQuery );

本文出自：https://v123.tw

[……]

閱讀更多

jQuery 選擇器，替代萬用字元 模糊查找匹配元素

jQuery 選擇器中沒有所謂的「萬用字元(*)」，可以透過依些方式接近模糊查找元素或值的目的

歸納出幾種用法

下表屬性名稱不一定為Class，可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值[class!=’test’]元素屬性不包含指定的值

使用範例：

Demo Download 範例下載：

[……]

閱讀更多

jQuery 取網址、根目錄

suppose that you have a page with this address: http://sub.domain.com/page.htm. use the following in page code to achive those results:
  • window.location.host : you’ll get sub.domain.com:8080 or sub.domain.com:80
  • window.location.hostname : you’ll get sub.domain.com
  • window.location.protocol : you’ll get http:
  • window.location.port : you’ll get 8080 or 80
  • window.location.origin : you’ll get http://sub.domain.com *
Update: about the .origin
* As the ref states, browser compatibility for window.location.origin is not clear. I’ve checked it in chrome and it returned http://sub.domain.com:port.
出處
http://stackoverflow.com/questions/1368264/get-host-name-in-javascript

[……]

閱讀更多

jQuery javascript關閉 fancybox視窗

由fancybox視窗中關閉：

<a href="javascript:parent.$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	parent.$.fancybox.close();
})
</script>

由主頁上關閉fancybox視窗：

<a href="$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	$.fancybox.close();
})
</script>

 [……]

閱讀更多