방금전의 글에 적힌 위젯 제작자가 원하시던 기능을 왠만한 브라우저에서도 작동하게 만들어 본거.

http://yks118.dothome.co.kr/jQuery/index.php

음..

이 테스트 페이지 잘 써먹네..

페이지를 열어보시면 아시겠지만, 문서의 오른쪽에 딱 달라붙어 있는 우리 니코를 볼 수 있습니다.

1. IE6

위에가 큰화면 아래가 작은화면.
참고로 IE6에서는 png의 투명이 적용이 안되는데..
적용하기가 귀찮아서 패스..

2. IE7

3. IE8

4. FF

5. 크롬

6. 사파리

여러분도 더도말고 덜도말고..

웹표준 2.0 코딩을 한달만 배우면 누구나 저정도는 가능합니다.

랄까..

저거 jQuery지만..
(현 jQuery 배운지 1주일정도 됬던가?)

참고로 IE9는 테스트 안했습니다.
(그렇다는건 IE9에서 터진다는 소리겠지.. 랄까 회사에서 IE9는 테스트 안하기에, IE9의 특징은 모르지만..)

ps. 사실 IE6에서는 위치를 고정시키는 CSS인 fixed가 지원되지 않습니다.
그런데, 웹코딩 초보자가 특정 위치에 고정을 시켰다는건 CSS를 사용했다는거겠지요.
그리고 터지는 IE6 !
(현재 우리나라 IE6 점유율이 얼마더라.. IE9에서 터진다는 제보보다 IE6에서 터진다는 제보가 훨~씬 많다는걸 보면 우리나라는 아직 IE6이 강세. 그리고 필자를 가장 미치게하는 익스플러러가 IE6. 항상 얘가 문제야.)

ps2. 대충 2시간동안 날림으로 만든 코드.
그 뭐냐..
무한 스크롤을 방지하기 위해서, 화면과 캐릭터 이미지를 비교해서, 캐릭터 이미지가 더 클 경우 자동으로 리사이징 해버립니다.
참고로 화면의 크기가 변경될때 자동으로 리사이징 안되고 리플레시(새로고침) 되어야 아래의 코드를 읽기때문에 새로고침 없이 화면 줄이기만 하면 터집니다.
(이건 알아서 추가하세요. 12시네 나 잘거야.)

참고로 캐릭터는 화면의 하단.
문서의 오른쪽에 붙습니다.
(설정 몇가지 잡아주면 알아서 다 작동을 합니다. 그렇게 코딩했으니.. 하지만 네이버 블로그에서 재대로 작동할지는 의불.)

<div id="widget" class="" style=""><img src="이미지 주소" /></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        $(function(){
            t_height = $(document.body).scrollTop();
            b_width = $(document).width();
            w_height = $(window).height();
            c_width = 캐릭터 가로 길이;
            c_height = 캐릭터 세로 길이;
            d_height = 현재 보이는 문서의 높이;
            index = 1;
            if (w_height > c_height) {
                b_width = b_width - c_width;
                height = w_height - c_height - 20;
                $("#widget").css({top:height, left:b_width, 'z-index':index, position:"absolute"});
                var currentPosition = parseInt($("#widget").css("top"));
                $(window).scroll(function() {
                    var position = $(window).scrollTop();
                    $("#widget").stop().animate({"top":position+currentPosition+"px"},1000);
                });
            } else {
                c_height = c_height * (w_height / d_height);
                c_width = c_width * (w_height / d_height);
                b_width = b_width - c_width;
                height = w_height - c_height;
                $("#widget").find("img").css({height:c_height,width:c_width});
                $("#widget").css({top:height, left:b_width, 'z-index':index, position:"absolute"});
                var currentPosition = parseInt($("#widget").css("top"));
                $(window).scroll(function() {
                    var position = $(window).scrollTop();
                    $("#widget").stop().animate({"top":position+currentPosition+"px"},1000);
                });
            }
        });
</script>

ps3. 간만에 칼퇴근해서 이걸 만들었네..
후우..

내일부터 프로그램 개발인데..
후우..

여담으로..
CSS나 jQuery 간단한거 정리해서 강좌로 올려볼까 생각중.