月別アーカイブ: 2013年8月

入力用のウォーターマーク

今回は入力用ウォーターマークの設定です。
入力例を表示するのに非常にいいですね。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {


                // input area default
                var example = 'Please input here.';
                $('#inputText').val(example);

                // input area focus
                $('#inputText').focus(function(){
                    if(this.value == example){
                        $(this).val("").css("color","#000000");
                    }
                });

                // input area blur
                $('#inputText').blur(function(){
                     if(this.value == ""){
                          $(this).val(example).css("color","#999999");
                     }
                });


            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #inputText {
                color: #999999;
            }

        --></style>
        
    </head>
    <body>

        <div id="inputArea">

            Text : <input type="text" id="inputText" value="" />

        </div>

    </body>
</html>

sample

これで入力欄にウォーターマークが表示されます。

例文が必要な記入欄は色々とあります。
例文はウォーターマークで表示するとユーザーにも優しいですね。

ただ、HTML5 に対応しているブラウザの場合、placeholder 属性をでウォーターマークが表示できます。
HTML5 対応のブラウザが普及するまでの短い期間限定のJabascriptですね・・・

ブラウザで色々出来るようになるのは非常にうれしいですね。
ただ、作り手からするとちょっとさみしいところもあります。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

テキストのサイズ/カラーの変更

