sunflower

[태그:] JavaScript

  • 안드로이드 pointer-events 버그

    몇몇 안드로이드에서 touchstart 같은 touch전용 이벤트가 걸린 엘리먼트 위에 pointer-events: none;가 걸린 엘리먼트를 위에 띄울경우 touch이벤트가 안먹는 문제가 발생.

    (더 보기…)

  • 툴바 감추기?

    윤석찬님 블로그의 글 중 “검색은 멈추지 않는다!“라는 글에서 보이는 검색 통계를 보면 모바일 검색의 트래픽은 점심, 잠들기전 시간에 올라가는것을 볼수 있습니다. 점심을 먹으러 가서도 웹 페이지를 열고 검색을 하고 있다는 뜻이겠죠.

    모바일의 특성상 어디서든 사용할수 있지만, 느린 환경에서 사용할 경우도 많은데 검색을 하기 위해서 아래 컨텐츠까지 전부 로드 되는걸 기다리는건 시간, 트래픽 낭비라고 봅니다. 그렇기에 html만 로드된 상태서도 분명 검색이 가능해야 한다가 제 생각입니다.
    허나 현실은 그렇지 못하죠 좀 더 많이 보여주자는 기획때문인지 대부분의 포탈 사이트들은 아래와 같은 툴바를 감추는 소스(소스 자체는 틀릴수도 있습니다.)를 사용하고 있습니다.

    (더 보기…)

  • column을 이용한 vGrid따라하기

    요즘 유행하는 레이아웃 중 vGrid(이름이 맞는지 몰라서, jQuery플러그인 이름을 따랐습니다.)라는 레이아웃이 있습니다. jQuery플러그인으로 나온 뒤 많은 사이트에서 사용되고있는 멋진 레이아웃 방법이라고 생각합니다.

    이 레이아웃 방식은 박스별로 float을해서 코딩을 하면 position으로 바꿔서 알맞는 위치에 담아주는게 핵심이라고 생각합니다. 문제는 유동적인 박스때문에 javascript를 이용하지 않으면 방법이 없었지만, css3의 속성 중 column을 이용하면 비슷하게나마 구현이 가능한듯합니다.

    익스에서는 column을 지원하지 않기 때문에 작동하지 않습니다.

    Demo

    height: 70px
    height: 50px
    height: 40px
    height: 60px
    height: 90px
    height: 100px

    column에 대해선 다른곳에서도 많이 다뤘기때문에 설명 드리지 않겠습니다.

    문제는 div의 높이가 정의 되있지만, column을 세개로 정확하게 나눠버린다는것 입니다.
    긴 div박스가 있다면 중간에 짤라서 다음 column에 이어서 보여주게 되는거죠 파이어폭스4 기준으로 붉은색 부분과 파란색 부분이 다음 칸으로 짤려서 올라간 걸 보실수 있습니다.

    해결방법

    파이어폭스, 오페라의 경우 div에 display속성을 바꿔주시면 해결이됩니다. 여러 속성르 테스트해보진 않았고. inline-block, table두가지 속성을 이용해서 테스트 해본결과 문제 없이 돌아갔습니다.
    webkit엔진을 사용하는 브라우저(사파리, 크롬)의 경우에는 더 확실한 방법을 제시해놨습니다. -webkit-column-break-before, -webkit-column-break-after, -webkit-column-break-inside를 이용해 문제를 해결 할수 있더군요.

    완성된 Demo

    height: 70px
    height: 50px
    height: 40px
    height: 60px
    height: 90px
    height: 100px

    완선된 Code

    [html]
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ko” lang=”ko”>
    <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title> new document </title>
    <style media=”screen, print” type=”text/css”>
    .vGrid { -moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:10px; -webkit-column-gap:10px; column-gap:10px; }
    .vGrid div { -webkit-column-break-before:always; display:inline-block; width:100%; margin-bottom:10px; background-color:#dadad9; }
    .vGrid .item1 { height:70px; }
    .vGrid .item2 { height:50px; }
    .vGrid .item3 { height:40px; background-color:red; }
    .vGrid .item4 { height:60px; }
    .vGrid .item5 { height:90px; background-color:blue; }
    .vGrid .item6 { height:100px; }
    </style>
    </head>
    <body>
    <div class=”vGrid”>
    <div class=”item1″>height: 70px</div>
    <div class=”item2″>height: 50px</div>
    <div class=”item3″>height: 40px</div>
    <div class=”item4″>height: 60px</div>
    <div class=”item5″>height: 90px</div>
    <div class=”item6″>height: 100px</div>
    </div>
    </body>
    </html>
    [/html]

    webkit의 버그?

    하위 div에 opacity값을 줄 경우 -webkit-column-break-before등이 동작하지 못하는 문제가 있습니다.
    다른 해결 방법이 있을지 모르겠지만..
    몇달간 찾아본 결과 opacity값을 빼는 방법 외에는 다른 방법을 아직 찾지 못했습니다.

    더 좋은 방법을 아신다면 피드백 부탁드립니다.ㅋ

  • mouseenter, mouseleave event

    mouseover, mouseout event는 마우스가 객체 위에 놓여졌을 때, 영역을 벗어낫을때 발생하는 event입니다.
    허나 이 event들은 객체에서 자식요소로 마우스를 이동해도 event가 발생하는 문제가 있습니다.
    아래의 예제처럼요.

    event :

    이런 문제를 회피하기 위해서 IE에서는 mouseenter, mouseleave 두 event가 존재합니다만, IE에서 밖에 실행이 되질 않아서 스크립트를 작성하는데 문제가 많더군요.
    jQuery.js, prototype.js같은 JavaScript Framework을 쓰면 좋겠지만 제 특성상 Framework을 못쓰는 경우가 많아서 ppk(책)에 있는 내용을 참조해서 만들어봤습니다.

    event :

    Code

    [js]
    function addEvent(element, type, callback) {
    var eventListener = function(element, event) {
    element.addEventListener(event, function(e) {
    var obj = e.relatedTarget;
    while (obj != element) {
    if (!obj) return callback.apply(this);
    obj = obj.parentNode;
    }
    return false;
    }, false);
    };

    if (element.addEventListener) {
    switch(type) {
    case 'mouseleave': eventListener(element, 'mouseout');
    break;
    case 'mouseenter': eventListener(element, 'mouseover');
    break;
    default : element.addEventListener(type, callback, false);
    break;
    }
    } else if (element.attachEvent) {
    element.attachEvent('on' + type, function() {
    callback.apply(element);
    });
    }
    }
    [/js]

    사용 방법

    mouseenter

    [js]
    //일반적인 사용법
    object.onmouseenter = function() {
    alert('mouseenter');
    };
    //addEvent를 이용한 방법
    addEvent(object, 'mouseenter', function() {
    alert('mouseenter');
    });
    [/js]

    mouseleave

    [js]
    //일반적인 사용법
    object.onmouseleave = function() {
    alert('mouseleave');
    };
    //addEvent를 이용한 방법
    addEvent(object, 'mouseleave', function() {
    alert('mouseleave');
    });
    [/js]

    실력이 많이 부족하다 보니 좋은방법인지까지는 모르겠습니다.
    더 좋은 방법을 아시거나 버그를 발견하신분은 꼭 알려주세요~