会社のお問い合わせフォームで、入力途中の誤送信が多く、入力する人にとっても不便だなと感じていたので、未入力項目がある場合は送信できないようにjavascriptを追加しました。
プログラミングは素人なので自分用にメモです。
＊＊＊＊＊
まずフォームのhtmlをいじります。
<form method=”POST” action=”＊ここは各自＊.cgi” name=”
form1” onSubmit=”return check()”>
名前：<input type=”text” name=”handle-name” size=”40″>
メールアドレス：<input type=”text” name=”email” size=”40″>
内容：<textarea name=”description” rows=”5″ cols=”40″></textarea>
<input type=”submit” value=”送信”>
<form>タグのnameは「form1」でなくても何でもいいのですが、
javascript内の「form1」と連動するので同じにしておきます。
<form>タグ内に onSubmit=”return check() を追加し、
送信ボタンを押したときにjavascriptでチェックするようにします。
そして以下のjavascriptを、フォームを設置しているページの<head>～</head>間に入れます。
<script type=”text/javascript”>
<!– function check()
{ var flag = 0;
if(document.form1.handle-name.value == “”){ flag = 1; }
else if(document.form1.email.value == “”){ flag = 1; }
else if(document.form1.description.value == “”){ flag = 1; }
if(flag){ window.alert(‘未入力の項目があります’); return false; }
else{ return true; }}// –>
</script>
色付の箇所は変更可能です。
フォームとjavascriptは連動するので、同じ色の箇所は同じものにしておきます。
else ifの行を追加すればチェック項目を増やせます。
デジタル関連？に弱い人向けに、「お気に入りに追加」ボタンを設置したいなと思ってググりましたが、ChromeやFirefoxではうまく動かないようです。
» お気に入りに登録
IE6では動きました。
ソース：
<a href=”javascript:window.external.AddFavorite(‘http://findaway-i.jp’,'find a way!’)” target=”_blank” style=”line-height:100px; font-size:30px;”>» お気に入りに登録</a>
2010-5-31
http://filezilla-project.org/
かれこれ10年以上FFFTPを使ってきましたが、
FTPSじゃないとセキュリティ的にやばいということで、
FileZillaというのに乗り換えることにしました。
というメモです。
追記：
～だったんだけど、なぜかFileZillaだとFTPSでログインできないようになって、仕方ないのでつなぎでNextFTPというのを使っています。ローカル／サーバのディレクトリ移動が同期していて使いやすいですが、期限付き試用版なので、どうしようかな。
jqueryで簡単スライドショーを作ってしまえました。
HTMLはこれ。
<div id="slideshow">
<img src="img/img1.jpg" alt="" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
</div>
CSSはこれ。
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
で、以下をhead内に埋め込む。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
</script>
こちらが元記事。↓ サンプルスライドショーもあります。
http://jonraasch.com/blog/a-simple-jquery-slideshow
jqueryのソースはDLして自分のサイトにUpして使ったほうがいいでしょう。
http://findaway-i.jp/dl/jquery-1.2.6.min.js
本当は、写真ごとにリンク先を変えたりしたかったけど、うまくできなかったのでリンクは断念しました。
2009-7-29
IEでCSSのposition:absoluteがずれたり見えなかったりするケースでは、
そのタグの直前に
<div style=”clear:both”></div>
を入れることで解決します。
IEのバグです。
