乱雑モックアップ   らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。

一辺が固定の四角形のサイズ変更後の高さを計算させるform

[2009年11月16日 11:59修正しました]一辺が固定の四角形のサイズ変更後の高さを計算させるformその2
こんなの電卓でちょちょいと計算すればすむのに、あほなので作った。

以下、なんでそんな事しかたという説明。

このblogはgrungeというテーマを残してある為、
コンテンツ本文部分のwidhtが400pxまでしか使えない縛りがあります(simpleは1カラムでwidth100%、dying-flowerはたぶん900pxのwidth76%)。

WordPress君は賢いので、400pxより大きい画像を挿入しても、横幅が400pxになるように縦横比を揃えてheightを計算してくれます。

けどyoutubeだと、これがうまくいかない。

先日の写真で動画というエントリーの時にyoutube貼ったけど
[埋め込み]のurlを[カスタマイズ]できるんだけど、widthとheightは決めうちの中から選ぶ事になってるようで横幅400pxは無いんですよね、
なので自分でheightを計算しなくちゃいけなくて面倒くさいなぁと思ったわけです。

面倒だからwidthだけ400pxに変更すれば大丈夫でしょうとして公開したら
縦横比が変わるというか、Firefoxにswfのheightを入力しなかった時の初期値があるのか、二つとおも同じ高さになって
それにあわせて動画の横幅(プレイヤーのではなく)が縮んで見えないよコレ！と。

たぶん式はこんな感じ(計算苦手なのでアバウトに)で修正してアップしたです。

変更後の高さ = ( 希望の横幅 / 今の横幅 ) * 今の高さ ;

修正後の手順

html

<form id="result">
	<dl>
		<dt><label for="nowwidth">元のwidth：</label></dt>
		<dd><input name="nowwidth" id="nowwidth" type="text" /></dd>
		<dt><label for="nowheight">元のheight：</label></dt>
		<dd><input name="nowheight" id="nowheight" type="text" /></dd>
		<dt><label for="targetwidth">目標のwidth：</label></dt>
		<dd><input name="targetwidth" id="targetwidth" type="text" />px</dd>
	</dl>

	<p><input type="button" title="check" id="check" value="check" /></p>

	<dl>
		<dt>結果：</dt>
		<dd><input type="text" name="resultheight" id="resultheight" value="結果" /></dd>
	</dl>
</form>

jsのイベント削除した。
formの中のソースが綺麗になった(cssもjsも外部化してないけど)。

javascript

<script type="text/javascript">
	window.onload=function(){
	document.getElementById("nowwidth").focus(); //ウィンドウを開いたら最初のinputをfocusさせておく
	document.getElementById("check").onfocus=checkheight; //checkボタン押したら計算開始
	document.getElementById("resultheight").onfocus=this.select; //結果のinputにfocusしたらテキストを選択
}

function checkheight(){
	res=document.getElementById("result"); //入力の手間を省く
	nw=res.nowwidth;
	nh=res.nowheight;
	tw=res.targetwidth
	rh=res.resultheight;

	var nextheight=Math.floor((tw.value/nw.value)*nh.value); //小数点が返る事もあるのでMath.floorで切り捨てる
	rh.value='width=\"'+tw.value+'\" height=\"'+nextheight+'\"';
}
</script>

focus();とonfocusの違いがよく判ってないです。
bodyのonloadをwindow.onloadに変更するのと一緒みたいな感じにした。

css(抜粋)これは前と一緒。

input[type="text"] {
	font-size:110%;
	padding:0.1em 0.2em;
	border:1px solid #999;
}
input[type="text"]:focus {
	border:1px solid #6CC;
	background:#F7FDFF;
}

form dl{
	padding:1em;
	border:5px solid #999;
	border-radius:3px;
	-moz-border-radius: 3px;
}
form dt{
	padding:0.4em 0.5em;
	display:inline;/*最初のうち上のpaddingをmarginで指定して背景色を表示させてた名残、今は必要ない指定。*/
	width:7.5em;
	font-weight:bold;
	float:left;/*続くddを横に置く、floatを使わないければmargin-topにネガティブマージンを指定でもok？*/
}
form dd{
	padding:0.4em 0.5em;
	margin:0 0 0 7.5em;
}

修正前の手順

html

<form id="result">
	<dl>
		<dt>
			<label for="nowwidth">元のwidth：</label>
		</dt>
		<dd>
			<input name="nowwidth" id="nowwidth" type="text" />
		</dd>
		<dt>
			<label for="nowheight">元のheight：</label>
		</dt>
		<dd>
			<input name="nowheight" id="nowheight" type="text" />
		</dd>
		<dt>
			<label for="targetwidth">目標のwidth：</label>
		</dt>
		<dd>
			<input name="targetwidth" id="targetwidth" type="text" />
			px</dd>
	</dl>
	<p>
		<input type="button" title="check" id="check" value="check" onclick="checkheight()" onfocus="checkheight()" />
	</p>
	<dl>
		<dt>結果：</dt>
		<dd>
			<input type="text" name="resultheight" id="resultheight" value="結果" onfocus="this.select()" />
		</dd>
	</dl>
</form>

28行目：onfocus=”this.select()でフォーカスした時に勝手にテキストを選択するように。

javascript

<script type="text/javascript">
	window.onload=function(){
	document.getElementById('nowwidth').focus(); //ウィンドウを開いたら最初のinputをfocusさせておく
}
function checkheight(){
	res=document.getElementById("result");//入力の手間を省く
	nw=res.nowwidth;
	nh=res.nowheight;
	tw=res.targetwidth
	rh=res.resultheight;

	var nextheight=Math.floor((tw.value/nw.value)*nh.value);//小数点が返る事もあるのでMath.floorで切り捨てる
	rh.value='width=\"'+tw.value+'\" height=\"'+nextheight+'\"';
}
</script>

13行目：簡単にコピペできた方が楽なので、[width="xxx" height="yyy"]で吐き出すようにしておく。
ダブルクォーテーションを表示させる方法がわからず検索したら\”ではなく"を使うと書いてあったんだけど、そうすると変数が展開されなかったのでごにょごにょしてたら結局\”でokだった。

css(抜粋)

input[type="text"] {
	font-size:110%;
	padding:0.1em 0.2em;
	border:1px solid #999;
}
input[type="text"]:focus {
	border:1px solid #6CC;
	background:#F7FDFF;
}

form dl{
	padding:1em;
	border:5px solid #999;
	border-radius:3px;
	-moz-border-radius: 3px;
}
form dt{
	padding:0.4em 0.5em;
	display:inline;/*最初のうち上のpaddingをmarginで指定して背景色を表示させてた名残、今は必要ない指定。*/
	width:7.5em;
	font-weight:bold;
	float:left;/*続くddを横に置く、floatを使わないければmargin-topにネガティブマージンを指定でもok？*/
}
form dd{
	padding:0.4em 0.5em;
	margin:0 0 0 7.5em;
}

1～9行目：type属性がtextのinputに、今ここがフォーカスしてますよって印をつける。

11～27行目：form dl-ddまで
昔流行ったdtとddを横並びにする指定。

widthとheightを続けて何回も書くとたまにwidhtになってしまよね。

参考にしました

[JS]ページが開いたら自動でフォーカスを合わせる

element.select – input部品を選択状態にする

HTMLタグ内でのJavaScriptのダブルクォーテーション