함수 호출 시 ajax로 리턴값 받기

JAVASCRIPT 2016. 1. 29. 11:43 Posted by Dayis

1. 지역변수를 통해 리턴한다. (success 내에서 리턴하면 안됨)

2. async: false 속성 사용


<script type="text/javascript">

<!--

function AAA(){

var r = "";


$.ajax({

url:...

async: false,

success: function(result){

r = false;

}

});


return r;

}

//-->

</script>


jQuery-rwdImageMaps-master.zip


출처 : https://github.com/stowball/jQuery-rwdImageMaps


<!-- 사용방법 -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="jquery.rwdImageMaps.min.js"></script>

<script type="text/javascript">

<!--

$(document).ready(function(e) {

    $('img[usemap]').rwdImageMaps();

});

//-->

</script>

'JAVASCRIPT' 카테고리의 다른 글

함수 호출 시 ajax로 리턴값 받기  (0) 2016.01.29
iframe 자동 높이 조절  (0) 2015.10.19
마우스 클릭 위치 좌표값  (0) 2015.08.21
Datepicker 설정  (0) 2015.07.23
즐겨찾기 추가 스크립트  (0) 2015.07.18

iframe 자동 높이 조절

JAVASCRIPT 2015. 10. 19. 21:15 Posted by Dayis

여태까지 iframe 높이를 자동으로 적용되는 소스를 많이 봐왔지만 거의 실패했습니다.

특히 제로보드 같은 게시판을 불러오면 아무래도 jQuery 나 Javascript 에서 충돌이 일어나 적용이 잘 안됐는데 이번에 완전 제대로 된것을 찾았습니다.

 

<body>에 <iframe> 넣을 곳에 아래와 같은 소스를 넣어주면 됩니다.

참고로 주의하실 점은 iframe 태그 밑에 스크립트 소스를 넣어주셔야 작동됩니다.

 

<iframe id="board" width="100%" scrolling="no" src="페이지주소" frameborder="0"></iframe>

<script>
 function resize_frame(id) {

 var frm = document.getElementById("board");

 function resize() {

 var ms_ie = false;

  var ua = window.navigator.userAgent;

  var old_ie = ua.indexOf('MSIE ');

  var new_ie = ua.indexOf('Trident/');

 

  if ((old_ie > -1) || (new_ie > -1)) {

   ms_ie = true;

  }

 

  if ( ms_ie ) {

   //IE specific code goes here

  var iframeHeight=frm.contentWindow.document.body.scrollHeight;

  frm.height=iframeHeight+20;

  }else{

  frm.style.height = "auto"; // set default height for Opera

  contentHeight = frm.contentWindow.document.documentElement.scrollHeight;

  frm.style.height = contentHeight + 23 + "px"; // 23px for IE7

  }

 }

 if (frm.addEventListener) {

 frm.addEventListener('load', resize, false);

 } else {

 frm.attachEvent('onload', resize);

 }

}

resize_frame('board'); 
</script>

 

 

일단 위의 소스를 붙여넣으셔서 테스트를 해보세요.

여기까지 진행하셔서 잘 되셨다면 문제가 없습니다.

아래 소스는 건드릴 필요가 없습니다.

 

 

 

 

만약!!!!!!!!!!!!!!

제로보드4의 DQ갤러리를 사용하다 보면 사진을 업로드 하는 플래시 때문에 아래로 더 이상 안내려 간다면 아래의 소스를 <head>에 추가해서 삽입하세요.

 

<script type="text/javascript">