今回はセレクトボックスの値を取得します。
取得した値を利用して文字のStyleを変更してみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var fontSize;
                $('#styleFontSize').change(function(){
                    fontSize = $('#styleFontSize option:selected').val();
                    $('#textArea').css('font-size', fontSize + 'px')
                });

                var textColor;
                $('#styleTextColor').change(function(){
                    textColor = $('#styleTextColor option:selected').val();
                    $('#textArea').css('color', textColor)
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>
        
    </head>
    <body>

        <div id="selectArea">

            <span>Font Size : </span>
            <select id="styleFontSize">
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16" selected>16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="24">24</option>
                <option value="28">28</option>
                <option value="32">32</option>
                <option value="36">36</option>
                <option value="64">64</option>
            </select> px

            <br>

            <span>Text Color : </span>
            <select id="styleTextColor">
                <option value="#000000" selected>#000000</option>
                <option value="#ff0000">#ff0000</option>
                <option value="#00ff00">#00ff00</option>
                <option value="#0000ff">#0000ff</option>
                <option value="#ff00ff">#ff00ff</option>
                <option value="#ffff00">#ffff00</option>
                <option value="#ff0000">#ff0000</option>
            </select>

        </div>

        <div id="dispArea">
            <p id="textArea">Text Data Display<br>Style Change Area</p>
        </div>

    </body>
</html>

sample

これで文字の Style が変わるかと思います。

SELECT BOX の内容が変更された時点で値を取得して、CSSの値を変更しています。
テキストの変更などを合わせることで、色々と使えるんではないでしょうか。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

画像のリンク切れ表示

今回は 画像のリンク切れ対策です。
img タグで画像を指定しているのに、画像ファイルが存在しない場合はリンク切れのマークが表示されます。
但し、リンク切れの表示はブラウザによって異なりますし、少し不格好な気がします。
そのため、リンク切れの場合には、リンク切れ用の画像を表示するようにしてみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('img').error(function(){
                    $(this).attr('src', './icon_jpeg13.jpg');
                });
               
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            p {
                margin-top : 30px;
            }

        --></style>
        
    </head>
    <body>

        <div id="image_area">

            <p>Image Normal</p>
            <img src="./icon_jpeg05.jpg">

            <p>Image Error</p>
            <img src="./icon_jpeg???">

            <p>Image None Src Image</p>
            <img src="">

            <p>Image None Src</p>
            <img>

        </div>

    </body>
</html>

sample

これで img タグの src を指定した状態で、指定ファイルが見つからない場合には、
本来の画像ではなく、リンク切れ用の画像が表示させることができました。
但し、img タグに src 自体が存在していない場合、エラーという判定がされないため
リンク切れ画像は表示されませんでした。

また、今回は行っていませんが、「読み込み先が存在しない」というエラー情報を取得する方法で、
リンク切れ画像を表示するのではなく、Divごと非表示にすることなども可能です。

p.s.
CSS でリンク切れマークの表示/非表示が設定できるようにならないですかね・・・
そうなれば、img タグ に background-image を設定するだけで済むから一番手軽なのになぁ。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

div全体をクリック対象に変更する

今回は div タグにリンク(a タグ)があった場合に、div タグ全体をリンク対象にしてみます。
まぁ、有名な定番プラグインもあるんですが、オブジェクト内の別オブジェクトを選択する調査でもあります。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

               $('#linkBox1').click(function(){
                   window.location=$(this).children('p').children('a').attr('href');
                   return false;
               });

               $('#linkBox2').click(function(){
                   window.location=$(this).find('a').attr('href');
                   return false;
               });

               $('#linkBox3').click(function(){
                   window.location=$('a', $(this)).attr('href');
                   return false;
               });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            .linkBox {
                margin-bottom    : 300px;
                width            : 300px;
                height           : 200px;
                background-color : #ffff00;
            }

            .linkBox:hover {
                cursor           : pointer;
            }

        --></style>
        
    </head>
    <body>

        <div id="linkBox1" class="linkBox">
            <p>
                Linx Box 1<br />
                <a href="#linkBox2">Move Linx Box 2</a>
            </p>
        </div>

        <div id="linkBox2" class="linkBox">
            <p>
                Linx Box 2<br />
                <a href="#linkBox3">Move Linx Box 3</a>
            </p>
        </div>

        <div id="linkBox3" class="linkBox">
            <p>
                Linx Box 3<br />
                <a href="#linkBox1">Move Linx Box 1</a>
            </p>
        </div>

    </body>
</html>

sample

これで div タグ全体がリンク対象になったかと思います。

さて今回の調査結果ですが、いくつかあるんですね。
 $(this).children(‘a’)
 $(this).find(‘a’)
 $(‘a’, $(this))

「$(this).children」に関しては、$(this) 直下のオブジェクトしか選択できないようです。
複数階層ある場合に、直下のオブジェクトのみ対象とするにはこの方法かと思います。

「$(this).find(‘a’)」と「$(‘a’, $(this))」の違いはよくわかりませんでした。
どちらの書き方でも $(this)の配下にある全ての a タグを対象にすることが可能でした。
書き型的には「$(this).find(‘a’)」が正しいのかなとも思いますが・・・

なぜ、同じような意味の書き方が複数存在するのかまでは調査していません。
誰か知っている人がいたら教えてください。

ちなみに、「$(this).find(‘p:last>a’)」などで最後の p タグの リンク といった選択もできるみたいです。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

入力文字数カウント

今回は入力文字数のカウントをやってみます。
テキストボックスの入力カウントです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

               var maxCnt  = 5;
               var textCnt = 0;
               
               $('#maxCnt').html(maxCnt);
               $('#countDown').html(maxCnt);

               $('input[type=text]').bind('keydown keyup keypress change',function(){

                   // Get Text Count
                   textCnt = $(this).val().length;

                   // Disply Input Count
                   $('#textCnt').html(textCnt);
                   $('#countDown').html(maxCnt - textCnt);

                   // Text Length Over
                   if (maxCnt < textCnt) {
                       fontColor = "#ff0000";
                   } else {
                       fontColor = "#000000";
                   }
                   $('#textCnt').css('color', fontColor);
                   $('#countDown').css('color', fontColor);

               });
               

               $('input[type=button]').click( function(){
                   if (textCnt > maxCnt) {
                       alert('NG : Text Length Orver');
                       return false;
                   } else if (textCnt == 0) {
                       alert('NG : Not Text Input');
                       return false;
                   } else {
                       alert('OK : Move Page');
                       window.location = './sample_263.html';
                   }
               });
               
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            .countArea {
                font-weight : bold;
            }

        --></style>
        
    </head>
    <body>

        <div id="input_area">
            <p>
                Max Text Count  : <span class="countArea" id="maxCnt">0</span><br />
                Now Text Count  : <span class="countArea" id="textCnt">0</span><br />
                Text Count Down : <span class="countArea" id="countDown">0</span><br />
            </p>
            <input type="text" />
            <input type="button" value="check" />
        </div>

    </body>
</html>

sample

入力文字数がオーバーすると、入力できなくすることも出来ますが、
今回は入力文字数のチェックのみを行っています。

他の所からコピペする場合には、この方が便利ですね。
チェックボタンを押すと、入力文字数を確認して入力文字数の正誤も判定できます。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。