カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

改行方法の指定【word-break】

文章の改行方法を指定したいとき、スタイルシートのword-breakプロパティを設定します。
特にURLやソースコードなど、途中で改行されずにボックスからはみ出てしまうことがあります。
※これまではIEのみの対応だったようですが、CSS3では標準採用されているようです。

div.sample
{
    word-break: break-all;
}

続きを読む…»

1,158 views

ウェブページからナビを起動

単純にナビを起動するなら、以下のようにリンクを貼るだけです。
但し、経路を表示するまでに3タッチ必要です。

※引数に与える座標は世界測地系(WGS84)です。

<a href="http://maps.google.com/maps?daddr=35.65860811863414,139.7455318066551">ナビ起動</a>
1,765 views

フォームのセレクトボックスを操作する

項目を追加する

document.form.SELECT_BOX.options[INDEX] = new Option(VALUE, TEXT);

項目を削除する

N番目の項目を削除する

SELECT_BOX.options[N] = null;

項目を全て削除する
※項目数は削除する毎に減少していくので、最後から順番に削除します。

var len;

with(document.form)
{
    len = SELECT_BOX.length;

    for(i = 0; i < len; i++)
    {
        SELECT_BOX.options[len - i] = null;
    }
}
1,012 views

指定したオブジェクトに対する処理をする [with]

with関数を使うことでスクリプトを省略することができます。

例として、以下のようなHTMLフォームがあったとします。

<form name="myForm" action="example.cgi" method="post">
	<input type="text" name="name" size="20" />
	<input type="submit" value="submit" />
</form>

フォームオブジェクトを引数として渡し、
スクリプトを省略します。

with(document.myForm)
{
	alert(name.text);
}
903 views

フォームの入力モード制御

HTML入力フォームの入力モードを制御します。(IE5以上のみ)

設定値は以下の通りです。

auto 自動
active 入力モードON
inactive 入力モードOFF
disabled 使用不可

HTMLで直接指定する場合

<input type="text" name="item" value="" style="ime-mode: auto;">

続きを読む…»

1,642 views

WORDPRESS テーマ作成

公式リファレンス、検索でヒットしたブログを参考にテーマを作成。
デザインは至ってシンプル。
ウィジェットはどうしても使いたかったので、ウィジェット領域を7箇所設けた。

続きを読む…»

1,129 views

気をつけよう 文字コード

例えば、外部JavaScriptファイルを読み込む場合

<script type="text/javascript" src="..."></script>

と読み込むが、サイト内に複数の文字コードが混在している場合は注意が必要である。
MySQL等ではEUCを使用しているが、Ajaxを使いたいので該当ページのみUTFにしているとき
柔軟なブラウザならある程度ファジーに解釈してくれるが、そうでないものもある。

そこで、厳密に文字コードを指定してあげよう。

<script charset="..." type="text/javascript" src="..."></script>

こうしてやると、問題が解決する可能性が極めて高い。

907 views

GoogleMap ルート案内

<form action="http://maps.google.co.jp/maps" method="get" target="_blank">
ここまでのルートを検索
出発地(住所・駅名):<input type="text" size="30" name="saddr" id="saddr" value="" />
交通手段:<input type="radio" name="dirflg" value="r" checked="checked" />電車
<input type="radio" name="dirflg" value="d" />車
<input type="hidden" name="daddr" value="lat,lon" />
<input type="submit" value="ルート検索" />
</form>

・アイコンクリックにイベントを追加

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml([上記HTML]);
});
1,741 views

クエリー文字列を取得

window.location.search

[http://www.test.co.jp/test.html?id=id]から取得できる値=[?id=id]

783 views

フォームの入力内容チェック

name属性でチェック

if(document.frm.id.value == "")
{
    alert("[アラートメッセージ]";
    return false;
}
return true;

フォームタグ

name="frm" onSubmit="return [関数名]();"

idを付加してチェック

if(document.getElementById("[id]").value == "")
{
    alert("[アラートメッセージ]";
    return false;
}
return true;

フォームタグ

onSubmit="return [関数名]();"

メールアドレスが正しいかチェックする場合

if(!document.frm.email.value.match(/[!#-9A-~]+@[a-z0-9-]+\.+[a-z0-9]+/i))
{
  alert("メールアドレスを正しく入力してください。");
  return false;
}
896 views