SQLの窓

2016年11月23日

jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する

元々は、ブラウザ側で画像の存在チェックをして、存在したものだけを表示するという処理を考えてる時に最初に思いついた内容なんですが、画像をロードする時間があるので、全ての画像を表示し終わってから非表示にするというのは、かなり無理があったわけです。



画像ファイルが存在した時のみ、表示する jQuery の記述

なので、ロード後のページのチェックならば妥当性があると思い、以下のようなコードを作成しました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var img = [
"https://lightbox.sakura.ne.jp/toolbox/image/__.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/script.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/jquery.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/__.png", 
];
$(function(){

	// ページ内の画像のリンク切れを探す
	$("#action").on( "click", function(){

		// 全ての画像
		$("img").each(function(){
			// ロードイベントが起きておらず、値が 0 のようです。
			// ※ 正常な画像もロード前は 0 です
			if( $(this).get(0).naturalWidth == 0 ) {

				// 動的テーブルコンテンツ作成
				var table = $("#result");
				// 行
				var row = $("<tr></tr>").appendTo( table );
				// 列
				var column = $("<td></td>").appendTo( row );
				// URL
				column.text($(this).attr("src"));
			}
		});
	});

	// 動的テーブルコンテンツ作成
	var table = $("#target");
	for( i = 0; i < img.length; i++ ){
		// 行
		var row = $("<tr></tr>").appendTo( table );
		// 列
		var column = $("<td></td>").appendTo( row );
		// 画像
		var iamge = $("<img>").appendTo( column );
		// URL
		iamge.attr("src", img[i] );
	}

});
</script>

<table id="target">
</table>
<input id="action" type="button" value="action">
<table id="result">
</table>



要するに、naturalWidth のメモ書きなんですが、それだけじゃショぼいので、一応でっかい画像を使って直後にチェックしたのでは間に合わないという事を試したわけです( naturalWidth は 0 でした )

テーブルを動的に作るサンプルコードでもありますし、ホント jQuery って便利ですわ。


▼ 実際にやってみる

ま、結局ブックマークレットにしないと意味無いので年末までには作成しよう。



タグ:jquery
posted by at 2016-11-23 18:11 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2016年06月10日

クリックした入力フィールド以外をブラックアウトする jQuery プラグイン


クリックして他をブラックアウトしている間だけ、position:relative になります。それで問題の無いフィールドに使えると思います。
$.fn.extend({
	blackOut: function(){
		if ( $("#overlay_blackout" ).length == 0 ) {
			$( '<div id="overlay_blackout"></div>' ).appendTo( 'body' )
			.css({
				"background": "rgba(0,0,0,0.3)",
				"display": "none",
				"position": "absolute",
				"top": "0",
				"left": "0",
				"z-index": "99998"
			});

			$(window).on("load resize", function(){
				if ( document.documentElement.clientWidth < Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) ) {
					$('#overlay_blackout').css("width", Math.max(document.documentElement.scrollWidth,document.body.scrollWidth) +'px');
				}
				else {
					$('#overlay_blackout').css("width", "100%");
				}
				if ( document.documentElement.clientHeight < Math.max(document.documentElement.scrollHeight,document.body.scrollHeight) ) {
					$('#overlay_blackout').css("height", Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)+'px');
				}
				else {
					$('#overlay_blackout').css("height", "100%");
				}
		
			});

		}

		$(this).click(function(){
			$(this).css('position', 'relative');
			$(this).css('z-index', 0x7fffffff);
			$('#overlay_blackout').fadeIn(300);
		});

		var base = this;
		$('#overlay_blackout').click(function(){
			$(this).fadeOut(300, function(){
				$(base).css('position', 'static');
				$(base).css('z-index', 'auto');
			});
		});


	}
});


※ 入力関係以外でも、大きさを持つ要素ならば使えると思います
※ 環境によっては、'<div id="overlay_blackout"></div>' ではなく '<span id="overlay_blackout"></span>' にするといい場合があります( 例 : mmenu を使う場合 )


posted by at 2016-06-10 22:11 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

FORM の内容を localStorage に保存する jQuery プラグイン

とにかくテスト中は何度もテキスト入力をしたく無いので、これを設定しておくと便利です
氏名
フリガナ
所属
性別 (0:男性,1:女性)
給与
手当
管理者
生年月日

プラグイン部分のソースコード
// **************************************
// FORM の内容を localStorage に保存する
// jQuery プラグイン作成
// **************************************
$.fn.extend({
	saveLocalStorage: function(){
		var list = $(this).serializeArray();
		$(list).each(function( idx, obj ){
			localStorage[obj.name] = obj.value;
		});
	},
	loadLocalStorage: function(){
		// エレメント
		var form = $(this).get(0);
		var list = $(this).serializeArray();
		$(list).each(function( idx, obj ){
			$(form).find("[name='"+ obj.name +"']").val( localStorage[obj.name] || '' );
		});
	}
});


