SQLの窓

2014年10月02日


ブラウザを使用した簡易パーセントエンコーディング変換

通常、サーバへデータを送る為にブラウザがパーセントエンコーディングを行ってくれますが、サーバーへ送らなくても変換だけは行ってくれます。なので、それを利用して変換するツールです。

主に利用している機能としては、document.charsetlocalStorage ですが、Firefox では charset が定義されていないので、FORM の acceptCharset を使用する必要がありました。
<script>
function setData() {
	var wk = location.search;
	var ar = wk.split("=");
	if ( ar.length > 1 ) {
		document.getElementById("result").value = ar[1];
	}

	if ( document.charset ) {
		document.getElementById("charset").value = (document.charset).toLowerCase();
	}
	else {
		document.getElementById("charset").value = (document.characterSet).toLowerCase();
	}

	if ( localStorage["encodeData"] ) {
		document.getElementById("data").value = localStorage["encodeData"];
	} 
	if ( localStorage["charset"] ) {
		document.getElementById("charset").value = localStorage["charset"];
	} 
}

function vSubmit() {

	localStorage["encodeData"] = document.getElementById("data").value;
	localStorage["charset"] = document.getElementById("charset").value;

	if ( document.charset ) {
		document.charset = document.getElementById("charset").value;
	}
	else {
		document.getElementById("frm").acceptCharset = document.getElementById("charset").value;
	}

}
</script>
<body onload="setData()">
<select id="charset">
<option value="utf-8">utf-8</option>
<option value="euc-jp">euc-jp</option>
<option value="shift_jis">shift_jis</option>
</select>
<form id="frm" onsubmit='vSubmit()'>
<input type="text" name="data" id="data">
<input type="submit" value="send">
</form>
<textarea id="result" style='width:550px;height:400px;'></textarea>
</body>

上記のようなファイルを「urlencode.htm」で作成して、IFRAME に埋め込んで使います。以下は、Google ドライブにアップロードして利用しています。
関連する記事

Google ドライブにWEBページを作成する方法



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

各ブラウザで、onbeforeunload を使おうとすると



上は、IE9 です。(現在は IE11 でエミュレーションできる全てのバージョンで動作します)

▼ IE11


Firefox は、いまだに returnValue にも何か文字列をセットしないと動作しません。

Firefox では、returnValue に値をセットする必要があるようで、しかもバグによって設定した文字列は表示されない事が記されています

リンク先では、IE も returnValue を使うような事が書かれていますが、IE9 ではreturn "文字列"; で動作し、リンク先の内容から Safari も return "文字列" であると書かれています。

結果的に、Google Chrome も動作しましたが、Opera はこのイベントそのものが実装されておらず、ページ移動時のチェックはできないようです。
※ 現在 Opera 15 では、WebKit エンジンに変わった為動作するらしいです。
<script type="text/javascript">
var postsw = 0;
if (window.attachEvent){
	window.attachEvent('onbeforeunload', unloadCheck);
}
else {
	window.addEventListener('beforeunload', unloadCheck, false);
}

function unloadCheck(ev) {
	var str;
	if ( postsw == 0 ) {
		str =  "★★★★★★★★★★★★★★★★★★★★★★\n";
		str += "     ページを移動しないで下さい!!\n";
		str += "★★★★★★★★★★★★★★★★★★★★★★\n";
		ev.returnValue = str;
		return str;
	}
}
</script>

postsw を、正当なページ移動処理時(submit ボタン等)の実行時に 1 にするとダイアログは表示されません

Firefox



Google Chrome



Safari(古い画像です)




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

2014年10月01日


jQuery UI の datepicker の基本オプションとダイアログ(datepicker)の利用

ダイアログの初期値をフィールドから取得し、変更した日付をフィールドへ戻しています

ダイアログの表示では、オプション引数の後(datepicker_option の次)に [150, 80] というような、x,y 座標を指定できます。指定しなければ画面中央に表示されます。指定した場合は、画面の左上からの座標になります。
Date:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn',
	yearRange: "c-70:c"
}
$(function() {
	$( "#datepicker" ).datepicker(datepicker_option);
	$( "#datetDialog" ).click(
		function() {
			$( "#datepicker" ).datepicker(
				"dialog",
				$("#datepicker").val(),
				function(sdate) {
					$("#datepicker").val( sdate );
				},
				datepicker_option
			);
		}
	);
});

</script>

Date: <input type="text" id="datepicker">
<br />
<input
	id="datetDialog"
	type="button"
	value="dialog">

関連する記事

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



posted by lightbox at 2014-10-01 22:25 | jQuery UI | このブログの読者になる | 更新情報をチェックする
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 終わり