JavascriptTips
●JSONデータのキーにドットが含まれている場合のデータ取得方法
var json={"foo.bar":"hoge"};
alert(json["foo.bar"]);//アラートで「hoge」を表示
●ローカルストレージの基本的な使い方
/*データを入れる*/
localStorage.setItem('key','data');
localStorage.key='data';
/*データを取得する*/
localStorage.getItem('key');
localStorage.key;
/*データをすべて削除する*/
localStorage.clear();
/*キーを指定して削除する*/
localStorage.removeItem('key');
/*格納した要素数*/
localStorage.length;
●ドラッグによるdiv幅変更
あいうえおかきくけこ
ABCDEFGHIJK
HTML
<div id='wrap'>
    <div id='left'><div>あいうえおかきくけこ</div><div>ABCDEFGHIJK</div></div>
    <div id='line'></div>
    <div id='right'><div>あいうえおかきくけこ</div><div>ABCDEFJHIJK</div></div>
</div>
CSS
#wrap{
    position: relative;
    height:100px;
    width:305px;
}
#left{
    position: absolute;
    left:0px;
    height:100%;
    width:150px;
    color:white;
    background-color:blue;
    overflow:auto;
}
#line{
    position: absolute;
    left:150px;
    height:100%;
    width:5px;
    background-color:white;
}
#line:hover{
    cursor:w-resize;
}
#right{
    position: absolute;
    left:155px;
    height:100%;
    width:150px;
    color:white;
    background-color:green;
    overflow:auto;
}
.selectguard{
    -webkit-user-select:none;
    -moz-user-select: none;
    -khtml-user-select: none;
}
JS
$(function(){
    $('#line').mousedown(function(){
        $('#wrap').bind('mousemove',divmove)
        .bind('mouseup',divstop);
    });
});
function divmove(e){
    //選択を無効化
    $('#wrap').addClass('selectguard');
    //左divの位置
    var leftx=$('#left').offset().left;
    //カーソル位置
    var cx=e.clientX-leftx;
    //右divの幅
    var rwidth=$('#wrap').width()-cx;
    $('#left').width(cx);
    $('#line').css({'left':cx,'width':5});
    $('#right').css({'left':cx+5,'width':rwidth});
}
function divstop(){
    $('#wrap').removeClass('selectguard');
    $('#wrap').unbind();
}
●jQuery+CSSで簡易ティッカー
↓をマウスオーバーすると文字が流れる
ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
HTML
<div id='wrapticker'>
    <span id='str'>ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</span>
</div>
CSS
#wrapticker{
    overflow: hidden;
    width:100px;
}
#str{
    white-space: nowrap;
    position: relative;
    left: 0px;
}
JS
$('#wrapticker').bind('mouseenter',function(){
    var str=$(this).find("#str");
    if(str.width()<=100){return}
    var offset_div=$(this).offset().left;
    var offset_str=os=str.width()+str.offset().left;
    var i=0;
    var speed=3;
    var stopper=0;
    var si=setInterval(function(){
        offset_str=offset_str-speed;
        i=i-speed;
        if(offset_str<offset_div){
            i=0;
            if(stopper<20){
                stopper++;
            }else{
                stopper=0;
                offset_str=os;
            }
            str.css({'left':i});
        }else{
            str.css({'left':i});
        }
    },50);
    $(this).one("mouseleave",function(){
        clearInterval(si);
        str.css({'left':0});
    });
});
●Flashの上に要素を表示
Flashと要素の間にiframeを挟む事でFlashの上に要素を表示させる事ができる
z-indexが効かなかったり、CPU使用率が高くなるwmode=transparentを使いたくない時に便利
WeeklyMotionでの使用例
緑:div要素
青:iframe