localStorage にデータが最初は無いので、localStorage[obj.name] || '' と書く事によって、空文字が最初だけ返されます。( 最初が false となるので || の後の空文字が返されます )



posted by at 2016-06-10 19:30 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2015年11月20日

tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン

デモページ

ダウンロードページ

純国産プラグインです。使用方法も日本語です。

とにかく、元データとして JSON を想定していて、とりあえず TABLE を作成したい場合に便利です。ここから他のプラグインで加工するベースにするといいと思います。

注意事項

圧縮バージョンが配布されていないので、必要ならば自分で行う必要がありますが、packer ではエラーになるので、Online JavaScript/CSS Compressor を使用しました

サンプルコード
<script src="tableMagic/js/jquery.tablemagic-min.js"></script>

<link rel="stylesheet" href="css.php">
<style>
.trEven {
	background-color: #FFFFFF;
}
.trOdd {
	background-color: #F1F4F8;
}

#target table * {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
	font-size: 16px;
}
#target table {
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#target table td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	white-space: nowrap;
}
#target table th {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
	white-space: nowrap;
}
</style>
<script>
// jQuery 初期処理
$(function() {

	$.get("syain.php?cond=" , function(data){

		$('#target').tableMagic(
			data,
			{
				firstColTd2Th: false
			}
		);


		customTable();

	});



});

function customTable() {

		$("table").find("th").eq(6).css("text-align", "right");
		$("table").find("th").eq(7).css("text-align", "right");

		$("table").find("tr").each( function(){
			$(this).find("td").eq(6).css("text-align", "right");
			$(this).find("td").eq(7).css("text-align", "right");

			var kyuyo = $(this).find("td").eq(6).text();
			kyuyo = parseInt(kyuyo,10);
			kyuyo = kyuyo.toLocaleString();
			$(this).find("td").eq(6).text(kyuyo);

			var teate = $(this).find("td").eq(7).text();
			if ( teate != "" ) {
				teate = parseInt(teate,10);
				teate = teate.toLocaleString();
			}
			$(this).find("td").eq(7).text(teate);

		} );
}


</script>
</head>
<body>

<div id="target"></div>


customTable は、直接関係ありません。出来上がったテーブル内のデータを後から jQuery でカスタマイズしています。

firstColTd2Th: false は、デフォルトでは先頭列が TH になってしまうので変更しています。( テーブルの見栄えは、好みで CSS で変更するといいでしょう )



posted by at 2015-11-20 21:40 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2015年11月14日

滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll

デモページ

CDNホスティングなので、ダウンロード不要

https://cdnjs.com/libraries/jquery.nicescroll


概要

Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style.

IOS のような、スクロールバーインターフェイスを jQuery のプラグインとして実現しています。

ページや DIV に関して簡単に実装できます
$(function() {

	$( "#story" )
		.css({
			width: "700px",
			height: "200px",
			whiteSpace: "pre-wrap"
		});

	$( "html,#story" ).niceScroll();

});

その他、いろいろオプションがあるようですが、DIV に対してスクロール可能なコンテンツを実装したい場合に便利です。幅と高さを固定してプラグインすると、自動的に思ったようなコンテンツとして表示できます。


posted by at 2015-11-14 01:14 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2015年11月03日

jQuery : F1 キーでヘルプを起動させないようにする

IE で jQuery の keydown での return false; が効かなかったので、調べて見るとわりとレアな情報でした。

onhelp で return false; する

見つけたサンプルでは、BODY 要素に onhelp="retunr false" とありました。この記述は、jQuery では、document に対するイベントが同等で、$("body") では正しく動作しません( ページの下の何もないところで F1 が発動してしまいます )
<script>
// jQuery 初期処理
$(function() {

// F1 キーで HELP を起動させないようにする
	$( document )
		// IE 用
		.on( "help", false )
		// IE 以外の一般処理用
		.on( "keydown", function(e){
			if ( e.keyCode == 0x70 ) {
				return false;
			}
		});

});
</script>


関連する情報

仮想キーコード



タグ:jquery IE
posted by at 2015-11-03 15:11 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

2015年07月17日

jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する

jquery.balloon.js のダウンロードと使い方のページ

jQuery UI の .show を使って effect(効果)easing、duration を適宜指定して effect を使った表示効果を発揮します。