window.onload = function() {
    var lastHeight = 0;
    var curHeight = 0;
    var targetFrame = document.getElementById('board'); // iframe id 입력
 
    targetFrame.onload = function(){
        curHeight = targetFrame.contentWindow.document.body.scrollHeight + 'px';
        targetFrame.style.height = curHeight;
    }
 

    setInterval(function(){
            curHeight = targetFrame.contentWindow.document.body.scrollHeight + 'px';
            if ( curHeight != lastHeight ) {
              targetFrame.style.height = curHeight;
              lastHeight = curHeight;
            }
    },500);
            

</script>

 

 

 

 

출처 : http://sir.co.kr/qa/?wr_id=50479

출처 : http://blog.naver.com/justerkr/220106272136

마우스 클릭 위치 좌표값

JAVASCRIPT 2015. 8. 21. 15:37 Posted by Dayis

function xypos(){ 

var ua = window.navigator.userAgent;

if (ua.indexOf('Chrome') != -1) {

posX = document.body.scrollLeft+event.clientX; 

posY = document.body.scrollTop+event.clientY; 

} else {

posX = document.documentElement.scrollLeft+event.clientX; 

posY = document.documentElement.scrollTop+event.clientY; 

}


※ IE는 body를 인식 못 하고, Chorme은 documentElement를 인식 못 함~!!!

Datepicker 설정

JAVASCRIPT 2015. 7. 23. 04:38 Posted by Dayis

 $(".datepicker").datepicker({

  showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다.

  buttonImage: "/application/db/jquery/images/calendar.gif", // 버튼 이미지

  buttonImageOnly: true, // 버튼에 있는 이미지만 표시한다.

  changeMonth: true, // 월을 바꿀수 있는 셀렉트 박스를 표시한다.

  changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스를 표시한다.

  minDate: '-100y', // 현재날짜로부터 100년이전까지 년을 표시한다.

  nextText: '다음 달', // next 아이콘의 툴팁.

  prevText: '이전 달', // prev 아이콘의 툴팁.

  numberOfMonths: [1,1], // 한번에 얼마나 많은 월을 표시할것인가. [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다.

  //stepMonths: 3, // next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가. 

  yearRange: 'c-100:c+10', // 년도 선택 셀렉트박스를 현재 년도에서 이전, 이후로 얼마의 범위를 표시할것인가.

  showButtonPanel: true, // 캘린더 하단에 버튼 패널을 표시한다. 

  currentText: '오늘 날짜' , // 오늘 날짜로 이동하는 버튼 패널

  closeText: '닫기',  // 닫기 버튼 패널

  dateFormat: "yy-mm-dd", // 텍스트 필드에 입력되는 날짜 형식.

  showAnim: "slide", //애니메이션을 적용한다.

  showMonthAfterYear: true , // 월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다. 

  dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], // 요일의 한글 형식.

  monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] // 월의 한글 형식.

                    

 });

'JAVASCRIPT' 카테고리의 다른 글

iframe 자동 높이 조절  (0) 2015.10.19
마우스 클릭 위치 좌표값  (0) 2015.08.21
즐겨찾기 추가 스크립트  (0) 2015.07.18
입력폼에서 엔터키를 눌렀을 때..  (0) 2015.07.12
숫자만 입력  (0) 2015.03.16

즐겨찾기 추가 스크립트

JAVASCRIPT 2015. 7. 18. 18:01 Posted by Dayis

<script type="text/javascript"> 

