東京発、雲に乗って

2017年4月7日2017年4月12日

【jQuery】ページのトップ（最上部）へなめらかにスクロール

最近多用している、ページトップへのアニメーションスクロール、
jQueryなら簡単に実装できます。

var pagetop_scroll = function() {
  var speed = 500; /* ミリ秒 */
  var position = $('html').offset().top;
  $('body,html').animate({scrollTop:position}, speed, 'swing');
};

var pagetop_scroll = function() {

var speed = 500; /* ミリ秒 */

var position = $('html').offset().top;

$('body,html').animate({scrollTop:position}, speed, 'swing');

};

2017年4月6日2017年4月6日

【JavaScript】ドラッグ＆ドロップで複数ファイルの一括アップロード

複数のファイルをドラッグ＆ドロップで一気にアップロードするページ、
実はけっこう簡単に作れます。Ajaxを使えばページ遷移も不要です。
（一部jQueryを使用しています）

まずはHTML側にドロップさせる場所を作ります。

<div id="upload_area">
<div id="drop_area" style="background-color:#f0f0f0;width:100%;height:200px;padding:10px;border:2px solid #808080;border-radius:5px;" ondragover="dragover(event);" ondrop="drop(event);">
この枠内にファイルをドラッグ＆ドロップしてください。
<br/>
複数のファイルを選択すれば一度にアップロードできます。
</div>
</div>

この枠内にファイルをドラッグ＆ドロップしてください。

<br/>

複数のファイルを選択すれば一度にアップロードできます。

</div>

ドラッグ時とドロップ時には関数を呼ぶようにしておきます。

次にその関数をJavaScriptで定義します。

ドラッグ中にブラウザの機能をキャンセルさせます。

var dragover = function(e) {
  e.preventDefault();
};

var dragover = function(e) {

e.preventDefault();

};

ドロップされたらファイルを取り出してアップロード関数を呼びます。

var upload_cnt = 0;
var drop = function(e) {
  // ブラウザの機能をキャンセルします
  e.preventDefault();

  // ファイルを取り出します
  var files = e.dataTransfer.files;
  upload_cnt = 0;
  file_num = files.length;

  // 1件ずつアップロード関数を呼びます
  for (var i = 0; i < files.length; i++) {
    ajax_upload(files[i]);
  }
};

var upload_cnt = 0;

var drop = function(e) {

// ブラウザの機能をキャンセルします

e.preventDefault();

// ファイルを取り出します

var files = e.dataTransfer.files;

upload_cnt = 0;

file_num = files.length;

// 1件ずつアップロード関数を呼びます

for (var i = 0; i < files.length; i++) {

ajax_upload(files[i]);

}

};

アップロード関数です。
（エラー処理などは割愛し要点だけ簡単に記述します）

var ajax_upload = function(file) {
  var form_data = new FormData();
  form_data.append('file', file);
  var func = function() {
    upload_cnt++;
    if(file_num == upload_cnt) {
      alert('アップロードが完了しました');
    }
  };
  $.ajax({
    type: 'POST',
    url: '（アップロード処理を行うサーバー側のURL）',
    data: form_data,
    success: func
  });
};

var ajax_upload = function(file) {

var form_data = new FormData();

form_data.append('file', file);

var func = function() {

upload_cnt++;

if(file_num == upload_cnt) {

alert('アップロードが完了しました');

}

};

$.ajax({

type: 'POST',

url: '（アップロード処理を行うサーバー側のURL）',

data: form_data,

success: func

});

};

対応していないブラウザのための処理をロード時に呼びましょう。

if(!window.File) {
  $('upload_area').html('対応していません');
}

if(!window.File) {

$('upload_area').html('対応していません');

}

2017年4月4日2017年4月6日

【猫】掃除機大好き猫

掃除機で吸われるのが日課です。

みんなの猫の写真がたくさんあります↓

2017年3月2日2017年3月3日

【猫】はやぶさと猫

東北新幹線はやぶさから目を離しません

2017年2月22日2017年3月3日

【WordPress】トップページのtitleタグをカスタマイズ

WordPressでトップページのtitleタグの内容をカスタマイズしようと思い調べましたが、
バージョンによって修正箇所が違うようですね。
バージョン4.7では
wp-includes/general-template.php
の
function wp_get_document_title()
の中の下記の部分を修正しました。

修正前

if ( is_front_page() ) {
  $title['tagline'] = get_bloginfo( 'description', 'display' );
} else {
  $title['site'] = get_bloginfo( 'name', 'display' );
}

if ( is_front_page() ) {

$title['tagline'] = get_bloginfo( 'description', 'display' );

} else {

$title['site'] = get_bloginfo( 'name', 'display' );

}

修正後（サイトのキャッチフレーズを削除したかった）

if ( is_front_page() ) {
  //$title['tagline'] = get_bloginfo( 'description', 'display' );
  $title['tagline'] = '';
} else {
  $title['site'] = get_bloginfo( 'name', 'display' );
}

if ( is_front_page() ) {

//$title['tagline'] = get_bloginfo( 'description', 'display' );

$title['tagline'] = '';

} else {

$title['site'] = get_bloginfo( 'name', 'display' );

}

他にも方法があるのかもしれませんがとりあえず。