자객의눈물: JavaScript

레이블이 JavaScript인 게시물을 표시합니다. 모든 게시물 표시

2010년 7월 17일 토요일

로딩중 이미지 표시하기..

처리할 데이터나 이미지가 많아서 로딩이 느린 페이지에서 간단한 자바스크립트를 사용하여 로딩이미지를 표시하는 방법입니다.

페이지의 Body 시작부분과 끝부분에 다음 코드를 삽입하여 로딩이미지를 표시하여 줍니다.

<div style="text-align:center;"><IMG SRC="<?=$g4[path]?>/images/loadinfo.gif"></div>

</td></tr>

</table>

</TABLE>

</div>

본문내용

</div>

var loadingBar = document.getElementById("loadingBar");

var divLoadBody = document.getElementById("divLoadBody");

loadingBar.style.display = "none";

divLoadBody.style.display = "";

</SCRIPT>

위 코드가 작동하는 방법은 다음과 같습니다.

화면 전체를 검은 배경으로 가린 후 로딩이미지를 출력.
본문 내용이 화면에 표시되지 않도록 스타일 지정
본문 내용을 모두 불러들인 후 로딩 이미지를 제거하고 본문 내용이 보이도록 스타일 지정

마땅한 로딩 이미지가 없을때를 대비해 알아둘 사이트..

http://www.loadinfo.net

http://www.preloaders.net

위 사이트에서 여러 로딩 이미지중 하나를 선택하여 자신이 원하는 색상 크기로 설정 한 후 이미지로 다운받을 수 있습니다.

2010년 3월 10일 수요일

FAQ 목록 만들기

[code html]

첫 번째 질문입니다.: 첫 번째 답변입니다.
두 번째 질문입니다.: 두 번째 답변입니다.

[/code]

<HTML>
<HEAD>
<TITLE>BLUE-B</TITLE>
<script type="text/javascript">
var Book_Image_Width=200;
var Book_Image_Height=120;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1000; //1 second=1000
var Book_Vertical_Turn=0;

Book_Image_Sources=new Array(
"http://www.blueb.co.kr/SRC/javascript/image/img03.jpg","http://www.blueb.co.kr",
"http://www.blueb.co.kr/SRC/javascript/image/img04.jpg","http://www.blueb.co.kr",
"http://www.blueb.co.kr/SRC/javascript/image/img05.jpg","", //링크없으면 URL입력 안해도 됩니다.
"http://www.blueb.co.kr/SRC/javascript/image/img06.jpg","http://www.blueb.co.kr"
);

/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}

function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;

setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
</script>

<body onload="ImageBook()">
<div id="Book" style="position:relative"></div>

정해진 시간마다 내용이 바뀌는 소스

[code html]

[/code]

IE6 웹에서 png 투명파일 출력하기

Internet Explorer 7부터는 알파 PNG 이미지를 지원하기때문에 상관이 없지만 대다수가 아직 Internet Explorer 6 버전을 사용하고 있기에 종종 부자연스러운 이미지를 발견할 수 있다. 스크립트와 CSS를 이용하여 알파 PNG 이미지의 투명도를 설정할 수 있다. (ex.이미지의 클래스는 png24로 지정한다.)

다음과 같이 CSS를 정의한 후에 png 이미지의 클레스를 지정해 주면 png 파일도 웹에서 출력할 수 있다.

[code html]

[/code]

위 소스를 사용하여 페이지를 작성하였을 경우 비스타 운영체제에서 페이지를 리로드 할때마다 플래쉬가 보였다 안보였다 하는 문제가 발생한다.

이러한 문제로 익스7.0에서는 위 패치코드를 실행하지 않도록 수정하여보았다.
익스7.0에서부터는 png 파일을 패치없이 출력할 수 있으므로 7.0부터 적용되게 하였다.

