창 크기 변경 감지, window size 구하기 javascript 2019. 12. 3. 11:07

var windowWidth = $( window ).width();
var windowHeight = $( window ).height();

창크기 바뀌는 것 감지 (확대 축소에도 적용됨.)
$( window ).resize(function() {

// 창 크기 바뀌면 할 것...

});

$(window).width()와 $(document).width() 차이
$(window).width --> 브라우저의 창너비
$(document).width --> 문서의 너비

'javascript' 카테고리의 다른 글

script 반복실행, 한번만 실행, 중지  (0) 2017.02.06
아이프레임 리사이즈  (0) 2013.08.12
스크립트 CDATA 처리  (0) 2013.06.19
Show tab  (0) 2013.04.19
팝업창 띄우기  (0) 2012.09.26
,
script 반복실행, 한번만 실행, 중지 javascript 2017. 2. 6. 16:36
setTimeout - 일정 시간 후 한번 실행

setInterval - 일정 시간마다 반복 실행

clearTimeout - 일정 시간 후 한번 실행하는 것을 중지

clearInterval - 일정시간마다 반복하는 것을 중단

setTimeout 
$(document).ready(function () 
{
    setTimeout(function()
    {
       alert("2초후 한번 실행됩니다.");
    },2000);
});



setInterval 
$(document).ready(function () 
{
    setInterval(function()
    {
       alert("2초마다 반복 실행됩니다.");
    },2000);
});



clearTimeout 
$(document).ready(function () 
{
    var testInterval = setInterval(function() {
        alert("2초마다 반복 실행됩니다.");
        },2000);
    
    setTimeout(function() {
        clearTimeout(testInterval);
    },7000);
});



저작자표시 (새창열림)

'javascript' 카테고리의 다른 글

창 크기 변경 감지, window size 구하기  (0) 2019.12.03
아이프레임 리사이즈  (0) 2013.08.12
스크립트 CDATA 처리  (0) 2013.06.19
Show tab  (0) 2013.04.19
팝업창 띄우기  (0) 2012.09.26
,
아이프레임 리사이즈 javascript 2013. 8. 12. 13:09

children.html

http://jeilog.cafe24.com/parent.html 참고

parent.html 부모 페이지
children.html 자식 페이지
resize.html 리사이징 파일 (빈 파일)
저작자표시 (새창열림)

'javascript' 카테고리의 다른 글

창 크기 변경 감지, window size 구하기  (0) 2019.12.03
script 반복실행, 한번만 실행, 중지  (0) 2017.02.06
스크립트 CDATA 처리  (0) 2013.06.19
Show tab  (0) 2013.04.19
팝업창 띄우기  (0) 2012.09.26
,
스크립트 CDATA 처리 javascript 2013. 6. 19. 10:49
// <![CDATA[



//]]> 
저작자표시 (새창열림)

'javascript' 카테고리의 다른 글

script 반복실행, 한번만 실행, 중지  (0) 2017.02.06
아이프레임 리사이즈  (0) 2013.08.12
Show tab  (0) 2013.04.19
팝업창 띄우기  (0) 2012.09.26
프린트 영역 설정  (0) 2012.09.13
,
Show tab javascript 2013. 4. 19. 13:14 
/*
 * 함수명 : showTab
 * 설명 : 탭 클릭 시 해당 콘텐츠 block 처리 
 * 사용법 : 탭 각각에 넣어줄 링크 - 
 			  첫번째값 탭을 감싸는 id, 두번째값 불러올 콘텐츠 영역 id의 영문명, 세번째값 두번째값불러올 콘텐츠 영역 id의 숫자
 */
var showTab = function(tabName,contId,num){
	var last = $("#"+tabName+">li").length;  //tab 개수

	for(var i=1; i<=last;i++){
		if (i == num){
			var order = num-1;
			var $eqImg = $("#"+tabName+">li").eq(order).find("img");
			$("#"+contId+num).css("display","block").attr("tabindex","0").focus().css("outline","0").removeAttr("tabindex"); //활성화된 탭으로 포커스 이동, div등은 포커스 가능한 엘리먼트가 아니므로 tabindex=0으로 포커스가 가능하게 하고 포커스 직흐 탭인덱스 속성 제거
			$eqImg.attr("src",$eqImg.attr("src").replace("_off","_on"));
			$("#"+contId+num).find(":focusable:last").bind("keydown",function(e){
				 if(e.keyCode == 9 && !e.shiftKey && num != last){
					 $("#"+tabName).find(">li").eq(num-1).find("a").focus();
		         }
			 });
		} else {
			var order2 = i-1;
			var $tabImg = $("#"+tabName+">li").eq(order2).find("img");
			$("#"+contId+i).css("display","none");
			$tabImg.attr("src",$tabImg.attr("src").replace("_on","_off"));
		}
	}
};

HTML
<ul class="tab_menu" id="boardTab">
    <li><a href="#" onclick="showTab('boardTab','contTab','1'); return false;"><img src="${IMAGE_URL}/dutyfree/common/tab_01_on.gif" alt="notice" /></a></li>
    <li><a href="#" onclick="showTab('boardTab','contTab','2'); return false;"><img src="${IMAGE_URL}/dutyfree/common/tab_02_off.gif" alt="event" /></a></li>
</ul>
<div class="tab_01" id="contTab1">
    <h3 class="blind">공지사항</h3>
</div>
<div class="tab_02" id="contTab2" style="display:none;>
    <h3 class="blind">공지사항</h3>
</div>


저작자표시 (새창열림)

'javascript' 카테고리의 다른 글