▼ マウスカーソルを上に重ねて下さい
● fade_swing



▼ 右からスライド
● slide_right_150



▼ 点滅
● pulsate_easeOutElastic



▼ 窓のブラインドを開けるように
● blind_easeInExpo
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.ui ) {
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<style>
.balloon_animate {
	cursor: pointer;
}
</style>
<script>
var contents_text_animate = {
	fade_swing: "fade_swing",
	slide_right_150: "右からスライドしますが、右からの指定は追加オプション指定です。さらに、スライドの開始位置も指定しています",
	pulsate_easeOutElastic: "点滅",
	blind_easeInExpo: "窓のブラインド"
}
var animate_func = {
	fade_swing: function(d) {
		this.show( {
			effect: "fade",
			duration: d,
			easing: "swing" 
		}); 
	},
	slide_right_150: function(d) {
		this.show( {
			effect: "slide", direction: "right", distance: 150,
			duration: d,
			easing: "swing" 
		}); 
	},
	pulsate_easeOutElastic: function(d) {
		this.show( {
			effect: "pulsate",
			duration: d,
			easing: "easeOutElastic" 
		}); 
	},
	blind_easeInExpo: function(d) {
		this.show( {
			effect: "blind",
			duration: d,
			easing: "easeInExpo" 
		}); 
	}
}
$(function() {
	$( ".balloon_animate" ).each( function() {
		$( this ).balloon(
			{
				showDuration: 400,
				showAnimation: animate_func[this.id],
				contents: contents_text_animate[this.id],
				position: "right",
				tipSize: 20,
				offsetY: 0,
				offsetX: 30,
				css: {			
					width: "200px",
					height: "150px",
					opacity: "1",
					color: "#333",
					fontSize: "16px",
					borderRadius: "10px",
					border: "solid 2px #A63814",
					padding: "10px"
				}
			}
		);
	});

});
</script>
<pre>






<span class="balloon_animate" id="fade_swing">▼ マウスカーソルを上に重ねて下さい
● fade_swing</span>



<span class="balloon_animate" id="slide_right_150">▼ 右からスライド
● slide_right_150</span>



<span class="balloon_animate" id="pulsate_easeOutElastic">▼ 点滅
● pulsate_easeOutElastic</span>



<span class="balloon_animate" id="blind_easeInExpo">▼ 窓のブラインドを開けるように
● blind_easeInExpo</span>
</pre>


関連する記事



posted by at 2015-07-17 18:20 | jQuery | このブログの読者になる | 更新情報をチェックする

jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )

やはり、offsetXやoffsetYに負の値を使うと、tipSize が無効になるので、offsetXとoffsetYは、0 のままで、対象物を動かすようにしました。
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<script>
function message_balloon(str) {
	$("#target_base").showBalloon({
		contents: str+"<br /><br /><input type='button' value='閉じる' onclick='b_2()'/>",
		position: "right",
		offsetX: 0,
		offsetY: 0,
		tipSize: 20,
		css: {
			border: "solid 5px #000",
			color: "#000",
			fontWeight: "bold",
			fontSize: "20px",
			background: "url(https://lh5.googleusercontent.com/-vTfpmoECckg/T0odv9K_VbI/AAAAAAAAE4w/Mv9xb2tGomo/s200/_img.png) no-repeat",
			width: "160px",
			height: "120px",
			borderRadius: "20px",
			opacity: "1",
			padding: "10px 20px 10px 20px"
		}
	});
}
function b_2( ) {
	try{$("#target_base").hideBalloon();}catch(e){}
}
</script>
<input type="button" value="show1" onclick='message_balloon("こんにちは")'/>
<input type="button" value="show2" onclick='message_balloon("さようなら")'/>
<input type="button" value="hide" onclick='b_2()'/>
<div style='position:relative;height:200px;'>
<div id="target_base" style='position:absolute;width:20px;height:20px;top:100px;left:150px;background-color:#ccc;'></div>
</div>




関連する記事



タグ:jquery javascript
posted by at 2015-07-17 18:20 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする

jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う

jquery.balloon.js のダウンロードと使い方のページ

jQuery の .data で保存されるデータは、ロード時に利用しようとするとうまく行かなかったので、外部のオブジェクトとして設定データの一覧を作りました。前提としては、後で変更する事のない詳細説明としてカーソルを合わせる事によって表示されるイベント処理用です。

ポイントは、関係付けるために、id の文字列を利用しています。id 文字列をプロパティとして持つ一般オブシェクトを作成しておいて、変数名["プロパティ名"] で参照する為に、balloon メソッドの引数部分と同じスコープにそれぞれの jQuery オブジェクトが必要になります。

なので、.each を使用していますが、jquery.balloon.js は、そのような場合にもっと簡易的にデータほ設定する方法として、対象オブジェクトの title 属性に HTML レベルで直書きするようになっています。ただ、この場合は HTML 内なので、特殊な文字列は &#nnnn; 形式のエンコードが必要になります。

▼ 例えば以下は、HTML 内に HTML と JavaScript を記述する例です。
title="&lt;b style='cursor:pointer' onclick='alert(&#34;OK&#34;)'&gt;ここをクリック&lt;/b&gt;"







▼ この下にある画像の上にマウスカーソルを持っていって下さい。




<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<script>
var contents_text = {
	jiyunotsubasa: "TVアニメ『進撃の巨人』第二期オープニングテーマで使用されている書体を真似て作られたフォントです。",
	cp_font: "カタカナが、タイトルロゴ「ウルトラクイズ」風"
}
$(function() {
	$( ".font_img" ).each( function() {
		$( this ).balloon(
			{
				contents: contents_text[this.id],
				position: "top",
				tipSize: 20,
				offsetY: 18,
				offsetX: -10,
				css: {			
					width: "180px",
					opacity: "1",
					color: "#333",
					fontSize: "16px",
					borderRadius: "10px",
					border: "solid 2px #A63814",
					padding: "10px"
				}
			}
		);
	});

});
</script>
<pre>









<img class="font_img" id="jiyunotsubasa" src="https://lh6.googleusercontent.com/-ubSOwpnHv_4/Uun7RpSmViI/AAAAAAAASVQ/vx0ucJQoIxw/s280/freefont_logo_jiyunotsubasa.png" style="border: solid 1px #000000" /><img class="font_img" id="cp_font" src="https://lh3.googleusercontent.com/-mHGhQVAlntk/Uun7RvhvkSI/AAAAAAAASVM/Hz3Tsx5suw0/s280/freefont_logo_cp_font.png" style="border: solid 1px #000000" />

<br>
<img class="font_img" title="&lt;b style='cursor:pointer' onclick='alert(&#34;OK&#34;)'&gt;ここをクリック&lt;/b&gt;" src="https://lh6.googleusercontent.com/-ubSOwpnHv_4/Uun7RpSmViI/AAAAAAAASVQ/vx0ucJQoIxw/s280/freefont_logo_jiyunotsubasa.png" style="border: solid 1px #000000" /><img class="font_img" title="普通の直接文字列" src="https://lh3.googleusercontent.com/-mHGhQVAlntk/Uun7RvhvkSI/AAAAAAAASVM/Hz3Tsx5suw0/s280/freefont_logo_cp_font.png" style="border: solid 1px #000000" />




</pre>


関連する記事



posted by at 2015-07-17 18:20 | jQuery | このブログの読者になる | 更新情報をチェックする

jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)

2014年01月17日 時点の jquery.balloon.js では、jQuery 1.7.2 以降で css に null を設定して動作しませんでしたが、2ケ月後に 0.5.1 として更新されて正しく動いています( css に null が設定できる )

css に null を設定してしまうので、文字列のセンタリングは classname に設定する クラスで設定する事になります。 



オリジナルページで既に、画像を使ったバルーンが動作しません(jQuery 1.7.2 以降)。css に null をセットできなくなっているので必要な値をセットします。
▼ カーソルを上に置いて下さい
jQuery のキー位置をかな入力すると
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<style type="text/css">
.orange_balloon {
	background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	width: 323px;
	height: 278px;
	line-height:290px;
	font-size: 45px;
	font-weight: bold;
	text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
	$('#matanaisun').balloon(
		{
			position: "right",
			tipSize: 20,
			css: {
				opacity: "1",
				color: "#000",
				fontSize: "80px",
				borderRadius: "30px",
				border: "solid 5px #222",
			}
		}
	);
	$('#matanaisun2').balloon(
		{
			tipSize: 0,
			offsetY: -290,
			offsetX: 100,
			classname: "orange_balloon",
			css: null
		}
	);
});
</script>
<pre>
<span id="matanaisun" title="またないすん">
jQuery のキー位置をかな入力すると
</span>
■ <a id="matanaisun2" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">画像を使った自由なふきだし(Excelで簡単)作って、背景画像に指定しました</a>
</pre>

▼ 文字にマウスカーソルを合わせるとこうなります
jquery.balloon.js を使っています

▼ カーソルを上に置いて下さい( 画像が表示されます )画像を使った自由なふきだし(Excelで簡単)作って、背景画像に指定しました










関連する記事



posted by at 2015-07-17 18:18 | jQuery | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX