jQueryで "ある要素" が画面内にあるかどうかを判別する

jQueryで "ある要素" が画面内にあるかどうかを判別するには

要素のページ内での位置（Y座標）、現在のスクロール位置（Y座標）を見て判別します。

$(function() {
// 引き金となる要素を設定
var triggerNode = $(".trigger");
// 画面スクロール毎に判定を行う
$(window).scroll(function(){
// 引き金となる要素の位置を取得
var triggerNodePosition = $(triggerNode).offset().top - $(window).height();
// 現在のスクロール位置が引き金要素の位置より下にあれば‥
if ($(window).scrollTop() > triggerNodePosition) {
// なんらかの命令を実行
console.debug("Do Something");
}
});

mysql任意の値を一番上、または一番下にしてソートする

$sql = "SELECT * FROM table_name order by case colum1 when '-' then 2 else 1 end, colum1,data1 asc;";

解説

order by
//もしcolum1が'-'ならば優先順位2番目にソートして
case colum1 when '-' then 2
//それ以外は優先順位１でソートする
else 1 end,
//この条件でcolum1をソート
colum1
//次にdata1でソートする
,data1 asc

逆パターン

order by
//もしcountry_nameが'Japan'ならば優先順位1番目でソートして
case country_name when 'Japan' then 1
//それ以外は優先順位2番目にソートする
else 1 end,
//この条件でcountry_nameをソート
country_name
//次にdata1でソートする
,data1 asc

その他複数できそう
order by
//もしcountry_nameが'Japan'ならば優先順位1番目でソートして
case country_name
when 'Japan' then 1
when 'USA' then 2
//それ以外は優先順位2番目にソートする
else 3 end,
//この条件でcountry_nameをソート
country_name

mysqlから非同期通信でDB抽出

common.js

//DBからデータを抽出
function db_select(str){
	var result 
$.ajax({
						url: 'http://01filament.co.jp/01WORKS/class/db_select.php',
						timeout:10000,
						type: "POST",
						async: false,
						data:{ table:str},						
						success: function(responce) {
							//JSON文字列をパースしてjavascriptで使用できるようにする
							result = $.parseJSON(responce);
						},
						// 通信失敗時の処理
						error: function() {alert('Errer Code db_select')}
					});
					return result;
	}

db_select.php

<?
require('../Library/database.php');

$sql = "select * from $table where no=$no";
$stmt = $pdo->query($sql);
$result = $stmt->fetch(PDO::FETCH_ASSOC);

//連想配列をJSON文字列化
$str= json_encode($result);
echo $str;
?>

view.php

<script>
$(function(){
	var str= db_select('user');
	for(key in str){
      $("#"+key).val( str[key] ) ;
	  }
});
</script>

<input type="text" name="name" id="name">

jQuery Ajaxでファイルを送りたい！

$(document).on('click','#edit_job_comit',function(e){
	e.preventDefault();
	var form = $('#jobs_e').get()[0];
	var formData = new FormData( form );
	$.ajax({
		url: 'http://01filament.co.jp/01cloud/admin/class/comit_jobs.php',
		type: "POST",
		 dataType: 'html',
		timeout:10000,
      // Ajaxがdataを整形しない指定
      processData: false,
      // contentTypeもfalseに指定
      contentType: false,
		data:formData,
		// 通信成功時の処理
		success: function(responce) {
				window.location='http://01filament.co.jp/01cloud/admin/job/finish_edit.html';
		},
		// 通信失敗時の処理
		error: function() {alert('Errer Code 1091')}
	});
});

macでファイル作成日を変える

ターミナルで実行
setfile -d '12/12/2014 12:43:56' /Volumes/USK/*.jpg

要素をコピーしてから表示

<div class="alert alert-success" id="err">
<span id="err_coment"></span>
        <button type="button" data-dismiss="alert" class="close" data-ajax="false">
            <span>×</span>
        </button>
    </div>

クリックした場合
javascript

//on click
$("#err").clone(true).insertAfter("#err");

結果

<div class="alert alert-success" id="err">
<span id="err_coment"></span>
        <button type="button" data-dismiss="alert" class="close" data-ajax="false">
            <span>×</span>
        </button>
    </div>
<div class="alert alert-success" id="err">
<span id="err_coment"></span>
        <button type="button" data-dismiss="alert" class="close" data-ajax="false">
            <span>×</span>
        </button>
    </div>

※追記：上記場合on clickするたびに追加されてしまうのでアラート表示機能としては不十分なので

$("#err").clone(true).attr('class','alert alert-success copy').insertAfter("#err");

解説

$("#err").clone(true).　//#errをコピー
attr('class','alert alert-success copy'). //コピーした要素に新しいclass追加して変更
insertAfter("#err");　//コピー元の後に追加

例えば使い方は

$('#btn').on('click',function(){
//毎回クリックするたびにコピーしたものを削除する
$(".copy").remove();
//新しくコピーを作る
$("#err").clone(true).attr('class','alert alert-success copy').insertAfter("#err");

//コピーした要素にテキスト追加
$(".copy").html('追加した要素に書き込む');
//コピーした要素を表示
$(".copy").show();

floatした横並びボックスの高さを揃える

<script>
$(function(){
//MAXを定義
var maxHeight=0;

//同じボックスに同じクラス名をつけてeachする
  $(".thumbnail").each(function(){

//一番上から順に class='thumbnail'の箱の高さを調べる
	 if ($(this).height() > maxHeight) {  //もし現在のmaxHeightより現在のボックスが大きければ
        maxHeight = $(this).height(); 　　　//maxHeightを入れ替え
      }
   });
　//最後にすべてのclass='thumbnail'の高さをmaxHeightにする
   $('.thumbnail').height(maxHeight);
});