日記(gentoo,php): 10月 2011

2011-10-30

2011-10-28

DOMノードでテキストを操作するサンプル

DOMノードでテキストを操作するサンプルです。
クリックイベントを設定するのにjqueryを使っています。

タグの中のテキストも操作します。

こちらはタグを追加しています。
DOMノードでテキストを操作するサンプルです。
クリックイベントを設定するのにjqueryを使っています。

タグの中のテキストも操作します。

こちらはjqueryのみです。

変更対象の文字はタグで包まれている場合が多いです。

DOMノードでテキストを操作するサンプルです。
クリックイベントを設定するのにjqueryを使っています。

タグの中のテキストも操作します。

ソース。

<div id="domTest-display">
 DOMノードでテキストを操作するサンプルです。<br/>
 クリックイベントを設定するのにjqueryを使っています。<br/>
 <table>
  <tr><td>タグの中のテキストも操作します。</td></tr>
 </table>
</div>
<button id="domTest-start">スタート</button>
<script>
//<![CDATA[<!--
$("#domTest-start").click(function(){(function(currentElem){
    var textSearch = function(currentElem){
        var i;
        for (i = 0; i < currentElem.childNodes.length; i++)
        {
            if (currentElem.childNodes[i].nodeName == "#text" &&
                typeof currentElem.childNodes[i].nodeValue == "string")
            {
                currentElem.childNodes[i].nodeValue = currentElem.childNodes[i].nodeValue
                    .replace(/([^\x00-\x20\u3000-\u30FF]{1,99})/g, function(){
                        return "「" + arguments[1] + "」";
                    });
            }
            else
            {
                textSearch(currentElem.childNodes[i]);
            }
        }
    };
    textSearch(currentElem);
    $("#domTest-start").unbind("click").text("終了").css("cursor","default");
})(document.getElementById("domTest-display"));});
//-->]]>
</script>

<div id="domTest2-display">
 こちらはタグを追加しています。<br/>
 DOMノードでテキストを操作するサンプルです。<br/>
 クリックイベントを設定するのにjqueryを使っています。<br/>
 <table>
  <tr><td>タグの中のテキストも操作します。</td></tr>
 </table>
</div>
<button id="domTest2-start">スタート</button>
<script>
//<![CDATA[<!--
$("#domTest2-start").click(function(){(function(currentElem){
    var textSearch = function(currentElem){
        var i, x, elem;
        for (i = 0; i < currentElem.childNodes.length; i++)
        {
            if (currentElem.childNodes[i].nodeName == "#text" &&
                typeof currentElem.childNodes[i].nodeValue == "string")
            {
                x = i;
                elem = currentElem.childNodes[i];
                currentElem.childNodes[i].nodeValue
                    .replace(/([\x00-\x20\u3000-\u30FF]{0,99})([^\x00-\x20\u3000-\u30FF]{0,99})/g, function(){
                        if (typeof arguments[1] == "string" && arguments[1] != "")
                        {
                            $(elem).after(elem = document.createTextNode(arguments[1]));
                            i++;
                        }
                        if (typeof arguments[2] == "string" && arguments[2] != "")
                        {
                            $(elem).after($(elem = document.createElement("span"))
                                          .text("「" + arguments[2] + "」").css("background-color", "#ccf"));
                            i++;
                        }
                    });
                currentElem.removeChild(currentElem.childNodes[x]);
                i--;
            }
            else
            {
                textSearch(currentElem.childNodes[i]);
            }
        }
    };
    textSearch(currentElem);
    $("#domTest2-start").unbind("click").text("終了").css("cursor","default");
})(document.getElementById("domTest2-display"));});
//-->]]>
</script>

<div id="domTest3-display">
 <p>こちらはjqueryのみです。</p>
 <p>変更対象の文字はタグで包まれている場合が多いです。</p>
 DOMノードでテキストを操作するサンプルです。<br/>
 クリックイベントを設定するのにjqueryを使っています。<br/>
 <table>
  <tr><td>タグの中のテキストも操作します。</td></tr>
 </table>
</div>
<button id="domTest3-start">スタート</button>
<script>
//<![CDATA[<!--
$("#domTest3-start").click(function(){
    $("#domTest3-display").css("color", "#a33");
    $("#domTest3-display > p:nth-child(1)").css("color", "#3a3").prepend("「").append("」");
    $("#domTest3-display > p:nth-child(2)").css("color", "#33a").prepend("「").append("」");
    $("#domTest3-display > table > tbody > tr:nth-child(1) > td").css("color", "#33a").prepend("「").append("」");
    $("#domTest3-start").unbind("click").text("終了").css("cursor","default");
});
//-->]]>
</script>

2011-10-25

jqueryのheight関連に関する説明

jqueryのheight関連に関する説明です。
まずこのページの下(↓)と右(→)にあるサンプルを見てください。
この例は、

padding-left,padding-right,border-left,border-right,margin-left,margin-right

が無いdivタグの説明をしています。
divタグの高さや、それぞれの幅を50pxにしています。
仮にid="contents"の場合に、下記のような値になります。

$("#contents").height()          => 50px
$("#contents").innerHeight()     => 150px
$("#contents").outerHeight()     => 250px
$("#contents").outerHeight(true) => 350px

上から順に高さのみ、padding2つ分、border2つ分、margin2つ分、と増えています。
それぞれの幅の説明です。

padding => コンテンツの一部です。
           背景色も反映されます。
border  => コンテンツの枠線です。
           ここもコンテンツの一部です。
           一般的に幅は1pxなどの細い線です。
margin  => 他のコンテンツとの間を空ける間隔です。
           他の間隔と被った場合に長い方のみ有効になる場合があります。
           float,positionなどと組み合わせて使うとブラウザ共通、ブラウザ個別(主にIE)、
           の両方のパターンで消えたりしますので注意が必要です。
           なので背景色と枠線がなければpaddingにする、
           もしくは、さらにdivタグで囲んで、そこでpaddingで指定する、
           などの場当たり的な対応が必要な場合があります。

次にoffset,positionの違いです。
$(outer)の部分はpadding,border,marginを含まない$(contents)を囲むタグです。
position()はmarginを含み、offset()は含みません。
cssのposition(≠jqueryのposition())を指定したタグで囲めば明らかに違うので両方の値を使い分けたほうが良いです。
offset()がページ全体の左上の座標(0,0)からの位置で、position()は上位のタグでcssのpositionを指定しているタグの左上を座標(0,0)とした場合の位置です。
右が下記のようになっているはずですが、

G =   0; // $(contents).position().top

これは表示の互換性のため位置を測っているタグの外側のタグにposition:relative;を指定しているためです。
position()がmarginを含まない場合50になるはずですが0なのでposition()がmarginを含んでいることが確認できます。
別の例として下記の場合、

<body style="margin: 0; padding: 10px;">
<div style="margin: 0; padding: 10px; height: 100px;">...</div>
<div style="margin: 0; padding: 10px; position:relative;">
<div style="margin: 0; padding: 10px; height: 1000px;"></div>
ここにコンテンツ・・・

このようになります。

E = 1211; // $(contents).offset().top   => (10) + (10 + 100 + 10) + (10) + (10 + 1000 + 10) + 1 + 50
F = 1161; // $(outer).offset().top      => (10) + (10 + 100 + 10) + (10) + (10 + 1000 + 10) + 1
G = 1031; // $(contents).position().top => (10) + (10 + 1000 + 10) + 1
H = 1031; // $(outer).position().top    => (10) + (10 + 1000 + 10) + 1

position()は3行目のdivタグ(...position:relative;...の行)のpaddingから測っています。
cssのposition:absoluteで指定するような位置を取りたい場合はoffset()を利用するのがお勧めです。
つまりcssの担当とjavascriptの担当が別人の場合jqueryのposition()は使わないのが良いです。
(例えば表示の構成とまったく関係ないブラウザ毎のバッドノウハウでcssのposition指定が入ることがあるためです)

次にスクロール位置の判定の例です。
marginをコンテンツの外であるとして判定しています。
(見やすさのためにタグで囲んで文字と背景色を別のタグで出しています)
borderを含んで全部見えるかどうか？と、borderが1pxでも見えるかどうか？の2種類です。
$("html").scrollTop()、$("body").scrollTop()、の部分は、ブラウザの種類やバージョンかhtmlやcssの構成などで内容が違うためです。
問題ない場合$("html").scrollTop()だけで取れるはずです。
例えばhtml,bodyのoverflowをhiddenでbody直下のdivタグでスクロールする場合などは違います。

contents

margin-top

border-top

padding-top

padding-bottom

border-bottom

margin-bottom

2011-10-22

jquery UIのanimateのサンプル

参考URL。
http://jqueryui.com/demos/animate/
http://allabout.co.jp/gm/gc/24066/
http://www.tohoho-web.com/html/index.htm
http://openlab.ring.gr.jp/k16/htmllint/index.html
http://oshiete.goo.ne.jp/qa/4147301.html

カラーを変更するサンプルです。
jquery UIを使用しています。
スタートボタンをクリックすると開始します。

ソース。

<button id="colorTest001" style='background-color:buttonface;border:1px solid #676767;color:#181818;cursor:wait;display:block;font-family:"ＭＳ ゴシック","Osaka-mono",monospace;font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;height:50px;letter-spacing:1px;line-height:48px;margin:8px auto;padding:0;text-align:center;text-decoration:none;text-indent:0;text-transform:none;vertical-align:baseline;white-space:nowrap;width:101px;word-spacing:0;word-wrap:normal;'>スタート</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
//<![CDATA[<!--
$(document).ready(function(){try{(function(){
    var
    maxEventCount = 50,
    buttonElem = document.getElementById("colorTest001"),
    parentElem = $(buttonElem).parent().get(0),
    prepareFlag = true,
    eventCount = 0,
    getRandTime = function(msec){
        return Math.round(Math.random() * msec) + 800;
    },
    addClickEvent = function(elem){
        var backgroundColorTmp = $(elem).parent().css("background-color"),
        colorTmp = $(elem).parent().css("color"),
        red = Math.floor(Math.random() * 256),
        green = Math.floor(Math.random() * 256),
        blue = Math.floor(Math.random() * 256),
        colorRed = 0, colorGreen = 0, colorBlue = 0,
        runtimeFlag = false;
        if (typeof backgroundColorTmp === "undefined" || backgroundColorTmp == "")
        {
            backgroundColorTmp = "transparent";
        }
        if (typeof colorTmp === "undefined" || colorTmp == "")
        {
            colorTmp = "#000000";
        }
        if ((red + green + blue) < 382.5)
        {
            colorRed = colorGreen = colorBlue = 255;
        }
        $(buttonElem).click(function(){
            if (prepareFlag || runtimeFlag === true)
            {
                return;
            }
            runtimeFlag = true;
            setTimeout(function(){
                $(elem).animate(
                    {"background-color": "rgb(" + red + "," + green + "," + blue + ")",
                     "color": "rgb(" + colorRed + "," + colorGreen + "," + colorBlue + ")"},
                    {"duration": getRandTime(8000),
                     "complete": function(){
                         setTimeout(function(){
                             $(elem).animate({"background-color": backgroundColorTmp,
                                              "color": colorTmp},
                                             {"duration": getRandTime(8000),
                                              "complete": function(){
                                                  runtimeFlag = false;
                                              }});
                         }, getRandTime(8000));
                     }});
            }, getRandTime(3800));
        });
    },
    noReplaceNodeNameList = [
        "#cdata-section",
        "#comment",
        "#document",
        "#document-fragment",
        "applet", "audio",
        "button",
        "canvas", "command",
        "details",
        "fieldset", "figcaption", "figure", "form",
        "iframe", "ilayer",
        "layer", "legend",
        "map",
        "noembed", "noframes", "nolayer", "noscript",
        "object", "output",
        "progress",
        "rb", "rp", "rt", "ruby",
        "source", "summary",
        "var", "video",
        "area",
        "base", "basefont", "bgsound", "br",
        "col", "colgroup", "comment",
        "datalist",
        "embed",
        "frame", "frameset",
        "head", "hr",
        "img", "input", "isindex",
        "keygen",
        "link", "listing",
        "meta",
        "nextid",
        "optgroup", "option",
        "param", "plaintext",
        "script", "select", "server", "spacer", "style",
        "textarea", "title", "track",
        "wbr",
        "xmp"
    ],
    checkIgnoreNode = function(name){
        var ret = false, tag;
        if (typeof name === "string")
        {
            tag = name.toLowerCase();
            if ($.inArray(tag, noReplaceNodeNameList) < 0)
            {
                ret = true;
            }
        }
        return ret;
    },
    setInheritCss = function(elem){
        $(elem)
            .css("background-color", $(elem).parent().css("background-color"))
            .css("color", $(elem).parent().css("color"))
            .css("cursor", $(elem).parent().css("cursor"))
            .css("font-family", $(elem).parent().css("font-family"))
            .css("font-size", $(elem).parent().css("font-size"))
            .css("font-style", $(elem).parent().css("font-style"))
            .css("font-variant", $(elem).parent().css("font-variant"))
            .css("font-weight", $(elem).parent().css("font-weight"))
            .css("letter-spacing", $(elem).parent().css("letter-spacing"))
            .css("line-height", $(elem).parent().css("line-height"))
            .css("margin", "0")
            .css("padding", "0")
            .css("text-decoration", $(elem).parent().css("text-decoration"))
            .css("text-indent", $(elem).parent().css("text-indent"))
            .css("text-transform", $(elem).parent().css("text-transform"))
            .css("white-space", $(elem).parent().css("white-space"))
            .css("word-spacing", $(elem).parent().css("word-spacing"))
            .css("word-wrap", $(elem).parent().css("word-wrap"))
        ;
    },
    textSearch = function(currentNode){
        var i, x, childNode, wordList, newNode, beforeNode;
        for (i = 0; i < currentNode.childNodes.length; i++)
        {
            if (eventCount >= maxEventCount)
            {
                return;
            }
            childNode = currentNode.childNodes[i];
            if (childNode.nodeName == "#text" && typeof childNode.nodeValue == "string")
            {
                wordList = [];
                childNode.nodeValue.replace(/([\x00-\x20\u3000]*)([^\x00-\x20\u3000]+)([\x00-\x20\u3000]*)/g, function(){
                    var data, x;
                    for (x = 1; x <= 3; x++)
                    {
                        data = null;
                        if (x == 1 || x == 3)
                        {
                            if (typeof arguments[x] == "string" && arguments[x].length > 0)
                            {
                                data = {"type": "space", "value": arguments[x]};
                            }
                        }
                        else
                        {
                            data = {"type": "word", "value": arguments[x]};
                        }
                        if (data !== null)
                        {
                            wordList.push(data);
                        }
                    }
                });
                beforeNode = childNode;
                for (x = 0; x < wordList.length; x++)
                {
                    if (wordList[x].type == "space" || eventCount >= maxEventCount)
                    {
                        newNode = document.createTextNode(wordList[x].value);
                        $(beforeNode).after(newNode);
                    }
                    else
                    {
                        newNode = document.createElement("span");
                        $(beforeNode).after(newNode);
                        $(newNode).text(wordList[x].value);
                        setInheritCss(newNode);
                        addClickEvent(newNode);
                        eventCount++;
                    }
                    beforeNode = newNode;
                    i++;
                }
                currentNode.removeChild(childNode);
                i--;
            }
            else
            {
                if (checkIgnoreNode(childNode.nodeName))
                {
                    textSearch(currentNode.childNodes[i]);
                }
            }
        }
    };
    textSearch(parentElem);
    prepareFlag = false;
    $(buttonElem).css("cursor", "pointer");
})();}catch(e){}});
//-->]]>
</script>

perlのコマンドでhtmllintの設定ファイルを読んで文字列を取り出す

メモ: perlのコマンドでhtmllintの設定ファイルを読んで文字列を取り出す。

$ perl -e '$res="";opendir(DIR,".")or die("can not open DIR");@file=sort{$b cmp $a}readdir(DIR);closedir(DIR);foreach$key(@file){if($key=~m/(html40|xhtml).*\.rul$/){require $key;$res.="|".$emptyTags;}}$res=~s/\|/\n/g;print $res;' | sort | uniq

2011-10-21

javascriptのanimate

参考URL。
http://jquery.com/
http://plugins.jquery.com/project/color
http://semooh.jp/jquery/api/effects/animate/params,+%5Bduration%5D,+%5Beasing%5D,+%5Bcallback%5D/

アニメーションのサンプルです。
クリックするとスタートします。
もう一度クリックするとストップします。
色を変化させるには追加のプラグインが必要です。もしくは手動です。
たまにブラウザ(firefox7で確認)によっては落ちます。ご注意下さい。

ⅠⅡⅢⅣⅤ
ⅥⅦⅧⅨⅩ
①②③④⑤
⑥⑦⑧⑨⑩
⑪⑫⑬⑭⑮
⑯⑰⑱⑲⑳
０１２３４
５６７８９

ソース。

<style type="text/css">
<!--
#wordTestTwitch002, #wordTestTwitch002 *, #wordTestTwitch002Result {
  border: 0px solid #676767;
  border-width: 0px;
  color: #181818;
  font-family: "ＭＳ ゴシック","Osaka-mono",monospace;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 0px;
  line-height: 17px;
  margin: 0px;
  padding: 0px;
  text-align: left;
  text-decoration: none;
  text-indent: 0px;
  text-transform: none;
  vertical-align: baseline;
  white-space: normal;
  word-spacing: 0px;
  word-wrap: normal;
}
#wordTestTwitch002, #wordTestTwitch002 * {
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
#wordTestTwitch002 {
  background-color: #FFFFFF;
  border-width: 1px;
  cursor: pointer;
  height: 136px;
  overflow: hidden;
  padding: 100px 150px;
  position: absolute;
  vertical-align: middle;
  white-space: nowrap;
  width: 80px;
  z-index: 2;
}
#wordTestTwitch002Result {
  background-color: #FFFFFF;
  border-width: 1px;
  height: 8em;
  margin: 352px 0 0 0;
  overflow: auto;
  padding: 8px 0 8px 8px;
  width: auto;
}
-->
</style>
<div id="wordTestTwitch002">
ⅠⅡⅢⅣⅤ<br/>
ⅥⅦⅧⅨⅩ<br/>
①②③④⑤<br/>
⑥⑦⑧⑨⑩<br/>
⑪⑫⑬⑭⑮<br/>
⑯⑰⑱⑲⑳<br/>
０１２３４<br/>
５６７８９<br/>
</div>
<div style="clear:both; display:block; font-size: 1px; height: 1px; line-height: 1px;"></div>
<div id="wordTestTwitch002Result"></div>
<script type="text/javascript">
//<![CDATA[<!--
try{(function(){
    var divElem = document.getElementById("wordTestTwitch002"),
    resultElem = document.getElementById("wordTestTwitch002Result"),
    divElemOuterWidth = $(divElem).outerWidth(),
    divElemOuterHeight = $(divElem).outerHeight(),
    orderCount = 0,
    processCount = 0,
    loopCount = 8,
    maxFontSize = Math.min($(divElem).width(), $(divElem).height()) / 2,
    accelDiameter = 50,
    animateDuration = 500,
    loopSleep = 1000,
    animateWait = 50,
    startTime = null,
    checkStop = function(){
        processCount--;
        if (processCount <= 0)
        {
            $(divElem).unbind("click").css("cursor", "default");
        }
    },
    wordTestTwitch002FuncTimeOverList = [],
    resultElemScrollCount = 0,
    resultElemScroll = function(){
        resultElemScrollCount++;
    },
    resultElemScrollProcess = function(){
        var i;
        if (resultElemScrollCount == -100)
        {
            $(resultElem).animate(
                {scrollTop:0},
                {"duration": 8000,
                 "complete": function(){$(resultElem).css("background-color", "#BCDEFF");
                                        $(divElem).css("background-color", "#BCDEFF");}});
        }
        else if (resultElemScrollCount <= 0)
        {
            if (processCount <= 0)
            {
                for (i = 0; i < wordTestTwitch002FuncTimeOverList.length; i++)
                {
                    $(resultElem).append("移動回数オーバー: " + wordTestTwitch002FuncTimeOverList[i] + "<" + "br/>");
                }
                $(resultElem).animate({scrollTop:65535},"fast");
                resultElemScrollCount = -100;
                setTimeout(resultElemScrollProcess, 2000);
            }
            else
            {
                setTimeout(resultElemScrollProcess, 2000);
            }
        }
        else
        {
            resultElemScrollCount--;
            $(resultElem).animate({scrollTop:65535},"fast");
            setTimeout(resultElemScrollProcess, 500);
        }
    },
    resultElemScrollProcessStart = function(){
        $(divElem).unbind("click", resultElemScrollProcessStart);
        resultElemScrollProcess();
    },
    randFunc = function(division){
        return ((Math.random() * 2) - 1) * division;
    };
    $(divElem).each(function(){
        $(this).html($(this).html().replace(/((?:<[^<>]+>)*)([^<])((?:<[^<>]+>)*)/g, function(){
            if (arguments[2].match(/^[\x00-\x20]$/))
            {
                return arguments[1] + arguments[2] + arguments[3];
            }
            return arguments[1]
                + "<" + "span class='wordTestTwitch002Class'>" + arguments[2] + "<" + "/span>"
                + arguments[3];
        }));
    }).find(".wordTestTwitch002Class").each(function(){
        $(this)
            .css("position", "relative")
            .css("z-index", "1")
            .bind("selectstart",function(){
                return false;
            }).mousedown(function(){
                return false;
            });
        var cnt = 0,
        elem = $(this),
        top = 0,
        left = 0,
        fontSize = parseFloat(elem.css("font-size")),
        stopFlag = false,
        animateFlag = false,
        setTransparent = function(){
            elem
                .css("color", "#FFFFFF").css("z-index", "0")
                .css("filter", "alpha(opacity=0)")
                .css("-ms-filter", "alpha(opacity=0)")
                .css("opacity", "0")
            ;
        },
        elemRemove = function(){
            if (processCount <= 0)
            {
                elem.remove();
            }
            else
            {
                setTimeout(elemRemove, 8000);
            }
        },
        wordTestTwitch002FuncStop = function(){
            setTransparent();
            checkStop();
            if (processCount <= 0)
            {
                $(resultElem).append("ストップ<" + "br/>").css("background-color", "#FFEDCB");
            }
            elemRemove();
        },
        wordTestTwitch002FuncTimeOver = function(){
            setTransparent();
            wordTestTwitch002FuncTimeOverList.push(elem.text());
            checkStop();
            resultElemScroll();
            elemRemove();
        },
        wordTestTwitch002FuncArrival = function(){
            setTransparent();
            orderCount++;
            $(resultElem).append(
                (" " + orderCount).slice(-2).replace(" ", "&nbsp;") + "位: " + elem.text()
                    + " (font-size:"
                    + ("  " + Math.round(fontSize)).slice(-3).replace(" ", "&nbsp;") + "px"
                    + " time:"
                    + String(((new Date().getTime()) - startTime) / 1000).replace(/^([0-9]+)(?:\.([0-9]+))?$/,function(){
                        var ret = "", decimal = arguments[2];
                        if (parseInt(arguments[1], 10) >= 1000)
                        {
                            ret += arguments[1];
                        }
                        else
                        {
                            ret += ("  " + arguments[1]).slice(-3).replace(" ", "&nbsp;");
                        }
                        if (typeof decimal !== "string")
                        {
                            decimal = "";
                        }
                        return ret + "." + (decimal + "00").substr(0, 2);
                    })
                    + "秒"
                    + ")<" + "br/>"
            );
            checkStop();
            resultElemScroll();
            elemRemove();
        },
        wordTestTwitch002FuncExecute = function(){
            var accel, fontSizeOld,
            randSleep = function(){
                return Math.round(Math.random() * (animateDuration + loopSleep) / 0.25);
            };
            if (animateFlag === false)
            {
                if (stopFlag)
                {
                    wordTestTwitch002FuncStop();
                    return;
                }
                if (++cnt > loopCount)
                {
                    wordTestTwitch002FuncTimeOver();
                    return;
                }
                accel = Math.pow(accelDiameter * cnt / loopCount, 2) / accelDiameter;
                if (fontSize < 5)
                {
                    accel *= (6 - fontSize);
                }
                else if ((maxFontSize - fontSize) < 5)
                {
                    accel /= (6 - (maxFontSize - fontSize));
                }
                fontSizeOld = fontSize;
                fontSize += randFunc(1 + accel + ((maxFontSize <= fontSize) ? (maxFontSize * 3) : 0));
                fontSize = Math.max(1, Math.min(maxFontSize, fontSize));
                top += randFunc(1 + accel) + ((fontSizeOld - fontSize) / 0.125);
                left += randFunc(1 + (accel * 8)) + ((fontSizeOld - fontSize) / 2);
                animateFlag = true;
                elem.animate({"top": Math.round(top) + "px",
                              "left": Math.round(left) + "px",
                              "font-size": Math.round(fontSize) + "px",
                              "line-height": Math.round(fontSize) + "px"}
                             ,{"duration": animateDuration + randSleep(),
                               "complete": function(){animateFlag = false;}});
                if ((divElemOuterWidth < elem.position().left)
                    || (0 > (elem.position().left + elem.outerWidth()))
                    || (divElemOuterHeight < elem.position().top)
                    || (0 > (elem.position().top + elem.outerHeight())))
                {
                    wordTestTwitch002FuncArrival();
                    return;
                }
                setTimeout(wordTestTwitch002FuncExecute, loopSleep + randSleep());
            }
            else
            {
                setTimeout(wordTestTwitch002FuncExecute, animateWait);
            }
        },
        startFunc = function(){
            $(divElem).unbind("click", startFunc);
            setTimeout(wordTestTwitch002FuncExecute, Math.round(Math.random() * 8000));
            $(divElem).click(stopFunc);
            if (startTime === null)
            {
                startTime = new Date().getTime();
            }
        },
        stopFunc = function(){
            $(divElem).unbind("click", stopFunc);
            stopFlag = true;
        };
        $(divElem).click(startFunc);
        processCount++;
    });
    $(divElem)
        .bind("selectstart",function(){
            return false;
        }).mousedown(function(){
            return false;
        })
        .click(resultElemScrollProcessStart);
})();}catch(e){window.document.write("<"+"pre>Error: " + e + "<"+"/pre>");}
//-->]]>
</script>

2011-10-20

tomoyo-toolsのバージョンを下げた

2.4.0にしたらtomoyo-editpolicyのdomain policy editorで設定した名前の行でEnterを押したら空になったので下げた。

$ eix tomoyo-tools -cI
[I] sys-apps/tomoyo-tools (2.3.0_p20110929@2011年10月20日): TOMOYO Linux tools

2.4で保存する場所が変わったかもしれない、
2.3にしてからdomain_policy.confを短くした、
などの理由で直ったかもしれないので、
2.4に再度上げて保存した設定ファイルを手動で移動すれば大丈夫かもしれないが試してはいない。

以下はメモです。

カーネルのバージョン。

$ uname -a
Linux amdgentoo 3.0.4-hardened-r1 #1 SMP Mon Oct 17 01:47:30 JST 2011 x86_64 AMD Phenom(tm) 9350e Quad-Core Processor AuthenticAMD GNU/Linux

関連するコンフィグ。(make menuconfigで設定)

$ grep -i tomoyo /usr/src/linux/.config
CONFIG_SECURITY_TOMOYO=y
CONFIG_DEFAULT_SECURITY_TOMOYO=y
CONFIG_DEFAULT_SECURITY="tomoyo"

tomoyo-editpolicyが重いので有効なdomain_policy.confのuse_profile 0の辺りを手動で消した。
たぶんセーブの仕方が悪いかもしれない。

<kernel> /etc/init.d/ntpd /lib64/rc/sh/runscript.sh /sbin/start-stop-daemon /usr/sbin/ntpd
use_profile 3

allow_read/write /dev/null
allow_create /var/run/ntpd.pid 0644
allow_write /var/run/ntpd.pid
allow_read /etc/ntp.conf
allow_ioctl socket:[family=2:type=2:protocol=17] 0x8912
allow_read /proc/\$/net/if_inet6
allow_ioctl socket:[family=2:type=2:protocol=17] 0x8913
allow_ioctl socket:[family=2:type=2:protocol=17] 0x891B
allow_ioctl socket:[family=2:type=2:protocol=17] 0x8919
allow_read /etc/nsswitch.conf
allow_read /etc/services
allow_read /var/lib/ntp/ntp.drift
allow_read /etc/resolv.conf
allow_read /etc/host.conf
allow_read /etc/hosts
allow_ioctl socket:[family=2:type=2:protocol=17] 0x541B
allow_read /etc/gai.conf
allow_create /var/lib/ntp/ntp.drift.TEMP 0644
allow_write /var/lib/ntp/ntp.drift.TEMP
allow_truncate /var/lib/ntp/ntp.drift.TEMP
allow_rename /var/lib/ntp/ntp.drift.TEMP /var/lib/ntp/ntp.drift
allow_read /dev/urandom
allow_read /dev/random
allow_create /var/run/ntpd.pid 0666
allow_create /var/lib/ntp/ntp.drift.TEMP 0666

<kernel> /etc/init.d/nginx /lib64/rc/sh/runscript.sh /sbin/start-stop-daemon /usr/sbin/nginx
use_profile 3

allow_read/write /var/run/nginx.pid
allow_unlink /var/run/nginx.pid
allow_write /var/log/nginx/error_log
allow_read /etc/nginx/nginx.conf
allow_read /etc/nsswitch.conf
allow_read /etc/passwd
allow_read /etc/group
allow_read /etc/nginx/mime.types
allow_read /etc/resolv.conf
allow_read /etc/host.conf
allow_read /etc/hosts
allow_write /var/log/nginx/localhost.access_log
allow_write /var/log/nginx/localhost.error_log
allow_ioctl socket:[family=2:type=1:protocol=6] 0x5421
allow_read/write /dev/null
allow_create /var/run/nginx.pid 0644
allow_ioctl socket:[family=1:type=1:protocol=0] 0x5421
allow_ioctl socket:[family=1:type=1:protocol=0] 0x5452
allow_read /proc/sys/kernel/ngroups_max
allow_ioctl anon_inode:[eventfd] 0x5421
allow_read /etc/nginx/conf/htpasswd
allow_read /var/www/\*/htdocs/\*.htm
allow_read /var/www/\*/htdocs/\*.html
allow_read /var/www/\*/htdocs/\*.ico
allow_read /var/www/\*/htdocs/\*.txt
allow_read /var/www/\*/htdocs/\{\*\}/\*.bz2
allow_read /var/www/\*/htdocs/\{\*\}/\*.css
allow_read /var/www/\*/htdocs/\{\*\}/\*.flv
allow_read /var/www/\*/htdocs/\{\*\}/\*.gif
allow_read /var/www/\*/htdocs/\{\*\}/\*.gz
allow_read /var/www/\*/htdocs/\{\*\}/\*.htm
allow_read /var/www/\*/htdocs/\{\*\}/\*.html
allow_read /var/www/\*/htdocs/\{\*\}/\*.ico
allow_read /var/www/\*/htdocs/\{\*\}/\*.jpeg
allow_read /var/www/\*/htdocs/\{\*\}/\*.jpg
allow_read /var/www/\*/htdocs/\{\*\}/\*.js
allow_read /var/www/\*/htdocs/\{\*\}/\*.pdf
allow_read /var/www/\*/htdocs/\{\*\}/\*.png
allow_read /var/www/\*/htdocs/\{\*\}/\*.tgz
allow_read /var/www/\*/htdocs/\{\*\}/\*.txt
allow_read /var/www/\*/htdocs/\{\*\}/\*.xml
allow_read /var/www/\*/htdocs/\{\*\}/\*.xz
allow_read /var/www/\*/htdocs/\{\*\}/\*.zip
allow_read /var/www/\*/tmp/\{\*\}/\*.png

<kernel> /usr/sbin/apache2
use_profile 3

allow_read /etc/apache2/httpd.conf
allow_read /etc/apache2/vhosts.d/default_vhost.include
allow_read /etc/nsswitch.conf
allow_read /etc/passwd
allow_read /etc/group
allow_read /etc/resolv.conf
allow_read /etc/host.conf
allow_read /etc/hosts
allow_read /etc/gai.conf
allow_read/write /var/run/apache2.pid
allow_unlink /var/run/apache2.pid
allow_truncate /var/run/apache2.pid
allow_read/write /tmp/session_mm_apache2handler0.sem
allow_unlink /tmp/session_mm_apache2handler0.sem
allow_write /var/log/apache2/error_log
allow_write /var/log/apache2/ssl_error_log
allow_write /var/log/apache2/access_log
allow_write /var/log/apache2/ssl_access_log
allow_write /var/log/apache2/ssl_request_log
allow_read /etc/apache2/magic
allow_read /etc/mime.types
allow_read /dev/urandom
allow_create /var/run/ssl_mutex 0644
allow_write /var/run/ssl_mutex
allow_unlink /var/run/ssl_mutex
allow_read/write /dev/null
allow_read /proc/sys/kernel/ngroups_max
allow_read /etc/php/apache2-php5.3/php.ini
allow_ioctl /etc/php/apache2-php5.3/php.ini 0x5401
allow_create /tmp/session_mm_apache2handler0.sem 0600
allow_read /etc/locales.conf
allow_read /etc/services
allow_read/write /usr/share/snmp/mibs/.index
allow_truncate /usr/share/snmp/mibs/.index
allow_read /etc/protocols
allow_read/write /dev/zero
allow_create /var/run/apache2.pid 0644
allow_read /etc/apache2/modules.d/\+\+_\*.conf
allow_read /etc/apache2/vhosts.d/\+\+_\*.conf
allow_read /etc/php/apache2-php5.3/ext/\*.ini
allow_ioctl /etc/php/apache2-php5.3/ext/\*.ini 0x5401
allow_read /etc/php/ext/\*.ini
allow_ioctl /etc/php/ext/\*.ini 0x5401
allow_read/write /tmp/.xcache.\*.lock
allow_unlink /tmp/.xcache.\*.lock
allow_create /tmp/.xcache.\*.lock 0666
allow_read /usr/share/snmp/mibs/\*.txt
allow_read /usr/lib\*/locale/locale-archive
allow_mksock /var/run/cgisock.\$ 0700
allow_chmod /var/run/cgisock.\$ 0700
allow_chown /var/run/cgisock.\$ 81
allow_unlink /var/run/cgisock.\$
allow_read /etc/ssl/apache2/\+\+\+\+-\+\+-\+\+/\*.pem
allow_read /var/www/\*/htdocs/.htaccess
allow_read /var/www/\*/htdocs/\*.php
allow_read /var/www/\*/htdocs/\{\*\}/.htaccess
allow_read /var/www/\*/htdocs/\{\*\}/\*.php
allow_read /var/www/\*/htdocs/\{\*\}/\*.php\+
allow_read /var/www/\*/htdocs/\*.php\+
allow_read /var/www/\*/htdocs/\{\*\}/\*.png
allow_read /var/www/\*/htdocs/\*.htm
allow_read /var/www/\*/htdocs/\*.html
allow_read /var/www/\*/htdocs/\*.ico
allow_read /var/www/\*/htdocs/\*.txt
allow_read /var/www/\*/htdocs/\{\*\}/\*.bz2
allow_read /var/www/\*/htdocs/\{\*\}/\*.css
allow_read /var/www/\*/htdocs/\{\*\}/\*.flv
allow_read /var/www/\*/htdocs/\{\*\}/\*.gif
allow_read /var/www/\*/htdocs/\{\*\}/\*.gz
allow_read /var/www/\*/htdocs/\{\*\}/\*.htm
allow_read /var/www/\*/htdocs/\{\*\}/\*.html
allow_read /var/www/\*/htdocs/\{\*\}/\*.ico
allow_read /var/www/\*/htdocs/\{\*\}/\*.jpeg
allow_read /var/www/\*/htdocs/\{\*\}/\*.jpg
allow_read /var/www/\*/htdocs/\{\*\}/\*.js
allow_read /var/www/\*/htdocs/\{\*\}/\*.pdf
allow_read /var/www/\*/htdocs/\{\*\}/\*.tgz
allow_read /var/www/\*/htdocs/\{\*\}/\*.txt
allow_read /var/www/\*/htdocs/\{\*\}/\*.xml
allow_read /var/www/\*/htdocs/\{\*\}/\*.xz
allow_read /var/www/\*/htdocs/\{\*\}/\*.zip
allow_read/write /mnt/share/svn/repos/\{\*\}/\*
allow_unlink /mnt/share/svn/repos/\{\*\}/\*
allow_truncate /mnt/share/svn/repos/\{\*\}/\*
allow_create /mnt/share/svn/repos/\{\*\}/\* 0600
allow_create /tmp/apr-tmp.\* 0600
allow_read/write /tmp/apr-tmp.\*
allow_unlink /tmp/apr-tmp.\*
allow_chmod /mnt/share/svn/repos/\{\*\}/\* 0644
allow_read/write /tmp/svn-tempfile.\*tmp
allow_unlink /tmp/svn-tempfile.\*tmp
allow_create /tmp/svn-tempfile.\*tmp 0666
allow_create /mnt/share/svn/repos/\{\*\}/\* 0664
allow_chmod /mnt/share/svn/repos/\{\*\}/\* 0664
allow_rename /mnt/share/svn/repos/\{\*\}/\* /mnt/share/svn/repos/\{\*\}/\*
allow_mkdir /mnt/share/svn/repos/\{\*\}/ 0777
allow_create /mnt/share/svn/repos/\{\*\}/\* 0666
allow_rmdir /mnt/share/svn/repos/\{\*\}/

<kernel> /etc/init.d/named /lib64/rc/sh/runscript.sh /sbin/start-stop-daemon /usr/sbin/named
use_profile 3

allow_write /var/run/named/session.key
allow_unlink /var/run/named/session.key
allow_write /var/run/named/named.pid
allow_unlink /var/run/named/named.pid
allow_read /etc/nsswitch.conf
allow_read /etc/passwd
allow_read /proc/sys/kernel/ngroups_max
allow_read /etc/group
allow_read/write /dev/null
allow_read /etc/ssl/openssl.cnf
allow_read /etc/bind/named.conf
allow_read /etc/bind/rndc.key
allow_read /etc/bind/bind.keys
allow_read /proc/\$/net/if_inet6
allow_create /var/run/named/named.pid 0644
allow_create /var/run/named/session.key 0600
allow_read /dev/random
allow_write /var/log/named/named.log
allow_read /var/bind/managed-keys.bind
allow_read /var/bind/pri/\*.zone
allow_read /var/bind/sec/\*.zone
allow_read /dev/urandom

exception_policy.confの手動で追加したと思われる部分。

initialize_domain /etc/init.d/named
allow_read /proc/self/\*
allow_read /proc/self/\{\*\}/\*
allow_read /proc/meminfo
allow_read /lib\$/\*.so
allow_read /usr/lib\$/\*.so
allow_read /usr/lib\$/\{\*\}/\*.so
allow_read /lib\$/\{\*\}/\*.so
allow_read /lib\$/\*.so.\+\*
allow_read /lib\$/\{\*\}/\*.so.\+\*
allow_read /usr/lib\$/\{\*\}/\*.so.\+\*
allow_read /usr/lib\$/\*.so.\+\*
allow_read /usr/lib64/gconv/gconv-modules.cache

2011-10-19

javascriptのsetTimeout

setTimeoutで定期的にcssを変更する例です。
クリックするとスタートします。
もう一度クリックするとストップします。

sample

ソース。

<table id="wordTestTwitch001" style="border-collapse: collapse; padding: 0pt; width: 112px; height: 112px; text-align: center; vertical-align: middle; background-color: rgb(255, 255, 255); color: rgb(127, 127, 127); border: 1px solid rgb(24, 24, 24); margin: 0pt auto 14px auto; font-size: 14px; font-family: monospace;"><tbody><tr><td><div>sample</div></td></tr></tbody></table><div style="font-family: monospace; font-size: 14px; margin: 0pt 0pt 0pt 14px; padding: 0pt;" id="wordTestTwitch001Result"></div><script type="text/javascript">
//<![CDATA[<!--
try{(function(){
    var tableElem = document.getElementById("wordTestTwitch001"),
    resultElem = document.getElementById("wordTestTwitch001Result"),
    mainTop = (function(){
        return $("#main").offset().top + parseInt($("#main").css("padding-top"), 10);
    })(),
    mainLeft = (function(){
        return $("#main").offset().left + parseInt($("#main").css("padding-left"), 10);
    })(),
    tableTop = $(tableElem).offset().top - mainTop,
    tableLeft = $(tableElem).offset().left - mainLeft,
    tableBottom = tableTop + $(tableElem).outerHeight(),
    tableRight = tableLeft + $(tableElem).outerWidth(),
    orderCount = 0,
    randFunc = function(division){
        return ((Math.random() * 2) - 1) * division;
    },
    processCount = 0,
    checkStop = function(){
        processCount--;
        if (processCount <= 0)
        {
            $(tableElem).unbind("click");
            $(tableElem).css("cursor", "default");
        }
    },
    loopCount = 600,
    startTime = new Date().getTime();
    $("#wordTestTwitch001, #wordTestTwitch001 *").each(function(){
        if (!$(this).html().match(/</))
        {
            $(this).html($(this).text().replace(/(.)/g, function(){
                return "<" + "span class='wordTestTwitch001Class'>" + arguments[1] + "<" + "/span>";
            }));
        }
    }).find(".wordTestTwitch001Class").each(function(){
        $(this)
            .css("top", $(this).offset().top - mainTop)
            .css("left", $(this).offset().left - mainLeft);
    }).each(function(){
        $(this).css("position", "absolute");
        var cnt = 0,
        elem = $(this),
        top = parseFloat(elem.css("top")),
        left = parseFloat(elem.css("left")),
        fontSize = parseFloat(elem.css("font-size")),
        red = 127.5,
        green = 127.5,
        blue = 127.5,
        stopFlag = false,
        wordTestTwitch001FuncStop = function(){
            elem.remove();
            checkStop();
            if (processCount <= 0)
            {
                $(resultElem).append("ストップ<" + "br/>");
            }
        },
        wordTestTwitch001FuncTimeOver = function(){
            $(resultElem).append("時間切れ: " + elem.text() + "<" + "br/>");
            elem.remove();
            checkStop();
        },
        wordTestTwitch001FuncArrival = function(){
            ++orderCount;
            $(resultElem).append(
                (String(orderCount).length == 1 ? "&nbsp;" : "") + orderCount + "位: " + elem.text()
                    + " (font-size:" + (String(fontSize).length == 1 ? "&nbsp;" : "") + Math.round(fontSize) + "px"
                    + " color:<" + "span style='color: rgb("
                    + Math.round(red) + "," + Math.round(green) + "," + Math.round(blue) + ");"
                    + " font-family: monospace; font-size: 14px;'>■<" + "/span>"
                    + " time:" + (parseInt(((new Date().getTime()) - startTime) / 100, 10) / 10) + "秒"
                    + ")<" + "br/>"
            );
            elem.remove();
            checkStop();
        },
        wordTestTwitch001FuncExecute = function(){
            var topTmp, leftTmp, accel = Math.pow(8 * cnt / loopCount, 2) / 8;
            if (stopFlag)
            {
                wordTestTwitch001FuncStop();
                return;
            }
            if (++cnt > loopCount)
            {
                wordTestTwitch001FuncTimeOver();
                return;
            }
            top += randFunc(0.1 + accel);
            left += randFunc(0.1 + accel);
            fontSize += randFunc(0.1 + accel);
            red += randFunc(10 + accel);
            green += randFunc(10 + accel);
            blue += randFunc(10 + accel);
            fontSize = Math.max(1, Math.min(100, fontSize));
            red = Math.max(0, Math.min(255, red));
            green = Math.max(0, Math.min(255, green));
            blue = Math.max(0, Math.min(255, blue));
            elem.css("font-size", Math.round(fontSize) + "px")
                .css("color", "rgb(" + Math.round(red) + "," + Math.round(green) + "," + Math.round(blue) + ")");
            topTmp = Math.max(tableTop, Math.min(tableBottom - elem.outerHeight(), top));
            leftTmp = Math.max(tableLeft, Math.min(tableRight - elem.outerWidth(), left));
            if (top != topTmp || left != leftTmp)
            {
                wordTestTwitch001FuncArrival();
                return;
            }
            elem.css("top", Math.round(top) + "px").css("left", Math.round(left) + "px");
            setTimeout(wordTestTwitch001FuncExecute, 100);
        },
        startFunc = function(){
            $(tableElem).unbind("click", startFunc);
            setTimeout(wordTestTwitch001FuncExecute, 0);
            $(tableElem).click(stopFunc);
        },
        stopFunc = function(){
            $(tableElem).unbind("click", stopFunc);
            stopFlag = true;
        };
        $(tableElem).click(startFunc);
        processCount++;
    });
    $(tableElem).css("cursor", "pointer");
})();}catch(e){window.document.write("<"+"pre>Error: " + e + "<"+"/pre>");}
//-->]]>
</script>

説明。
グローバルオブジェクト(関数)として下記を使用しています。

$, Date, Math, String, arguments, document, parseFloat, parseInt, setTimeout, window

これらはwindow以外window.を省略しています。(window.$, window.Date など)

setTimeoutはwordTestTwitch001FuncExecuteを呼び出すのに利用しています。
ソースの最後の方の、

setTimeout(wordTestTwitch001FuncExecute, 100);
...
        $(tableElem).click(startFunc);

の、

$(tableElem).click(startFunc);

でクリック時に、

setTimeout(wordTestTwitch001FuncExecute, 0);

を読んでいます。(すぐに実行する。)
wordTestTwitch001FuncExecuteの中で自身を再実行しています。

setTimeout(wordTestTwitch001FuncExecute, 100);

100ミリ秒(0.1秒)後に実行する。
テストする場合"#main"を"body"などに変更して下さい。
jqueryは1.6.4です。
このサンプルが重いのはsetTimeoutのせいではなく動かす中身が重いためです。
アニメーションさせるにはanimateがお勧めです。

2011-10-18

カーネルのコンパイルのオプション

メモ: カーネルのコンパイルのオプション。

make ARCH=i386 KCFLAGS="-march=prescott --param l1-cache-size=16 --param l1-cache-line-size=64 --param l2-cache-size=1024 -mtune=prescott -fomit-frame-pointer -Os" -j4 vmlinux \
&& \
make ARCH=i386 KCFLAGS="-march=prescott --param l1-cache-size=16 --param l1-cache-line-size=64 --param l2-cache-size=1024 -mtune=prescott -fomit-frame-pointer -Os" -j4 modules \
&& \
make ARCH=i386 KCFLAGS="-march=prescott --param l1-cache-size=16 --param l1-cache-line-size=64 --param l2-cache-size=1024 -mtune=prescott -fomit-frame-pointer -Os" -j4 modules_install

$ uname -a
Linux cogentoo-1 2.6.33.7-co-0.7.9 #3 PREEMPT Tue Oct 18 03:19:22 JST 2011 i686 Intel(R) Pentium(R) 4 CPU 3.00GHz GenuineIntel GNU/Linux

$ cat /proc/cpuinfo | grep "^model name"
model name      : Intel(R) Pentium(R) 4 CPU 3.00GHz

$ ll -h /usr/src/linux/vmlinux
-rwxr-xr-x 1 root root 3.8M 2011-10-18 03:19:34 /usr/src/linux/vmlinux*

$ diff -u /usr/src/linux/.config.old /usr/src/linux/.config
--- /usr/src/linux/.config.old  2011-05-15 22:59:26.996442011 +0900
+++ /usr/src/linux/.config      2011-10-17 21:49:42.115264950 +0900
@@ -1,7 +1,7 @@
 #
 # Automatically generated make config: don't edit
 # Linux kernel version: 2.6.33.7
-# Sun May 15 22:59:26 2011
+# Mon Oct 17 21:49:42 2011
 #
 # CONFIG_64BIT is not set
 CONFIG_X86_32=y
@@ -169,7 +169,7 @@
 # CONFIG_MODULE_SRCVERSION_ALL is not set
 CONFIG_BLOCK=y
 CONFIG_LBDAF=y
-# CONFIG_BLK_DEV_BSG is not set
+CONFIG_BLK_DEV_BSG=y
 # CONFIG_BLK_DEV_INTEGRITY is not set

 #
@@ -692,6 +692,7 @@
 # CONFIG_SCSI_SPI_ATTRS is not set
 # CONFIG_SCSI_FC_ATTRS is not set
 CONFIG_SCSI_ISCSI_ATTRS=m
+# CONFIG_SCSI_SAS_ATTRS is not set
 # CONFIG_SCSI_SAS_LIBSAS is not set
 # CONFIG_SCSI_SRP_ATTRS is not set
 CONFIG_SCSI_LOWLEVEL=y

2011-10-14

aタグのtargetの補足

フレームではないがターゲットをトップにした場合、

<a target="_top" href="#xxx">xxx</a>

IE系などのブラウザで同じページでもリロードする場合があります。

2011-10-13

jqueryのbind以外でclickに引数をもたせる

参考URL。
http://www.tinybeans.net/blog/2009/02/19-134819.html
http://semooh.jp/jquery/api/events/bind/type,+%5Bdata%5D,+fn/

jqueryのbind以外でclickに引数をもたせる。

$(xxx).click((function(key){return function(){
    ...
};})(key));

追記: ループの中で使うと遅くなりそうなのでbind("click" ...)の方が良いです。

例。

ソース。

<style type="text/css">
<!--
body #click-test-ap8cljwu, body #click-test-ap8cljwu * {
  background-color: white;
  border-width: 0;
  color: black;
  font-family: "ＭＳ ゴシック","Osaka-mono",monospace;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 14px;
  margin: 0;
  padding: 0;
  text-align: center;
  text-indent: 0;
  text-transform: none;
  white-space: nowrap;
  word-spacing: 0;
  word-wrap: normal;
}
body #click-test-ap8cljwu {
  margin: 0 auto;
  width: 336px;
}
body #click-test-ap8cljwu .click-test-ap8cljwu-list {
  height: 21px;
  margin-left: 7px;
  text-align: left;
}
body #click-test-ap8cljwu .click-test-ap8cljwu-list ul {
  background-color: transparent;
  position: absolute;
}
body #click-test-ap8cljwu .click-test-ap8cljwu-list li {
  display: block;
  float: left;
  margin-right: 7px;
  _width: 1px;
}
body #click-test-ap8cljwu .click-test-ap8cljwu-list a {
  background-color: #D3D3D3;
  border: 1px solid black;
  cursor: pointer;
  display: block;
  height: 14px;
  line-height: 14px;
  padding: 3px 7px;
}
body #click-test-ap8cljwu .click-test-ap8cljwu-list a.selected {
  background-color: white;
  border: 1px solid black;
  border-bottom-color: white;
}
body #click-test-ap8cljwu .click-test-ap8cljwu-result {
  border: 1px solid black;
  clear: both;
  height: 280px;
  overflow: auto;
  padding: 7px;
  text-align: left;
}
body #click-test-ap8cljwu .click-test-ap8cljwu-list ul {
  border-bottom-width: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
body #click-test-ap8cljwu .click-test-ap8cljwu-list ul li {
  border-top-width: 0;
  float: left;
  line-height: 14px;
  margin-top: 0;
  padding: 0;
}
-->
</style>
<div id="click-test-ap8cljwu"></div>
<script type="text/javascript">
//<![CDATA[<!--
try{(function(){
    var key, aElem, liElem,
    id = "click-test-ap8cljwu",
    list = {
        "one": ["ホーム", "1番", "ファースト"],
        "two": ["お知らせ", "2番", "セカンド"],
        "three": ["お問い合せ", "3番", "サード"]
    },
    listElem = document.createElement("div"),
    ulElem = document.createElement("ul"),
    resultElem = document.createElement("div");
    $(listElem).addClass(id + "-list");
    $(resultElem).addClass(id + "-result");
    $("#" + id).append(listElem);
    $(listElem).append(ulElem);
    $("#" + id).append(resultElem);
    for (key in list)
    {
        liElem = document.createElement("li");
        aElem = document.createElement("a");
        $(liElem).append(aElem);
        $(aElem).text(list[key][0]);
        $(aElem).click((function(key){return function(){
            var x;
            $("#" + id + " ." + id + "-list a").removeClass("selected");
            $(resultElem).text("");
            $(resultElem).append("key = " + key + "<" + "br/>");
            for (x = 0; x < list[key].length; x++)
            {
                $(this).addClass("selected");
                $(resultElem).append("list[" + key + "][" + x + "] = " + list[key][x] + "<" + "br/>");
            }
        };})(key));
        $(ulElem).append(liElem);
        $("#" + id + " ." + id + "-list a").each(function(){
            $(this).click();
            return false;
        });
    }
})();}catch(e){document.write("<"+"pre>Error: " + e + "<"+"/pre>");}
//-->]]>
</script>

2011-10-12

IE8のmin-width

http://msdn.microsoft.com/ja-jp/library/cc288325%28v=vs.85%29.aspx#content_%E5%B1%9E%E6%80%A7%E5%80%A4%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

IETester v0.4.11でmin-widthが動くがwindowsXPのIE8では動かないので設定を追加した。
IE6,IE7では別の設定が必要です。

<meta content='IE=100' http-equiv='X-UA-Compatible'/>

例。

<style type="text/css">
<!--
#ie8test-c9d637d9b63df117874a716164fb5f99, #ie8test-c9d637d9b63df117874a716164fb5f99 * {
  font-size: 16px;
}
#ie8test-c9d637d9b63df117874a716164fb5f99 ul {
  list-style-type: none;
  width: 250px;
}
#ie8test-c9d637d9b63df117874a716164fb5f99 ul li {
  float: left;
  min-width: 120px;
}
#ie8test-c9d637d9b63df117874a716164fb5f99 ul li span {
  margin-right: 0.8em;
}
-->
</style>
<div id="ie8test-c9d637d9b63df117874a716164fb5f99">
 <ul>
  <li><a>タイトル</a> <span>(1)</span></li>
  <li><a>タイトル</a> <span>(1)</span></li>
  <li><a>タイトル</a> <span>(1)</span></li>
  <li><a>タイトルタイトル</a> <span>(1)</span></li>
  <li><a>タイトルタイトルタイトル</a> <span>(1)</span></li>
  <li><a>タイト</a> <span>(1)</span></li>
  <li><a>タイ</a> <span>(1)</span></li>
  <li><a>タ</a> <span>(1)</span></li>
 </ul>
</div>
<br clear="all" style="clear: both;" />

追記。例。IE7以下のブラウザで違うcssを適用する場合。

@@ -976,6 +976,20 @@

 ]]></b:skin>

+<!--[if lte IE 7]>
+<style type="text/css">
+#sidebar .Label ul li {
+  display : block;
+  float   : left;
+  width   : 125px;
+}
+#sidebar .Label ul li span {
+  margin-right : 0;
+  white-space  : nowrap;
+}
+</style>
+<![endif]-->
+
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 //<![CDATA[<!--

2011-10-08

javascriptのfocus part2

sidebar (1)
サイドバーに移動。「フォーカス」にフォーカスする。

sidebar (2)
サイドバーに移動。「フォーカス」にフォーカスする。このブログを検索にフォーカスする。

sidebar (3)
サイドバーに移動。このブログを検索にフォーカスする。

sidebar (4)
サイドバーに移動。このブログを検索にフォーカスする。
(このブログを検索より下に'#sidebar input.gsc-input'にマッチするものは無い。)

ソース。

<input class="gsc-input" type="text" value="フォーカス" style="width: 8em; border: 1px solid gray; margin: 0; padding: 0.5em;" readonly="readonly"></input>

<a href="#sidebar" onclick="javascript:
try{(function(){
    setTimeout(function(){
        $('input.gsc-input').each(function(){
            $(this).focus();
            return false;
        });
    },170);
})();}catch(e){}
" target="_top">sidebar (1)</a>
サイドバーに移動。<strong>「フォーカス」</strong>にフォーカスする。

<a href="#sidebar" onclick="javascript:
try{(function(){
    setTimeout(function(){
        $('input.gsc-input').each(function(){
            $(this).focus();
            return true;
        });
    },170);
})();}catch(e){}
" target="_top">sidebar (2)</a>
サイドバーに移動。<strong>「フォーカス」</strong>にフォーカスする。<strong>このブログを検索</strong>にフォーカスする。

<a href="#sidebar" onclick="javascript:
try{(function(){
    setTimeout(function(){
        $('#sidebar input.gsc-input').each(function(){
            $(this).focus();
            return false;
        });
    },170);
})();}catch(e){}
" target="_top">sidebar (3)</a>
サイドバーに移動。<strong>このブログを検索</strong>にフォーカスする。

<a href="#sidebar" onclick="javascript:
try{(function(){
    setTimeout(function(){
        $('#sidebar input.gsc-input').each(function(){
            $(this).focus();
            return true;
        });
    },170);
})();}catch(e){}
" target="_top">sidebar (4)</a>
サイドバーに移動。<strong>このブログを検索</strong>にフォーカスする。
(<strong>このブログを検索</strong>より下に<strong>'#sidebar input.gsc-input'</strong>にマッチするものは無い。)

jqueryのeachはfalseを返すと止まります。
'input.gsc-input'と'#sidebar input.gsc-input'でヒットする数が違います。
この例ではわざと同じクラス名をつけたタグを増やしましたが、
元々クラス名は複数指定可能なので、こういった場合タグにIDをつけると良いです。
IDがある場合eachを使う必要は無いです。($("id").focus()など)

一部の古いブラウザではjqueryが動作しなかったり、
同一ページへの移動でリロードする場合があるので使えません。

参考URL。
http://semooh.jp/jquery/api/core/each/callback/

2011-10-07

javascriptのfocus

Aタグで href="#xxx" で同一ページ内に移動する場合についでにフォーカスする。
フォーカスした部分に変化が無い場合やページをリロードする場合がブラウザによってはある。
setTimeoutには文字列より関数自体を渡した方が早いです。

例。

移動する

隙間(1000px)
移動先
↓

移動先。戻る。

説明。

try{ ... }catch(e){} => tryの中身を実行してエラーの場合何も表示しない。少し遅くなる。
setTimeout(..., 170) => 移動の0.17秒後に関数を実行する。
function(){ ... }    => フォーカスを実行する部分。

ソース。

<hr /><a href="#javascript-focus-test-001" id="javascript-focus-test-002" onclick='javascript:try{(function(){setTimeout(function(){document.getElementById("javascript-focus-test-001").focus();},170);})();}catch(e){}'>移動する</a><div style="height: 1000px;">隙間(1000px)<br />移動先<br />↓</div><a href="#javascript-focus-test-002" id="javascript-focus-test-001" onclick='javascript:try{(function(){setTimeout(function(){document.getElementById("javascript-focus-test-002").focus();},170);})();}catch(e){}'>移動先。戻る。</a><hr />

2011-10-06

jqueryでaタグのtarget属性を変更

参考URL。
http://phpjs.org/functions/preg_quote:491
http://www.tohoho-web.com/js/regexp.htm
http://semooh.jp/jquery/

</head>よりも前に記述します。
typeofの文字列判定がダメかもしれません。

target指定がある。            => そのまま
http://などから書いていない。 => _top
http(s)://自ドメイン/...      => _top
それ以外                      => _blank

javascriptがoff               => 未指定時を_top(baseタグ)
jquery未対応かコードに問題    => 毎回javascriptがエラーになるなど。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script language="JavaScript">
//<![CDATA[<!--
try{(function(){
    $(document).ready(function(){
        var hostnamePattern = new RegExp(
            "^https?://"
                + "(?:[^/]+\\.)?"
                + location.hostname.replace(new RegExp("[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\-]", "g"), "\\$&")
                + "/"
        ),
        protocolPattern = new RegExp("^[A-Za-z]+://");
        $("a").each(function(i){
            if (typeof($(this).attr("href")) == "string" && typeof($(this).attr("target")) != "string")
            {
                if (!$(this).attr("href").match(protocolPattern) || $(this).attr("href").match(hostnamePattern))
                {
                    $(this).attr("target", "_top");
                }
                else
                {
                    $(this).attr("target", "_blank");
                }
            }
        });
});
})();}catch(e){}
//-->]]>
</script>

<base target="_top">

2011-11-26 追記
_topはブラウザによってはnocacheなので_selfが良いです。
下記の例は$(document).ready(function(){...});の中か、</body>直前に書きます。

(function(){
  var hostnamePattern = new RegExp(
    "^https?://"
      + "(?:[^/]+\\.)?"
      + location.hostname.replace(new RegExp("[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\-]", "g"), "\\$&")
      + "/"
  ),
  protocolPattern = new RegExp("^[A-Za-z]+://");
  $("a").each(function(){
    var elem = $(this);
    if (typeof elem.attr("href") == "string" && typeof elem.attr("target") != "string")
    {
      if (!elem.attr("href").match(protocolPattern) || elem.attr("href").match(hostnamePattern))
      {
        elem.attr("target", "_self");
      }
      else
      {
        elem.attr("target", "_blank");
      }
    }
  });
})();

登録: 投稿 (Atom)

日記(gentoo,php)

2011-10-30

if IE ...のサンプル

2011-10-28

DOMノードでテキストを操作するサンプル

2011-10-25

jqueryのheight関連に関する説明

2011-10-22

jquery UIのanimateのサンプル

perlのコマンドでhtmllintの設定ファイルを読んで文字列を取り出す

2011-10-21

javascriptのanimate

2011-10-20

tomoyo-toolsのバージョンを下げた

2011-10-19

javascriptのsetTimeout

2011-10-18

カーネルのコンパイルのオプション

2011-10-14

aタグのtargetの補足

2011-10-13

jqueryのbind以外でclickに引数をもたせる

2011-10-12

IE8のmin-width

2011-10-08

javascriptのfocus part2

2011-10-07

javascriptのfocus

2011-10-06

jqueryでaタグのtarget属性を変更

このブログを検索

ページ

ページ内のリンク

人気の投稿

ブログアーカイブ

プロダクトクラウド

ラベル

記事の横幅

文字のサイズ

ページ内のリンク

2011-10-30

2011-10-28

2011-10-25

2011-10-22

2011-10-21

2011-10-20

2011-10-19

2011-10-18

2011-10-14

2011-10-13

2011-10-12

2011-10-08

2011-10-07

2011-10-06

このブログを検索

ページ

ページ内のリンク

人気の投稿

ブログ アーカイブ

プロダクトクラウド

ラベル

記事の横幅

文字のサイズ

ページ内のリンク

ブログアーカイブ