ssh 紀錄

使用ssh遇到的錯誤

ssh-add ...

錯誤："Could not open a connection to your authentication agent."

解決方法：

    ※若使用Windows系統，則必須開啟Git Bash才能執行。

先執行

eval `ssh-agent -s`
再執行
ssh-add
就沒有問題了

錯誤："no kex alg"

解決方法：

    ※若使用Windows系統，則必須開啟Git Bash才能執行。

export GIT_SSH_COMMAND='ssh -oKexAlgorithms=+diffie-hellman-group1-sha1'

JavaScript將上傳圖片用二進位URL讀取

範例網址：用FileReader讀取檔案

若要監看當前的 blob 存儲狀態，Chrome內還有一個頁面可以監看：chrome://blob-internals/

html:

<input type="file" id="myFile" accept="image/*" />

javascript:

var x = document.getElementById("myFile"),
    htmldiv = document.createElement('div'),
    htmlhref = document.createElement('a'),
    htmlimg = document.createElement('img');
x.onchange = function(){
    var url1 = URL.createObjectURL(x.files[0]);
    htmldiv.appendChild(htmlhref);
    htmlhref.innerHTML = 'href';
    htmlhref.setAttribute('target', '_blank');
    htmlhref.href = url1;
    htmlimg.src = url1;
    document.body.appendChild(htmldiv);
    document.body.appendChild(htmlimg);
    htmlimg.onload = function(){
        URL.revokeObjectURL(this.src);
    }
}

分享兩個 jQuery 小工具

導覽列收合選單

範例網址：導覽列收合選單

  ※紅字可自訂

html:

<div class="header_top">
    <div class="header_top_menu">
        <button type="button" class="nav-toggle-button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
</div>

<div class="header_buttom">
    <nav role="navigation" id="menu">
        <ul>
            <li><a href="javascript:void(0)">按鈕一</a></li>
            <li><a href="#menu">按鈕二</a>
                <ul>
                    <li><a href="javascript:void(0)">按鈕二之一</a></li>
                    <li><a href="javascript:void(0)">按鈕二之二</a></li>
                    <li><a href="javascript:void(0)">按鈕二之三</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">按鈕三</a></li>
            <li><a href="#menu">按鈕四</a>
                <ul>
                    <li><a href="javascript:void(0)">按鈕四之一</a></li>
                    <li><a href="javascript:void(0)">按鈕四之二</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

css (選單上方區塊、按鈕 - 空白處可插入Logo):

/*header[role=banner]*/
.header_top {
    border-bottom: 1px solid #B0B0B0;
    height:50px;
}
.header_top_menu {
    position:absolute;
    top:0;
    right:0;
}
@media only screen and (min-width: 720px){
    .header_top {
        padding:10px 0;
        height:82px;/*62+10+10=82*/
    }
}

css (總選單收合按鈕):

/*toggle-button*/
.nav-toggle-button {
    background-color: #808080;
    margin: 9px;
    float: right;
    padding: 9px 10px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    outline: 0;
}
.nav-toggle-button.active {background-color: #3ab0e2}
.nav-toggle-button .icon-bar {
    background-color: #ffffff;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.nav-toggle-button .icon-bar+.icon-bar {margin-top: 4px}
@media screen and (min-width: 720px) {
    .nav-toggle-button {display: none}
}

css (選單):

/*nav[role=navigation]*/
nav[role=navigation] {
    display: none;
}
nav[role=navigation] ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav[role=navigation] > ul > li {
    border-bottom: 1px solid #B0B0B0;
}
nav[role=navigation] a {
    transition: color .3s;
    display: inline-block;
    width: 100%;
    padding: 4px;
    color: #666666;
    font-size: 20px;
    text-align: center;
    font-family: "微軟正黑體";
}
nav[role=navigation] > ul > li > a {
    color: #666666;
}
nav[role=navigation] > ul > li > a:active {
    color: #0000FF;
}
nav[role=navigation] > ul > li > a.list {
    position: relative;
}
nav[role=navigation] > ul > li > a.list #list-svg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
nav[role=navigation] > ul > li > a.list:active #list-path {
    transition: .3s;
    fill: #0000ff;
}
@media only screen and (min-width: 720px){
    nav[role=navigation] {
        display: block !important;
    }
    nav[role=navigation] > ul > li {
        width: 100%;
    }
    nav[role=navigation] > ul > li > a:hover {
        color: #0000FF;
    }
    nav[role=navigation] > ul > li > a.list:hover #list-path {
        fill: #0000ff;
    }
}
nav[role=navigation] > ul > li > ul > li {
    border-top: 1px solid #B0B0B0;
}
nav[role=navigation] > ul > li > ul > li > a {
    background: #EEEEEE;
}
nav[role=navigation] > ul > li > ul > li > a:active {
    color: #0000FF;
}
@media only screen and (min-width: 720px){
    nav[role=navigation] > ul > li > ul > li > a {
        padding: 3px;
    }
    nav[role=navigation] > ul > li > ul > li > a:hover {
        color: #0000FF;
    }
}

jQuery:

$(function(){
    $('.nav-toggle-button').click(function(){
        $('#menu').slideToggle();
        $('.nav-toggle-button').toggleClass('active');
    });
    $('#menu > ul > li > ul').each(function(){
        $(this).css('display', 'none');
    });
    $('#menu > ul > li > a').each(function(){
        if($(this).next('ul').size()){
            $(this).addClass('list');
            $(this).append('<svg height="25" id="list-svg" width="25"><path d="M 5,5 20,5 12.5,20 z" fill="#666666" id="list-path"></path></svg>');
        }
    });
    $('#menu > ul > li > a').click(function(event){
        event.preventDefault();
        
        if($(this).next('ul').size()){
            $(this).next('ul').slideToggle();
        }else{
            location.href = $(this).attr('href');
        }
    });
});

選單完成截圖：

選單截圖-電腦版

選單截圖-手機版

快速回到網頁頂端按鈕

範例網址：快速回到網頁頂端按鈕

  ※紅字可自訂

html:

<div class="pageTop">
    <button>
        <img src="images/Top.png" />
    </button>
</div>

css:

* {
    box-sizing: border-box;
}
body {
    margin: 0 auto;
    font-size: 20px;
}
img {
    vertical-align: top;
    max-width: 100%;
}

.pageTop {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9000;
}
.pageTop button {
    opacity: .7;
    background: transparent;
    outline: none;
    cursor: pointer;
    border: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

jQuery:

$(function(){
    $('.pageTop').hide();
    $(window).scroll(function(){
        if($(this).scrollTop() > 150){
            $('.pageTop').fadeIn();
        }else{
            $('.pageTop').fadeOut();
        }
    });
    
    $('.pageTop button').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

按鈕完成截圖：

按鈕截圖-電腦版

按鈕截圖-手機版

分享製作jQuery plugin - 範例 音樂播放器

花了好多時間做 jQuery plugin，終於告一個段落了，這次是做音樂播放器，我就來解說一下吧！

範例網址：宮崎駿動畫 小提琴曲集 - ytsAudio

建立和連接

  ※紅字可自訂
寫 jQuery plugin 時，通常外圍的方法都是

(function($) {
  var default = {
    id: 0,
    url: null
    // 程式碼...
  }
  
  $.fn.ytsaudio = function(options){
    data = $.extend({}, default, options);
    
    // 程式碼......
    
  }
})(jQuery)

html連結Plugin則是

<div id="player" class="player"></div>

<script>
$(function(){
  $('#player').ytsaudio();
})
</script>

$.fn.ytsaudio可以建立一個Plugin，ytsaudio是Plugin的名字。default是json物件，Plugin的屬性及方法。

內容

主要是在html是原本就有的元素(本範例是ID為player的div)裡面，增加Plugin的內容及變化。

var setup = function() {
  // 本段程式碼是增加音樂播放器主要的區塊，音檔、標題、控制項、音樂時間、進度條等。
}

var setupList = function() {
  // 本段程式碼是增加播放烈表
}

var appendAudio = function(){
  // 本段程式碼是增加音檔
}

var appendTitle = function(){
  // 本段程式碼是增加音樂標題
}

var appendControls = function(){
  // 本段程式碼是增加控制項(播放/暫停按鈕、上/下首...等等)
}

var appendTime = function(){
  // 本段程式碼是增加音樂時間(當前音樂時間、全部音樂時間)
}

var appendProgressbar = function(){
  // 本段程式碼是增加進度條(目前只能點擊，無法拖曳，正在做)
}

完成播放器截圖：

大致上是這樣，如果想了解細部的話，請在留言版上留言，謝謝。