jQueryオブジェクトのcontext

1月 12th, 2012

【メモ】

jQueryオブジェクトのcontextから親を参照するプロパティ

IEやらChromeやらsafariには[parentElement]があるけど

FireFoxには[parentNode]しかないので注意

Posted in JS | コメントは受け付けていません。

thisの違い

1月 6th, 2012

当たり前かもしれないけど

var test = {
    test : function(){
        return this;
    }
}

function test02(){
    return this;
}

console.log(test.test()); //Object （test自身）
console.log(test02()); //DOMWindow

Posted in JS | コメントは受け付けていません。

underscore

1月 5th, 2012

便利

underscore.js

読み書きプログラミング

ここのやつを写経してた。

anyとかfilterとかtimesとかdelayとかオブジェクト系とか何か色々便利そうだす。

_.filter([1,2,3,4,5,6,7,8,9],function(num){return num % 3 === 0;});

なら、返す値は[3,6,9]

 

mixinで拡張もできる

_.mixin({
    test : function(state){
        console.log("mixin : " + state);
    }
});
_.test("unko"); //mixin : unko

ほへぇ…

コンソール見て

Posted in JS | コメントは受け付けていません。

スマートフォンのtouchendのpageX

12月 28th, 2011

あーーーー

JavaScript

jQuery(function($){
    var t = $("#test"),s = $("#start"),m = $("#move"),e = $("#end");
   
    t.on("touchstart",touchStartEvent);
    t.on("touchmove",touchMoveEvent);
    t.on("touchend",touchEndEvents);
   
    s.html("start : " + 0);
    m.html("move : " + 0);
    e.html("end : " + 0);
   
    function touchStartEvent(evt){
        evt.preventDefault();
        s.html("start : " + evt.originalEvent.touches[0].pageX);
    }
   
    function touchMoveEvent(evt){
        evt.preventDefault();
        m.html("move : " + evt.originalEvent.touches[0].pageX);
    }
   
    function touchEndEvents(evt){
        evt.preventDefault();
        e.html("end : " + evt.originalEvent.touches[0].pageX);
    }
});

html

<div id="test" style="background:#CCC;padding:200px 0;">
<h1 style="text-align:center;">touch me</h1>
</div>
<p id="start"></p>
<p id="move"></p>
<p id="end"></p>

[touchend]だけ、数値が取れてない…

[touchend]のプロパティ見たら…pageXは「0」！

ゴニョゴニョとプロパティ値を探っていくと、［changedTouches］のlengthが「1」ってなってなってたから、中身を見てみると、あった、あったよ！pageX！

ってことで

JavaScript修正

jQuery(function($){
    var t = $("#test"),s = $("#start"),m = $("#move"),e = $("#end");
   
    t.on("touchstart",touchStartEvent);
    t.on("touchmove",touchMoveEvent);
    t.on("touchend",touchEndEvents);
   
    s.html("start : " + 0);
    m.html("move : " + 0);
    e.html("end : " + 0);
   
    function touchStartEvent(evt){
        evt.preventDefault();
        s.html("start : " + evt.originalEvent.touches[0].pageX);
    }
   
    function touchMoveEvent(evt){
        evt.preventDefault();
        m.html("move : " + evt.originalEvent.touches[0].pageX);
    }
   
    function touchEndEvents(evt){
        evt.preventDefault();
        e.html("end : " + evt.originalEvent.changedTouches[0].pageX); //ここを修正したのです。
    }
});

ああ、取れてる…ってことでした～

ちなみにｊQueryなしの場合は

window.onload = function(){
    var d = document,
    t = d.getElementById("test"),
    s = d.getElementById("start"),
    m = d.getElementById("move"),
    e = d.getElementById("end");
   
    t.addEventListener("touchstart",touchStartEvent,false);
    t.addEventListener("touchmove",touchMoveEvent,false);
    t.addEventListener("touchend",touchEndEvents,false);
   
    s.innerHTML = "start : " + 0;
    m.innerHTML = "move : " + 0;
    e.innerHTML = "end : " + 0;
   
    function touchStartEvent(evt){
        evt.preventDefault();
        s.innerHTML = "start : " + evt.touches[0].pageX;
    }
   
    function touchMoveEvent(evt){
        evt.preventDefault();
        m.innerHTML = "move : " + evt.touches[0].pageX;
    }
   
    function touchEndEvents(evt){
        evt.preventDefault();
        e.innerHTML = "end : " + evt.changedTouches[0].pageX;
    }
};

若干eventの中身が違うのねん～

Posted in JS | コメントは受け付けていません。

Iterator

12月 26th, 2011

イテレータってので無限ループするんやみたいな

loopするんじゃね？ – jsdo.it – share JavaScript, HTML5 and CSS

Posted in JS | コメントは受け付けていません。

スワイプ的なやつ

12月 22nd, 2011

やってみた

//MOUSE ACTIONS
var xx = 0,now = 0,
index,
len = img_arr.length;

$page.on("mousedown",onDowmEvent);
$page.on("mouseup",onUpEvent);

//MOUSE DOWN
function onDowmEvent(evt){
    $page.on("mousemove",onMoveEvent);
    $page.on("mouseleave",onLeaveEvent);
    now = $top.position().left;
    xx = evt.pageX;
    myevent.stop(evt);
}

