SQLの窓

2014年03月26日


JavaScript : リンクから _blank で開いたページを JavaScript で閉じる場合の動作テスト



要点は、IE が window.close だけでは「確認用のメッセージボックス」を表示する為、そのチェックを回避するコードが他のブラウザでどうなるのか試す事が目的です。結果は結構多彩になりました。単純にリンクで開かれたウインドウ内で処理する場合は、IE 以外は同じ動作をするのですが、新しく開かれたページの中の IFRAME のアクセスと、ブックマークで開かれた IFRAME 内のアクセスで結構いろいろ違いが出ました( Chrome と Safari は 同じです )

閉じるボタンが配置されたテストページ 

以下のコードをテストします。
(window.open("","_self")).close();

以下はこのページに埋め込まれた IFRAME で、window を parent に変更しています。
当然このページとは別のドメインなので、両方ともエラーになると思ったのですが、実際はそうでは無く不思議な事に別ドメインから親ページを閉じれる傾向があると解りました。逆に、閉じれなかったのは Firefox のみで、IE は、単純な close ですと、常に確認用のメッセージボックスが表示されます。

IE だけに関して言うと、window.close() でメッセージボックスが表示される仕様となっているので、業務アプリ的には、こちらのほうがありがたいのは言うまでもありませんが、なかなか不思議な結果となっています。

以下は、動的に作成した IFRAME 内のボタンです。ブログでは同一ドメインのページを保存できないので代替えです。
この処理では、同一ドメインのはずなのですが、傾向としては parent.close() がほぼ使えないという結果になってはいます。ただ、どんな場合もメッセージ付きで IE では動作します。また、IE と、Webkit では共通して
(window.open("","_self")).close(); の処理は意味がある事になるようです。



posted by lightbox at 2014-03-26 13:14 | JavaScript DOM | このブログの読者になる | 更新情報をチェックする

2014年03月25日


JavaScript と jQuery : 位置関係から id の無い要素の参照を取得

SELECT 要素の後に、ボタンがあるとして、ボタンから SELECT要素を参照するのに、両方の要素を DIV で囲みます。

id を付けてしまえば簡単ですが、いくつも埋め込む前提ですと面倒です。このユニットで閉じてしまえる参照のほうが場合によっては便利です。

とりあえず、jQuery でも同じ機能を実装してみましたが、parent と children のメソッドでいずれもセレクタが使用できます。ただ、parent は特殊で、ここでは this の parent は一つしかありませんが、最初の jQuery オブジェクトが複数の場合、それぞれの親の中から選択するのが parent( "セレクタ" ) のようです。
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<div>
   <select>
      <option value="http://winofsql.jp/download/WinOfSql102.zip">SQLの窓 Build C++</option>
      <option value="http://winofsql.jp/download/hanbaib.zip">簡易販売管理用DBデータ</option>
   </select> 
   <input type=button value="JavaScriptのみで取得" onclick='
         var a = this.parentNode;
         alert( a.getElementsByTagName("select")[0].value );
      '
   >
   <input type=button value="jQueryで取得" onclick='
         var a = $(this).parent().children("select").eq(0)
         alert( a.val() );
      '
   >
</div>



関連する記事

JavaScript : 同一階層(または下の階層)の要素を親経由で参照する


posted by lightbox at 2014-03-25 21:23 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2014年03月23日


デベロッパーツールを使用してクッキーの一覧を表示する

現在、どのブラウザのデベロッパーツール( 開発者ツール ) も高性能でオブジェクトの一覧を表示できます。以下のコードを、それぞれの複数行モードで実行すると、_data 内の一覧として見る事ができます。
console.clear();
var _data = {};
var _target = new Array();
var _arr = document.cookie.split(";");
for ( var _i = 0; _i < _arr.length; _i++ ) {
	var _x = _arr[_i].split("=");
	if ( _x.length >= 1 ) {
		_target.push(_x[0].replace(/\s/g,""))
	}
}
for(var _i = 0; _i < _arr.length; _i++) {
	var c = _arr[_i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(_target[_i]+'=') == 0) _data[_target[_i]] = c.substring((_target[_i]+'=').length,c.length);
}
console.dir(_data);


posted by lightbox at 2014-03-23 00:50 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2014年03月20日


ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする

Google では、有名な JavaScript ライブラリは、バージョン別にホスティングされています。当然、jQuery もあるので普通に使っています。
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
普通のページでは、ページのヘッダに jQuery の読込みは終わっているという事を想定し、その場合はそちらを使うようになっています。もし、そのページで、その記事より前に jQuery が読み込まれていない場合のみ、この処理が実行されます。

