一辺が固定の四角形のサイズ変更後の高さを計算させる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を入力しなかった時の初期値があるのか、二つとおも同じ高さになって
それにあわせて動画の横幅(プレイヤーのではなく)が縮んで見えないよコレ!と。

たぶん式はこんな感じ(計算苦手なのでアバウトに)で修正してアップしたです。
[text]変更後の高さ = ( 希望の横幅 / 今の横幅 ) * 今の高さ ;[/text]

修正後の手順

html

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

javascript

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

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

修正前の手順

html

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

javascript

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

css(抜粋)

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

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

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

参考にしました

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

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

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


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.