function bookmarksite(title,url) { 

var agent = navigator.userAgent.toLowerCase();


if((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1)) {

window.external.AddFavorite(url, title); 

} else if (window.chrome) {

alert("Ctrl+D키를 누르시면 즐겨찾기에 추가하실 수 있습니다.");

} else if (window.sidebar) {

window.sidebar.addPanel(title, url, ""); 

} else if(window.opera && window.print) {

var elem = document.createElement('a'); 

elem.setAttribute('href',url); 

elem.setAttribute('title',title); 

elem.setAttribute('rel','sidebar'); 

elem.click(); 

}

</script>


<a href="javascript:bookmarksite('사이트이름', '사이트URL')">즐겨찾기</a>


'JAVASCRIPT' 카테고리의 다른 글

마우스 클릭 위치 좌표값  (0) 2015.08.21
Datepicker 설정  (0) 2015.07.23
입력폼에서 엔터키를 눌렀을 때..  (0) 2015.07.12
숫자만 입력  (0) 2015.03.16
유튜브(Youtube) 동영상 로드, 종료 이벤트 API  (0) 2015.01.13

입력폼에서 엔터키를 눌렀을 때..

JAVASCRIPT 2015. 7. 12. 21:11 Posted by Dayis

<input type="text" name="searchWord" value="" size="25" value=태그인넷 tagin.net 
onKeyDown="javascript:if (event.keyCode == 13) search_check();"> 
->search_check 함수 실행

<input type="text" name="searchWord" value="" size="25" value=태그인넷 tagin.net 
onKeyDown="javascript:if (event.keyCode == 13) return false;">
->아무것도 실행안되게 하기.. 엔터키쳐도 무반응

13은 엔터키의 키코드값입니다.

'JAVASCRIPT' 카테고리의 다른 글

Datepicker 설정  (0) 2015.07.23
즐겨찾기 추가 스크립트  (0) 2015.07.18
숫자만 입력  (0) 2015.03.16
유튜브(Youtube) 동영상 로드, 종료 이벤트 API  (0) 2015.01.13
jquery 이미지 슬라이드  (0) 2014.12.25

숫자만 입력

JAVASCRIPT 2015. 3. 16. 17:58 Posted by Dayis
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>input 필드에 오직 숫자만 입력 받기</title>
</head>
<body>
    <h1>input 필드에 오직 숫자만 입력 받기</h1>
    <form>
        <p><input type="text" onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)' style='ime-mode:disabled;'></p>
    </form>
    <script>
        function onlyNumber(event){
            event = event || window.event;
            var keyID = (event.which) ? event.which : event.keyCode;
            if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
                return;
            else
                return false;
        }
        function removeChar(event) {
            event = event || window.event;
            var keyID = (event.which) ? event.which : event.keyCode;
            if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
                return;
            else
                event.target.value = event.target.value.replace(/[^0-9]/g, "");
        }
    </script>
</body>
</html>

원본 : http://webskills.kr/archives/310


'JAVASCRIPT' 카테고리의 다른 글

즐겨찾기 추가 스크립트  (0) 2015.07.18
입력폼에서 엔터키를 눌렀을 때..  (0) 2015.07.12
유튜브(Youtube) 동영상 로드, 종료 이벤트 API  (0) 2015.01.13
jquery 이미지 슬라이드  (0) 2014.12.25
jquery 타이머  (0) 2014.12.25

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>

<script>

// Create youtube player

var player;


// videoId : 공유URL(http://youtu.be/UaY9xbHmVAc)에서 'http://youtu.be'만 제거한 아이디

// playerVars : autoplay-자동시작, controls-하단컨트롤 사용여부, html5-html5 사용여부

function onYouTubePlayerAPIReady() {

player = new YT.Player('player', {

height: '480',

width: '853',

videoId: 'UaY9xbHmVAc',

playerVars: { 'autoplay': 1, 'controls': 1, 'html5': 1 },

events: {

'onReady': onPlayerReady,

'onStateChange': onPlayerStateChange

}

});

}


// autoplay video

function onPlayerReady(event) {

//동영상 로드가 끝난 후 이벤트 

alert("동영상 로드");

}


// when video ends

function onPlayerStateChange(event) {        

if(event.data === 0) {

//동영상 끝난 후 이벤트 

alert("영상 끝");

}

}

</script>

'JAVASCRIPT' 카테고리의 다른 글

입력폼에서 엔터키를 눌렀을 때..  (0) 2015.07.12
숫자만 입력  (0) 2015.03.16
jquery 이미지 슬라이드  (0) 2014.12.25
jquery 타이머  (0) 2014.12.25
[jQuery] window와 document 비교  (0) 2013.07.09

jquery 이미지 슬라이드

JAVASCRIPT 2014. 12. 25. 04:00 Posted by Dayis


index.html

파일첨부

'JAVASCRIPT' 카테고리의 다른 글

숫자만 입력  (0) 2015.03.16
유튜브(Youtube) 동영상 로드, 종료 이벤트 API  (0) 2015.01.13
jquery 타이머  (0) 2014.12.25
[jQuery] window와 document 비교  (0) 2013.07.09
날씨 API  (0) 2013.07.03