나의 즐겨찾기 | 블로그홈 | 바로가기 바로가기 | 로그인
동유럽은 언제 가나~~ 올해 책 100권 읽는다!!!
블로그  |  사진갤러리  |  동영상갤러리 방명록  |   즐겨찾기 추가
처음처럼 (junetee97)
프로필     
 인기도 :
 이 블로그 점수주기
전체 글보기(158)
일상, 그 소소한 일들
책/그림/영화/공연
경제/재테크
요리
php
DB/mysql
xml/ajax
자바스크립트/html
기타 팁들
설문
백만가지 주제
HanRSS 로 구독하기Fish 로 구독하기
 즐겨찾기
 즐겨찾기 글모음
개설일 : 2005/11/17
 

[Script] SelectBox와 레이어 겹침시 z-index 문제 해결

2006.11.22 17:26 | 자바스크립트/html | 처음처럼

http://kr.blog.yahoo.com/junetee97/143 주소복사

<script language='JavaScript '>
    // Internet Explorer에서 셀렉트박스와 레이어가 겹칠시 레이어가 셀렉트 박스 뒤로 숨는 현상을 해결하는 함수
    // 레이어가 셀렉트 박스를 침범하면 셀렉트 박스를 hidden 시킴
    // 사용법 :
    // <div id=LayerID style="display:none; position:absolute;" onpropertychange="selectbox_hidden('LayerID')">
    function selectbox_hidden(layer_id)
    {
        var ly = eval (layer_id);

        // 레이어 좌표
        var ly_left  = ly.offsetLeft;
        var ly_top    = ly.offsetTop;
        var ly_right  = ly.offsetLeft + ly.offsetWidth;
        var ly_bottom = ly.offsetTop + ly.offsetHeight;

        // 셀렉트박스의 좌표
        var el;

        for (i=0; i<document.forms.length; i++) {
            for (k=0; k<document.forms[i].length; k++) {
                el = document.forms[i].elements[k];   
                if (el.type == "select-one") {
                    var el_left = el_top = 0;
                    var obj = el;
                    if (obj.offsetParent) {
                        while (obj.offsetParent) {
                            el_left += obj.offsetLeft;
                            el_top  += obj.offsetTop;
                            obj = obj.offsetParent;
                        }
                    }
                    el_left  += el.clientLeft;
                    el_top    += el.clientTop;
                    el_right  = el_left + el.clientWidth;
                    el_bottom = el_top + el.clientHeight;

                    // 좌표를 따져 레이어가 셀렉트 박스를 침범했으면 셀렉트 박스를 hidden 시킴
                    if ( (el_left >= ly_left && el_top >= ly_top && el_left <= ly_right && el_top <= ly_bottom) ||
                        (el_right >= ly_left && el_right <= ly_right && el_top >= ly_top && el_top <= ly_bottom) ||
                        (el_left >= ly_left && el_bottom >= ly_top && el_right <= ly_right && el_bottom <= ly_bottom) ||
                        (el_left >= ly_left && el_left <= ly_right && el_bottom >= ly_top && el_bottom <= ly_bottom) )
                        el.style.visibility = 'hidden';
                }
            }
        }
    }

    // 감추어진 셀렉트 박스를 모두 보이게 함
    function selectbox_visible()
    {
        for (i=0; i<document.forms.length; i++) {
            for (k=0; k<document.forms[i].length; k++) {
                el = document.forms[i].elements[k];   
                if (el.type == "select-one" && el.style.visibility == 'hidden')
                    el.style.visibility = 'visible';
            }
        }
    }
<script language='JavaScript '>

출처 : Tong - ♡우정♡님의 Web Programing통

댓글쓰기

댓글쓰기 입력폼

포스트 목록 닫기

목록보기
 
2009 12월
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
오늘 전체
방문자 14 46895
구독자 0 2
댓글 0 18
참조글 0 41
최근 댓글 전체보기
감사합니다.........
옆으로 너무 길어 -ㅅ..
잘보고 갑니다. 좋은글..
넵~~
잘 보고 가여...
최근 참조글 전체보기
Finasteride.
3세대 검색엔진
다녀간 블로거 더보기
- adam
- 잎새소리
- 미서619
- kssm2003
- desj00