[code javascript]function setPng24(obj) { var request_os = window.navigator.userAgent; var os_array = request_os.split(";"); if(os_array[1] != " MSIE 7.0") { obj.width=obj.height=1; obj.className=obj.className.replace(/png24/i,''); obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"; obj.src=''; } return ''; }[/code]

그림 크기가 제한 사이즈를 넘을때 출력 사이즈 조정하기

[code javascript]// HTML 로 넘어온 태그의 폭이 테이블폭보다 크다면 250폭을 적용한다. function resize_image() { var target = document.getElementsByName('target_resize_image[]'); var image_width = parseInt('250'); var image_height = 0; for(i=0; i image_width) { image_height = parseFloat(target[i].width / target[i].height); target[i].width = image_width; target[i].height = parseInt(image_width / image_height); target[i].style.width = ''; target[i].style.height = ''; } } } window.onload = resize_image;[/code]

가로로 스크롤 하는 이미지 소스

<div style="width:270px; height:77px; background-image:url(/images/scroll_room_bg.gif);">
<script language="javascript">
var htmlstr_m = "",
flag=true,
mouse=1,
speed=1,
wait=0,
temp=0,
m_amount=260,
m_left=84;

var ctnt=new Array(), i=0, j=0;

function startText_m() {
for (i=0; i<ctnt.length; i++) insertText_m(i);
window.setTimeout("scroll_m()",wait);
}

function scroll_m() {
if (mouse && flag) {
   for (i=0;i<ctnt.length;i++) {
temp++;
tmp = document.getElementById('scroll_area'+i).style;
tmp.left = parseInt(tmp.left) - 1;
if (parseInt(tmp.left) <= m_left*(-1)) {
   tmp.left = m_left*(ctnt.length-1);
}
if (temp>(m_amount-1)*ctnt.length) {
   flag=false;
   temp=0;
   window.setTimeout("flag=true;temp=0;",wait);
}
   }
}
window.setTimeout("scroll_m()",speed);
}

function insertText_m(i) {
htmlstr_m='<div style="left:'+((m_left)*i)+'px; width:'+(m_amount+0)+'px; position: absolute; top: 0px;padding:0 0 0 0" id="scroll_area'+i+'">\n';
htmlstr_m+=ctnt[i]+'\n'+'</div>\n';
document.write(htmlstr_m);
//alert(i + " " + htmlstr_m);
}
ctnt[0] = "<img src='/images/scroll_room1.gif' width='64' height='61' />";
ctnt[1] = "<img src='/images/scroll_room2.gif' width='64' height='61' />";
ctnt[2] = "<img src='/images/scroll_room3.gif' width='64' height='61' />";
ctnt[3] = "<img src='/images/scroll_room1.gif' width='64' height='61' />";
ctnt[4] = "<img src='/images/scroll_room2.gif' width='64' height='61' />";
ctnt[5] = "<img src='/images/scroll_room3.gif' width='64' height='61' />";
</script>
<div style="height: 64px; width: 260px; position: absolute; overflow:hidden; margin-top:6; margin-left:5;" onMouseover="mouse=0" onMouseout="mouse=1" id="scroll_div"><script language="Javascript">startText_m();</script></div>
</div>

마우스 오버에 따라 아래 내용이 바뀌는 소스

[code]

111

[/code]

jQuery를 이용한 소스로 변경
[code][/code]

불펌질 방지하기 스크립트

[code javascript]// Clipboard Copy Alert function contents_cp() { if (window.event) { window.event.returnValue = true; window.setTimeout('attach_kinref()', 25); } } function attach_kinref() { if (window.clipboardData) // IE { var txt = window.clipboardData.getData('Text'); txt = txt + '\r\n\r\nⓒ 스쿨, 무단 전재 및 재배포 금지\r\n<대한민국 저작권법에 따른 저작권을 행사합니다>\r\n\r\n'; var result = window.clipboardData.setData('Text', txt); } }[/code] <body oncopy="contents_cp()">
이 내용을 클립보드에 복사해서 에디터에 붙여넣기 해보세요<br>
이 내용을 클립보드에 복사해서 에디터에 붙여넣기 해보세요<br><br>
<TEXTAREA NAME="임시" ROWS="20" COLS="100">여기에 붙여넣기 해보세요</TEXTAREA>
</body>

내용 드레그 & 드롭하기

http://www.devira.com/dragdrop/dragdrop_e.htm

자바스크립트 숫자에 천단위 콤마찍기

[code javascript]function numchk(num) { num=new String(num); num=num.replace(/,/gi,""); return numchk1(num); } function numchk1(num) { var sign=""; if(isNaN(num)) { alert("숫자만 입력할 수 있습니다."); return 0; } if(num==0) { return num; } if(num<0) { num=num*(-1); sign="-"; } else { num=num*1; } num = new String(num) var temp=""; var pos=3; num_len=num.length; while (num_len>0) { num_len=num_len-pos; if(num_len<0) { pos=num_len+pos; num_len=0; } temp=","+num.substr(num_len,pos)+temp; } return sign+temp.substr(1); }[/code] [code javascript]function FormatNumber(nNum) { var sNum = ""; var len= 0; do { sNum = nNum % 10 + ((len++ % 3 == 0 && len > 1)?",":"") + sNum; } while( (nNum = Math.floor(nNum / 10)) > 0) return sNum; }[/code]

아이디 정규식 체크

3~12자의 영문 소문자와 숫자,특수기호(_)만 사용할 수 있도록 체크하는 자바스크립트입니다.
[code javascript]var isID = /^[a-z0-9_]{3,12}$/; if( !isID.test(str) ) { alert("아이디는 3~12자의 영문 소문자와 숫자,특수기호(_)만 사용할 수 있습니다."); return 0; }[/code]

다중 라디오버튼 선택 검사하기

[code javascript]function isRadioUnselected(theRadio) { for (var i=0; i < theRadio.length; i++) { if (theRadio[i].checked) return false; } return true; } }[/code]

함수 호출 방법
[code javascript]if(isRadioUnselected(document.inputUser.build_type1 ) == true ) { alert("라디오버튼이 선택되지 않았습니다."); return false; }[/code]

링크 오버시 상태표시줄 주소 감추기

* 첫번째 방법
[code javascript]function hidestatus() { window.status=''; return true; } if (document.layers) { document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); document.onmouseover=hidestatus; document.onmouseout=hidestatus; }[/code]

* 두번째 방법
[code javascript]function hidestatus(){ window.status=''; return true; } if (document.layers) { document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); document.onmouseover=hidestatus; document.onmouseout=hidestatus; }[/code]

스크립트 코드를 이쁘게 만들어주는 프로그램

jscisetup.exe

Javascript Code Improver

Cannot read your own Javascript code?
Cannot find that closing brace?
Lost all hope of making head or tail of the Javascript code inherited from your colleague?
Or just curious of how Javascript works?

Try Javascript Code Improver!

With Javascript Code Improver you are just one click away from making any Javascript clear, easily comprehensible and ready for printing thus saving the time you spend on editing, debugging and modifying it. Forget about all problems resulting from those illegible Javascripts!

Compare how the same piece of code looks before:

[code js] [/code]

and after processing by Javascript Code Improver:

[code js] [/code]

You can see the difference, can’t you?

The program’s flexible settings let you structure the code in any way you like. So, even if your Javascript code is pretty comprehensible, you can just give it more professional or just more pleasant feel.

So, download Javascript Code Improver now and test.

자객의눈물

2010년 7월 17일 토요일

로딩중 이미지 표시하기..

2010년 3월 10일 수요일

해상도에따라 Margin 조정하기

내용 높이에 따라 자동으로 늘어나는 iframe

FAQ 목록 만들기

책장 넘기는듯한 애니메이션을 보여주는 슬라이드 쇼

정해진 시간마다 내용이 바뀌는 소스

IE6 웹에서 png 투명파일 출력하기

그림 크기가 제한 사이즈를 넘을때 출력 사이즈 조정하기

가로로 스크롤 하는 이미지 소스

마우스 오버에 따라 아래 내용이 바뀌는 소스

불펌질 방지하기 스크립트

내용 드레그 & 드롭하기

자바스크립트 숫자에 천단위 콤마찍기

아이디 정규식 체크

다중 라디오버튼 선택 검사하기

링크 오버시 상태표시줄 주소 감추기

스크립트 코드를 이쁘게 만들어주는 프로그램

jscisetup.exe

Javascript Code Improver