その場合も、IE の環境では、バージョンによってうまく動かない事があったので、window.addEventListener があるか無いかで対象バージョンを分けています。その際の URL も、window[window.location.hostname+'.loadjQuery'] の内容を使っているので、この記事より前に意図的に URL を変更する事によって、そのバージョンの jQuery を使用できるようにしています。( 特定のバージョンで処理した場合を想定しています )



posted by lightbox at 2014-03-20 11:05 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年03月18日


jQuery の回転アニメーションでくるくる回る『実行中アイコン』

常にループする必要があるので、それなりに CPU 負荷がかかります。しかし、CSS だけのアニメーションと比べて、JavaScript だから特別負荷がかかるようでは無いようです。開始と停止があれば使えるので、後は対象を何にするかだけです。これだと画像を使ったほうがよさそうな気はします。
(2014/03/18 テスト)

※ グラデーションを使った最初の DIV のほうがやや負荷が大きいようでした。
※ 最初の DIV のグラデーション指定は、IEでは IE10 以上でないとできません(IE9以前だと filter)





<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = 'https//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = 'https//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<style type="text/css">
#target {
	width:20px;
	height:20px;
	border:0px solid #000;
	border-radius: 50px;
	background: linear-gradient(to top, #ffffff, #999999);
	background: -webkit-linear-gradient(top, #fff, #999);
	position: relative;
}
#in_target {
	position: absolute;
	left: 5px;
	top: 5px;
	width:10px;
	height:10px;
	border:0px solid #000;
	border-radius: 10px;
	background-color: #ffffff;
}
#target2 {
	margin-left: 10px;

	border-radius: 50%;	/* 元の形状を丸くする為 */

	font-size: 18px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
	width: 5px;		/* サイズ変更 */
	height: 5px;

	/* em を使うと、font-size にサイズを連動させる事ができる */
	/* width: .25em; height: .25em; */

	/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
	box-shadow:
		0 -.4em       0 0 rgba(50,50,50,1),
		-.28em -.28em 0 0 rgba(50,50,50,.75),
		-.4em 0       0 0 rgba(50,50,50,.50),
		-.28em .28em  0 0 rgba(50,50,50,.25)
	; 
}
</style>
<div class="loop" id="target"><div id="in_target"></div></div>
<br><br>
<div class="loop" id="target2"></div>
<br><br>

<script>
$.fn.extend({ 
	rotateStop: function(){
		this.data("stop", true);
	},
	rotateAction: function(deg, duration, easing){
		var target = this;
		$({kakudo: 0}).animate(
			{kakudo: deg},
			{
				duration: duration,
				easing: easing,
				step: function(now) {
					target.css({
						transform: 'rotate(' + now + 'deg)'
					});
				},
				done: function() {
					if ( typeof target.data("stop") === 'undefined' || target.data("stop") === false ) {
						setTimeout(function(){target.rotateAction(deg, duration, easing)},0);
					}
					else {
						target.data("stop", false );
					}
				}
			}
		);
	}  
});

</script>

<input type="button" value="DIV回転" onclick='$(".loop").rotateAction(360,1000,"linear");'>
<input type="button" value="回転停止" onclick='$(".loop").rotateStop();'>


関連する記事


posted by lightbox at 2014-03-18 13:15 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2014年03月17日


jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )



jQuery の回転アニメーション ができるのですから、このような事は簡単にできます。

ただ、これをいかにコンテンツに応用するかが問題ですね。このようなエフェクトを使って、誰かが将来いろいろなパターンを作成してくれる事だと思います






<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	miscAnimate: function(deg, duration, easing){
		var target = this;
		$({kakudo: 0, kado: 0, shadow: 0}).animate(
			{kakudo: 360, kado: 30, shadow: 40},
			{
				duration: 3000,
				easing: "swing",
				step: function(now,tween) {
					if ( tween.prop == 'kakudo' ) {
						target.css({
							transform: 'skew(' + now + 'deg) rotate(' + now + 'deg)'
						})
					}
					if ( tween.prop == 'kado' ) {
						target.css({
							borderRadius: now + 'px'
						})
					}
					if ( tween.prop == 'shadow' ) {
						target.css({
							boxShadow: now + 'px '+ now +'px '+ now + 'px '+ now + 'px rgba(0, 0, 0, 0.5)'
						})
					}
				}
			}
		);
	}  
});

</script>

<input type="button" value="開始" onclick='$("#target").miscAnimate();'>
<br><br><br>

<div id="target" style='margin-left:100px;margin-top:100px;width:100px;height:100px;border:1px solid #000;'></div>

step の第二引数の tween は、こういう時に使うものだったのがやっと解りました。ちょっと仕様として不思議なのが、step 内の this は、tween と似たような元々のプロパティの増分がセットされているオブジェクトだったのですが、tween があるのだから、this は 元々のオブジェクトのほうがいいはずです。将来仕様変更あるかもしれませんね。

関連する記事


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

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

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

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

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


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

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

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

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

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



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり