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');

[……]

閱讀更多

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]

閱讀更多

解決 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

[……]

閱讀更多

Javascript 常用取網址 window.location

// ‘http://127.0.0.1/osac.com.tw/zh-tw/tag_page.php?aaa=1&bbb=2’

// 當前頁面的 URL
window.location.href
// output : ‘http://127.0.0.1/osac.com.tw/zh-tw/tag_page.php?aaa=1&bbb=2’

// 域名
window.location.hostname;
// output : ‘127.0.0.1’

//當前頁的路徑和文件名
window.location.pathname;            
// output : ‘/osac.com.tw/zh-tw/tag_page.php’

//所使用的網絡協議(http://或https://)
console.log(‘location.protocol=’+window.location.protocol);
// output : ‘http:’

//取URL參數
urlParam = decodeURIComponent(location.search)
// output : ‘?aaa=1&bbb=2′[……]

閱讀更多

Javascript for each in 做到跟PHP foreach 一樣的使用方式

//先宣告物件
var myobj = new Object();

//給物件的屬性值
myobj.color = ‘red’;
myobj.name = ‘hsin’;
myobj.nation = ‘taiwan’;

//這邊展現如何用for – in 取出。
var content=”;
for(var key in myobj){
       content +=”屬性名稱:”+ key+” ; 值: “+myobj[key]+”n”;
}

alert(content);

出處:四處流浪的阿基[……]

閱讀更多

解決 ie8 window.location.origin undefined 問題

window.location.origin
蠻好用的在js中可以取網址的這一段 =>  http://sub.domain.com
但ie8似乎不支援,往路上找到個解決方法,成功解了這問題
if (!window.location.origin) {
  window.location.origin = window.location.protocol + “//” + window.location.hostname + (window.location.port ? ‘:’ + window.location.port: ”);
}
原文
http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/

[……]

閱讀更多

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>

 [……]

閱讀更多