아이프레임 리사이즈  (0) 2013.08.12
스크립트 CDATA 처리  (0) 2013.06.19
팝업창 띄우기  (0) 2012.09.26
프린트 영역 설정  (0) 2012.09.13
radio 선택에 따른 스타일 활성/비활성  (0) 2012.09.13
,
팝업창 띄우기 javascript 2012. 9. 26. 14:38 
<script type="text/javascript">
/*
 * 함수명 : openWin
 * 설명 : 새창 팝업
 * 사용법 :onclick="openWin('경로','가로사이즈','세로사이즈'); return false;"
 */
function openWin(url,intWidth,intHeight) {
	window.open(url, "_blank", "width="+intWidth+",height="+intHeight+",resizable=1,scrollbars=0") ;
}

function openWin1(url,intWidth,intHeight) {
	window.open(url, "_blank", "width="+intWidth+",height="+intHeight+",resizable=1,scrollbars=1") ;
}
</script>

<a href="javascript:openWin('pop_multi_form.html','700','400');">팝업창 띄우기</a>

'javascript' 카테고리의 다른 글

스크립트 CDATA 처리  (0) 2013.06.19
Show tab  (0) 2013.04.19
프린트 영역 설정  (0) 2012.09.13
radio 선택에 따른 스타일 활성/비활성  (0) 2012.09.13
팝업창닫기 링크  (0) 2012.09.13
,
프린트 영역 설정 javascript 2012. 9. 13. 10:03

HTML 소스

<a href="#" onclick="popPrintPreview('printHowmuch'); return false;">결과 출력하기</a>
<div id="printHowmuch">출력될 영역</div>

javascript

/*
 * 함수명 : popPrintPreview
 * 설명 : 특정 UI 영역에 대해 인쇄 미리보기 팝업을 띄움
 * 사용법 :팝업을 띄우고 싶은 영역에 id값 부여 후 popPrintPreview(id)로 호출
*/
function popPrintPreview(id){
	var docHeight = parseInt(jQuery("#" + id).outerHeight());
	var docWidth = parseInt(jQuery("#" + id).outerWidth());
	jQuery("#" + id).wrap('<div id="printArea" />');
	var thisHtml = jQuery("#printArea").html();
	htmlA = '<!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"><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><title>인쇄 미리보기</title><link href="/css/fr/base.css" rel="stylesheet" type="text/css"  media="all" /><style type="text/css">a {cursor:default;} .section {margin-top:0}</style></head><body style="padding:10px; cursor:default" onclick="return false;">' + thisHtml + '<script type="text/javascript">window.print();</script></body></html>'; 
	printPop(htmlA,docWidth,docHeight);
}
function printPop(iVal,w,h){
	var popW = w + 20;
	var popH = '';
	var scr = '';
	if(h < 600){
		popH = h + 20;
		scr = 'no';
	}else{
		popH = 600;
		scr = 'yes';
		popW = popW + 17;
	}
	var iWindow = window.open('','WIN','scrollbars=' + scr + ', width='+ popW +', height=' + popH + ', location=no, menubar=no, status=no')
	iWindow.focus(); 
	iWindow.document.open(); 
	iWindow.document.write(iVal); 
	iWindow.document.close();
}


'javascript' 카테고리의 다른 글

Show tab  (0) 2013.04.19
팝업창 띄우기  (0) 2012.09.26
radio 선택에 따른 스타일 활성/비활성  (0) 2012.09.13
팝업창닫기 링크  (0) 2012.09.13
뒤로가기  (0) 2012.09.13
,
radio 선택에 따른 스타일 활성/비활성 javascript 2012. 9. 13. 09:33

javascript 소스

<script type="text/javascript">
function changeForm(i){
    var eqNum = i-1;
 
    jQuery(".real_recom_choice>a").removeClass("on");
    jQuery(".real_recom_choice>a").eq(eqNum).addClass("on");
}
</script>

html 소스

<div class="real_recom_choice">
    <a href="#" class="on">
        <label for="radio1">첫번째탭</label>
        <input type="radio" name="formChange" id="radio1" value="radio1" class="radio" checked="checked" onclick="changeForm(1);" />
    </a>
    <a href="#">
        <label for="radio2">두번째탭</label>
        <input type="radio" name="formChange" id="radio2"  value="radio2" class="radio"  onclick="changeForm(2);"/>
    </a>
</div>


'javascript' 카테고리의 다른 글

팝업창 띄우기  (0) 2012.09.26
프린트 영역 설정  (0) 2012.09.13
팝업창닫기 링크  (0) 2012.09.13
뒤로가기  (0) 2012.09.13
iframe 높이 자동 리사이징  (0) 2012.09.07
,
팝업창닫기 링크 javascript 2012. 9. 13. 09:14 
<a href="javascript:self.close();">닫기</a>


'javascript' 카테고리의 다른 글

팝업창 띄우기  (0) 2012.09.26
프린트 영역 설정  (0) 2012.09.13
radio 선택에 따른 스타일 활성/비활성  (0) 2012.09.13
뒤로가기  (0) 2012.09.13
iframe 높이 자동 리사이징  (0) 2012.09.07
,
뒤로가기 javascript 2012. 9. 13. 09:12 
<a href="javascript:history.go(-1);">뒤로가기</a>


'javascript' 카테고리의 다른 글

팝업창 띄우기  (0) 2012.09.26
프린트 영역 설정  (0) 2012.09.13
radio 선택에 따른 스타일 활성/비활성  (0) 2012.09.13
팝업창닫기 링크  (0) 2012.09.13
iframe 높이 자동 리사이징  (0) 2012.09.07
,

티스토리툴바