//MOUSE MOVE
function onMoveEvent(evt){
    $top.stop().animate({
        "left" : now + evt.pageX - xx
    },0);
}

//MOUSE LEAVE
function onLeaveEvent(evt){
    onUpEvent(evt);
}

//MOUSE UP
function onUpEvent(evt){
    $page.off("mousemove",onMoveEvent);
    $page.off("mouseleave",onLeaveEvent);
   
    //NEXT
    if((xx - evt.pageX) > 100){
        if(ite2.current() != ite2.last()){
            ite2.next();
            $top.stop().animate({
                "left" : ite2.current() * -$width
            },300);
        }else{
            $top.stop().animate({
                "left" : now
            },300);
        }
       
    //PREV
    }else if((xx - evt.pageX) < -100){
       
        if(ite2.current() !== ite2.first()){
            ite2.prev();
            $top.stop().animate({
                "left" : ite2.current() * -$width
            },300);
        }else{
            $top.stop().animate({
                "left" : now
            },300);
        }
   
    //NO EXIST NEXT or PREV
    }else{
        $top.stop().animate({
            "left" : now
        },300);
    }
}

［mousedown］で preventDefaul tなり returnValue = false なりをしておかないと、画像をドラッグしちゃう

［mousedown］時のpageX値を格納して、［mousemove］時のpageXとの差分を出して実装

［mousemove］は［mousedown］時に登録［mouseup］で解除する

念のために［mouseleave］を登録しておく

「ite2」って単なる数字の入ったiterator

スワイプ的なやつ

※PCでのスワイプ的なやつってことで

Posted in JS | コメントは受け付けていません。

Sassでclearfix楽チンポンじゃね？

12月 1st, 2011

Sass

Windowsになんじゃかんじゃ入れて、scssをcssに吐き出すやつです。

hamashun.me 【Windows PC に Ruby と Sass を導入する方法】

Bonkura Blog 【Sassを起動するコマンドメモ】

hail2u.net 【Sass、そしてSassy CSS (SCSS)】

hail2u.net 【Sass – チュートリアル】

あたりを見ればよくわかります。

やってみる

@mixin after{
    &:after{
        content: "";
        display: block;
        clear: both;
    }
}

して該当の要素にぶちこむ

#page {
    width : 800px;
    @include after;
}

んでcssにしてやると

#page {
      width: 800px;}
      #page:after {
        content: "";
        display: block;
        clear: both; }

って出てくる。

 

「.clearfix」とか、アレでしょ、何か、いかにも「clearfixしてる感」まるだしなので、使用する要素毎に「:after」入れてたので、

これでけっこう楽チンになるんじゃね？っていうお話でした。

 

Posted in WEB | コメントは受け付けていません。

mousewheelメモ

11月 21st, 2011

JSのmousewheelのやつ

window.onload = function(){
   
    if(window.addEventListener){
        window.addEventListener("DOMMouseScroll",scrollEvent,false);
    }
    document.onmousewheel = scrollEvent;
   
    var delta = 0;
   
    function scrollEvent(evt){
        if(!evt){
            evt = window.event;
        }
       
        //1スクロール 12px
        if(evt.wheelDelta){
            delta += evt.wheelDelta / 10;
        }else if(evt.detail){
            delta += evt.detail * -4;
        }
       
        if(evt.preventDefault){
            evt.preventDefault();
        }else{ 
            evt.returnValue = false;
        }
    }
}

だとさ

Posted in JS | コメントは受け付けていません。

css3のanimationのヤツ

11月 8th, 2011

CSS3のアニメーションやってみた

webkitで

@-webkit-keyframes animation00 {
    from {-webkit-transform:scale(1,1) rotate(0deg);}
    50% {-webkit-transform:scale(2,2) rotate(180deg);}
    to {-webkit-transform:scale(1,1) rotate(360deg);}
}
div#back {
    -webkit-animation:animation00 5s linear 0 100 normal none;
}

書き方

@-webkit-keyframes キーフレームの名前 {
    from { /*スタート 初期値 アニメーションさせたいやつ*/ }
    25% { /*アニメーションさせたいやつ*/ }
    50% { /*アニメーションさせたいやつ*/ }
    75% { /*アニメーションさせたいやつ*/ }
    to { /*最後 アニメーションさせたいやつ んでfromに戻る*/ }
}
div {
    -webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
}
/*
    name : キーフレーム名
    duration : 1アニメーションの時間（1秒なら 1s 0.5秒なら 0.5s）
    timing-function : linearとかeaseとかそんなの
    delay : 遅延時間（1秒なら 1s 0.5秒なら 0.5s）
    iteration-count : アニメートする回数
    direction : https://developer.mozilla.org/ja/CSS/animation-direction
    fill-mode : http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
*/

はい

http://www.takasumi-nagai.com/

Posted in html5 | コメントは受け付けていません。

coffeescriptインストール時にしくった

11月 8th, 2011

coffeescriptが流行ってるらしいのでさくらVPSにぶっこんでみた

npm install coffee-script

を叩いて、test.coffeeつくって

coffee test.coffee

とやると「coffeeなんてコマンドねぇぞ！」って言われる

nvmでnode.jsを管理しているから？ということで

npm install -g coffee-script

でインスコしたらでけた

そんだけっす。

Posted in JS | コメントは受け付けていません。

« Older Entries