SQLの窓

2011年07月29日


JavaScript と VBScript のカラーコード(#RRGGBB)の文字列と数値間の相互変換

とても短いコードですが、「ええ・・・と」となりそうな内容なので。

JavaScript
var color_code = "#123456";

alert(parseInt(color_code.replace("#","0x")))

var color_num = 1193046;

alert("#"+color_num.toString(16));
VBScript
color_code = "#123456"

MsgBox Clng(Replace(color_code,"#", "&H") )

color_num = 1193046

MsgBox("#" & Hex(color_num))
CLng 関数


posted by lightbox at 2011-07-29 13:30 | JavaScript | このブログの読者になる | 更新情報をチェックする

2011年07月24日


CSS3 の borderRadius で、四角から円へのモーフィング

400 x 400 の四角形なので、200 で円になると思ったら、太さのぶんを
指定した値から引いて半径にしているような感じです。

IE9 でまだテストできていません。
Opera はアニメーションしませんでした。
▼ このコードをソースコードから実行してみる
<style type="text/css">
#my_box_radius {
	width:400px;
	height:400px;

	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease;
	-o-transition: all 5s ease;
	-ms-transition: all 5s ease;
	transition: all 5s ease;

	border:40px #000 solid;
}
</style>
<script type="text/javascript">
function my_action_radius() {

	var obj = document.getElementById("my_box_radius");
	obj.style.borderRadius = "240px";
}
</script>

<input type="button" value="実行" onclick="my_action_radius();">
<div id="my_box_radius"></div>

以下は、margin に対して指定してみたのですが、効果は太さと色に対して
現れますが、スタイルはすぐ変更されます。ただ、サイズが変更されるに従
って、点線が動く事になります。
Firefox と Chrome で点線の動き方が違います。
※ Firefox のほうが望ましい動きをします


posted by lightbox at 2011-07-24 01:24 | CSS3 | このブログの読者になる | 更新情報をチェックする

jQuery のイベント登録。.bind() で総合的に基本路線

オブジェクトで複数のイベントを一度に登録していますが、一つづつ登録
しても同じ事です。ただ、大は小を兼ねるのでこの方法をまず最初に頭に
入れておくといいと思います。また、関数内で必ずしも jQuery のオブジ
ェクトを使う必要も無いので、this を直接使用しています


▼ このコードをソースコードから実行してみる
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<div id="jq_test_dev1" style='width:100px;height:100px;border:solid 1px #000'></div>
<script type="text/javascript">
$('#jq_test_dev1').bind( 
	{
		click: function() {
			alert("click");
		},
		mouseenter: function() {
			this.style.backgroundColor = '#555';
			this.style.cursor = 'pointer';
		},
		mouseleave: function() {
			this.style.backgroundColor = '#AAA';
			this.style.cursor = 'arrow';
		}
	}
);
</script>


posted by lightbox at 2011-07-24 00:27 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2011年07月22日


jQuery の .text('値') と .html() で HTMLエンティティに変換

jQuery の .text や .html は動作としては、.val と同じですが、.text も .html も
開始タグから終了タグまでの内容を取りだしたり設定したりします。

ただ、それぞれ用途が違うので注意が必要ですが、text('値') で、HTML 上で表示したい
 HTML のコードを設定して、.html() で取り出すと、文字列としては特殊文字として取得
する事ができます。

ですから、それを再度 .text('値') で設定すれば、HTMLエンティティを表示する事ができ
ます

※ 逆に、.html('値') で HTML のソースコードを設定して、.text() で取り出すと、HTML
※ 部分が取り除かれた文字列になります。
<script type="text/javascript">
// < > & を &lt; &gt; &amp; に変換
function action3() {

	$('#cnv').text('<b>強調</b> a <= 1 &&');
	$('#result').val( $('#cnv').html() );

// textarea は、val でも text でも良い。
//	$('#result').text( $('#cnv').html() );

}
</script>
<input type="button" value="実行" onclick='action3();' />
<br />
<div id="cnv" style='display:none'></div>
<textarea id="result" style='width:300px;height:100px;'></textarea>
<input type='button' value='BODY文字列を取得' onclick='alert($("body").text());'/>




posted by lightbox at 2011-07-22 20:06 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2011年07月20日


jQuery の easing の追加

デフォルトでは swing と linear ですが、jQuery Easing Plugin でたくさん使えるようになります。但し、swing は jswing に名前が変更されて、swing は書けるようですが、jQuery.easing.def を変更すると out of memory のエラーが
出たりするので、デフォルトである easeOutQuad は、swingと殆ど同じなのであまり気にせずに使うといいと思います。

※ しかし、どうも out of memory の挙動(IE8ですが)がたまにあるので、無理に
※ プラグインしない、という選択肢もあります。

その効果をグラフで示しておられるのが jQuery Easing - jQuery 日本語リファレンスで、その意味かよく解るようになっています。このページの jQuery は、jquery-1.3.min.js でしたが、1.6.2 でも動いています。
( そもそも、easing はプラグインなので、影響無いように作られています )
テフォルトの easing
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<input type="button" value="アニメーション" onclick='jqAction()'>
 テフォルトの easing <input id="def" type="text" />
<div style='position:relative;height:150px;'>
<img
	id="target"
	src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
	width="442"
 	height="121"
	style='
		position: absolute;
		left: 10px;
	'
/>
</div>
<script type="text/javascript">
// デフォルトは easeOutQuad
// ※ swing とほぼ同じ効果
$('#def').val(jQuery.easing.def);
function jqAction() {
	$('#target').animate(
		{
			// あるものを 0 にしたり、無いものを元に戻します
			// ( いったん見えなくなります )
			opacity: ['toggle', 'easeInCubic'],
			width: ['-=200', 'easeInElastic']
		},
		1000,
		function() {
			// 見えなくなった後、元へ戻します
			$('#target').animate(
				{
					opacity: 'show',
					width: '+=200'
				},
				1000,
				function() {
					// 一番最後に表示
					$('#def').val(jQuery.easing.def);
				}
			);
		}
	);

}
</script>




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

2011年07月18日


jQuery : onload の処理を $( function(){} ) で記述する

対象となるエレメントの定義が済んでおれば、それより以降の位置で SCRIPT 要素で処理を書く事によって「初期値設定」が可能ですが、どうしてもエレメントの定義前に初期値設定の記述をしたい場合は、onload イベントを使う事になるのですが、自分で書くと結構面倒です。

そこで、jQuery では $( 関数 ); と書けるのですが、関数を事前定義するのも面倒なので、無名関数で処理を書いてしまいます。
指定率 :
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) {
	window[window.location.hostname+'.loadjQueryUI'] = true;
	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>");
}
</script>
<script type="text/javascript">
// 初回の値
$( function() {
	$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "%" )
   }
);
</script>

<div style='margin: 0 0 5px 0;'>指定率 :
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</div>
<div style='height:50px;'>
<div id="slider-range-min" style='width:200px;'></div>
</div>
<script type="text/javascript">
$( "#slider-range-min" ).slider({
	range: "min",
	value: 60,
	min: 0,
	max: 100,
	slide: function( event, ui ) {
		$( "#amount" ).val( ui.value + "%" );
	}
});
</script>




posted by lightbox at 2011-07-18 19:42 | 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 終わり