"javascript, jQuery"에 해당되는 글 - 18건

Post

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과

[ javascript, jQuery ] 2019. 4. 9. 10:10

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과입니다~!

※참조
[다음페이지] / [이전페이지] 를 눌렀을때만 작동합니다~!

 

pagemotion.zip
0.14MB

'javascript, jQuery' 카테고리의 다른 글

INPUT TYPE FILE 파일명 추출  (0) 2019.04.09
JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05

Post

INPUT TYPE FILE 파일명 추출

[ javascript, jQuery ] 2019. 4. 9. 09:47

input type file을 jQuery를 이용하여 파일명을 추출하는 방법입니다.

 

<div class="file_box">

    <input type="file" name="" id="" value="" title="">

    <p class="file_name">파일명이 없습니다.</p>

</div>




파일명이 없습니다

'javascript, jQuery' 카테고리의 다른 글

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과  (0) 2019.04.09
JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05

Post

JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리

[ javascript, jQuery ] 2019. 1. 31. 11:02

Javascript 나 jQuery 에서 지금도 높이, 너비 구할 때 아직도 헷갈릴 때가 있다.

그래서 다음과 같이 정리해 본다.

JavaScript에서 요소의 크기 구하기

1
2
3
var element = document.getElementById('content');
var h = element.clientHeight;
var w = element.clientWidth;
cs

높이
- clientHeight : padding을 포함한 높이
- scrollHeight : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 높이
- offsetHeight : border, padding, 스크롤 바를 포함한 높이

너비
- clientWidth : padding을 포함한 폭
- scrollWidth : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 폭
- offsetWidth : border, padding, 스크롤 바를 포함한 폭


윈도우 사이즈
window.innerWidth :  스크롤 바를 포함하지 않는 창 너비
window.innerHeight : 스크롤 바를 포함하지 않은 창 높이
window.outerWidth : 스크롤 바를 포함, 창의 너비
window.outerHeight :  스크롤 바를 포함한  창의 높이


jQuery에서 요소의 크기 구하기

높이
- .height() : 요소 높이만
- .innerHeight() : 요소의 padding을 포함한 높이
- .outerHeight() :  요소의 border, padding 포함한 높이
- .outerHeight(true) : 요소의 margin, border, padding 포함한 높이

너비
- .width() : 요소의 폭만
- .innerWidth() : 요소의 padding을 포함한 폭  
- .outerWidth() : 요소의 border, padding을 포함한 폭
- .outerWidth(true) :  요소의 margin, border, padding을 포함한 폭

만약 요소의 display:none; 일 때 높이 사이즈 취득 여부

 구할 수 없는 것 구할 수 있는 것 
 offsetHeight height 
 clientHeight innerHeight 
  outerHeight


'javascript, jQuery' 카테고리의 다른 글

다음페이지 넘어갈때 컨텐츠가 안보이게 하는 효과  (0) 2019.04.09
INPUT TYPE FILE 파일명 추출  (0) 2019.04.09
video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05

Post

video태그 제어

[ javascript, jQuery ] 2018. 12. 5. 14:29
// 영상 재생/정지
var myAudio = $('#video');
function aud_play_pause() {
if (myAudio[0].paused) {
myAudio[0].play();
$('.btnPlay').css('background-position-y','-30px');
} else {
myAudio[0].pause();
$('.btnPlay').css('background-position-y','0');
}
}


// 영상 전체 시간
myAudio.on('loadedmetadata',function(){
videoTime = parseInt(myAudio[0].duration);
m = Math.floor(videoTime / 60) + ":" + (videoTime % 60);  // 남은 시간 계산
$('.duration').text(m);
});

// 현재 진행 시간
myAudio.on('timeupdate', function() {
var currentPos = myAudio[0].currentTime; //Get currenttime
var maxduration = myAudio[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage+'%');
});


'javascript, jQuery' 카테고리의 다른 글

INPUT TYPE FILE 파일명 추출  (0) 2019.04.09
JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05
숫자만 입력가능  (0) 2018.06.12

Post

타이머 스크립트

[ javascript, jQuery ] 2018. 8. 21. 16:21

<html>

<head>

<title>Timer</title>


<script language="JavaScript">

var SetTime = 5; // 최초 설정 시간(기본 : 초)


function msg_time() { // 1초씩 카운트

m = Math.floor(SetTime / 60) + "분 " + (SetTime % 60) + "초"; // 남은 시간 계산

var msg = "현재 남은 시간은 <font color='red'>" + m + "</font> 입니다.";

document.all.Timer.innerHTML = msg; // div 영역에 보여줌 

SetTime--; // 1초씩 감소

if (SetTime < 0) { // 시간이 종료 되었으면..

clearInterval(tid); // 타이머 해제

alert("종료");

}

}


window.onload = function TimerStart(){ tid=setInterval('msg_time()',1000) };

</script>


</head>


<body >

<div id="Timer"></div>


</body>

</html>



'javascript, jQuery' 카테고리의 다른 글

JavaScript, jQuery 에서 높이, 너비 구하는 방법 정리  (0) 2019.01.31
video태그 제어  (0) 2018.12.05
select 제어  (0) 2018.08.05
숫자만 입력가능  (0) 2018.06.12
자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31

Post

select 제어

[ javascript, jQuery ] 2018. 8. 5. 18:24

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("#select_box > option:selected").val()

$("select[name=name]").val();

 

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

 

선택된 위치

var index = $("#test option").index($("#test option:selected"));

 

-------------------------------------------------------------------

 

// 맨마지막에 option 추가

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

 

// 맨 앞에 option 추가

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

 

// select 옵션 전체 변경

$("#selectBox")

.html("<option value='1'>oranges</option><option value='2'>Oranges</option>");

 

// Replace items at a certain index

$("#selectBox option:eq(1)")

.replaceWith("<option value='2'>apples</option>");

$("#selectBox option:eq(2)")

.replaceWith("<option value='3'>bananas</option>");

 

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").attr("selected", "selected");

 

// text 값으로 select 하기

$("#selectBox").val("Some oranges").attr("selected", "selected");

 

// value 값으로 select 하기

$("#selectBox").val("2");

$("#selectBox > option[@value=지정값]").attr("selected", "true");

 

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

 

// 첫번째 item 삭제

$("#selectBox option:first").remove();

 

// 마지막 item 삭제

$("#selectBox option:last").remove();

 

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

 

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

 

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

 

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

 

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

 

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

 

// 0번째 item 다음에 삽입

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

 

// 3번째 item 전에 삽입

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

 

// select box 값이 변경될때 선택된 현재값

$("#selectBox").change(function() {

           alert($(this).val());

           alert($(this).children("option:selected").text());

});

'javascript, jQuery' 카테고리의 다른 글

video태그 제어  (0) 2018.12.05
타이머 스크립트  (0) 2018.08.21
숫자만 입력가능  (0) 2018.06.12
자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31
자바스크립트 지역셀렉트 선택  (0) 2018.05.14

Post

숫자만 입력가능

[ javascript, jQuery ] 2018. 6. 12. 17:16

숫자만 입력가능


사용법​ onkeydown = "re​turn onlyNumber(event)"


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, "");

  }

}



'javascript, jQuery' 카테고리의 다른 글

타이머 스크립트  (0) 2018.08.21
select 제어  (0) 2018.08.05
자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31
자바스크립트 지역셀렉트 선택  (0) 2018.05.14
일주일동안 팝업 보지않기  (0) 2018.04.10

Post

자바스크립트 국내지도 svg 오버효과

[ javascript, jQuery ] 2018. 5. 31. 18:15

raphael_min.js

raphael_path_s.korea.js



raphael_path_s.korea.js 파일에서 22번째줄 


var R = Raphael("location_map", 320, 400); 


빨간색값은 ID값


115번째줄부터는 지역별 링크



서울특별시

경기도

인천광역시

강원도

충청북도

충청남도

대전광역시

세종특별자치시

광주광역시

전라북도

전라남도

경상북도

경상남도

대구광역시

부산광역시

울산광역시

제주특별자치도


'javascript, jQuery' 카테고리의 다른 글

select 제어  (0) 2018.08.05
숫자만 입력가능  (0) 2018.06.12
자바스크립트 지역셀렉트 선택  (0) 2018.05.14
일주일동안 팝업 보지않기  (0) 2018.04.10
iframe 접근방법  (0) 2018.03.23

Post

자바스크립트 지역셀렉트 선택

[ javascript, jQuery ] 2018. 5. 14. 18:21

//지역 설정

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

var area0 = ["시/도 선택","서울특별시","인천광역시","대전광역시","광주광역시","대구광역시","울산광역시","부산광역시","경기도","강원도","충청북도","충청남도","전라북도","전라남도","경상북도","경상남도","제주도"];

var area1 = ["강남구","강동구","강북구","강서구","관악구","광진구","구로구","금천구","노원구","도봉구","동대문구","동작구","마포구","서대문구","서초구","성동구","성북구","송파구","양천구","영등포구","용산구","은평구","종로구","중구","중랑구"];

var area2 = ["계양구","남구","남동구","동구","부평구","서구","연수구","중구","강화군","옹진군"];

var area3 = ["대덕구","동구","서구","유성구","중구"];

var area4 = ["광산구","남구","동구",     "북구","서구"];

var area5 = ["남구","달서구","동구","북구","서구","수성구","중구","달성군"];

var area6 = ["남구","동구","북구","중구","울주군"];

var area7 = ["강서구","금정구","남구","동구","동래구","부산진구","북구","사상구","사하구","서구","수영구","연제구","영도구","중구","해운대구","기장군"];

var area8 = ["고양시","과천시","광명시","광주시","구리시","군포시","김포시","남양주시","동두천시","부천시","성남시","수원시","시흥시","안산시","안성시","안양시","양주시","오산시","용인시","의왕시","의정부시","이천시","파주시","평택시","포천시","하남시","화성시","가평군","양평군","여주군","연천군"];

var area9 = ["강릉시","동해시","삼척시","속초시","원주시","춘천시","태백시","고성군","양구군","양양군","영월군","인제군","정선군","철원군","평창군","홍천군","화천군","횡성군"];

var area10 = ["제천시","청주시","충주시","괴산군","단양군","보은군","영동군","옥천군","음성군","증평군","진천군","청원군"];

var area11 = ["계룡시","공주시","논산시","보령시","서산시","아산시","천안시","금산군","당진군","부여군","서천군","연기군","예산군","청양군","태안군","홍성군"];

var area12 = ["군산시","김제시","남원시","익산시","전주시","정읍시","고창군","무주군","부안군","순창군","완주군","임실군","장수군","진안군"];

var area13 = ["광양시","나주시","목포시","순천시","여수시","강진군","고흥군","곡성군","구례군","담양군","무안군","보성군","신안군","영광군","영암군","완도군","장성군","장흥군","진도군","함평군","해남군","화순군"];

var area14 = ["경산시","경주시","구미시","김천시","문경시","상주시","안동시","영주시","영천시","포항시","고령군","군위군","봉화군","성주군","영덕군","영양군","예천군","울릉군","울진군","의성군","청도군","청송군","칠곡군"];

var area15 = ["거제시","김해시","마산시","밀양시","사천시","양산시","진주시","진해시","창원시","통영시","거창군","고성군","남해군","산청군","의령군","창녕군","하동군","함안군","함양군","합천군"];

var area16 = ["서귀포시","제주시","남제주군","북제주군"];

 

// 시/도 선택 박스 초기화

$("시/도 셀렉트]").each(function() {

$selsido = $(this);

$.each(eval(area0), function() {

$selsido.append("<option value='"+this+"'>"+this+"</option>");

});

$selsido.next().append("<option value=''>구/군 선택</option>");

});

// 시/도 선택시 구/군 설정

$("시/도 셀렉트").on('change load',function() {

var area = "area"+$("option",$(this)).index($("option:selected",$(this))); // 선택지역의 구군 Array

var $gugun = $(this).next(); // 선택영역 군구 객체

$("option",$gugun).remove(); // 구군 초기화

if(area == "area0")

$gugun.append("<option value=''>구/군 선택</option>");

else {

$.each(eval(area), function() {

$gugun.append("<option value='"+this+"'>"+this+"</option>");

});

}

});

var wr1 = "시/도 값";

var wr2 = "구/동 값";

var area = "area"+$("option",$(this)).index($("option:selected",$(this))); // 선택지역의 구군 Array

for(var i=0; i<area0.length; i++){

if(wr1 == area0[i]){

$("시/도 셀렉트 option").eq(i).attr("selected", true);

}

}

<?php

if($w == "u") {

?>

var $sido = $("시/도 셀렉트");

var area = "area"+$("option",$sido).index($("option:selected",$sido)); // 선택지역의 구군 Array

var $gugun = $("구/동 셀렉트"); // 선택영역 군구 객체

$("option",$gugun).remove(); // 구군 초기화

$.each(eval(area), function() {

$gugun.append("<option value='"+this+"'>"+this+"</option>");

});

for(var i=0; i<eval(area).length; i++){

if(wr2 == eval(area)[i]){

$("구/동 셀렉트 option").eq(i).attr("selected", true);

}

}

<?php

}

?>

});

'javascript, jQuery' 카테고리의 다른 글

숫자만 입력가능  (0) 2018.06.12
자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31
일주일동안 팝업 보지않기  (0) 2018.04.10
iframe 접근방법  (0) 2018.03.23
자바스크립트 즐겨찾기  (0) 2018.03.21

Post

일주일동안 팝업 보지않기

[ javascript, jQuery ] 2018. 4. 10. 10:02

<script>

$( document ).ready(function() {

cookiedata = document.cookie; 

if ( cookiedata.indexOf("ncookie=done") < 0 ){ 

document.getElementById('popup').style.display = "block";    //  팝업창 아이디

} else {

document.getElementById('popup').style.display = "none";    // 팝업창 아이디

}

});


function setCookie( name, value, expiredays ) { 

var todayDate = new Date(); 

todayDate.setDate( todayDate.getDate() + expiredays );

document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"

}


function closeWin() { 

document.getElementById('popup').style.display = "none";    // 팝업창 아이디

}


function todaycloseWin() { 

setCookie( "ncookie", "done" , 7 );     // 저장될 쿠키명 , 쿠키 value값 , 기간( ex. 1은 하루, 7은 일주일)

document.getElementById('popup').style.display = "none";    // 팝업창 아이디

}

</script>


사용법


<div id="popup" style="position:absolute; left:50%; top:120px; margin-left:-500px; z-index:1000; display:none;">

<img src="openpopup.jpg" usemap="#pop" />

<a href="#" onclick="todaycloseWin();" alt="오늘 하루 열지 않기"></a>

<a href="#" onclick="closeWin();" alt="닫기"></a>

</div>

'javascript, jQuery' 카테고리의 다른 글

자바스크립트 국내지도 svg 오버효과  (0) 2018.05.31
자바스크립트 지역셀렉트 선택  (0) 2018.05.14
iframe 접근방법  (0) 2018.03.23
자바스크립트 즐겨찾기  (0) 2018.03.21
레이어 팝업시 스크롤 터치스크롤 막기  (0) 2018.03.21
◀ 이전 1 2 다음 ▶
▲ top
▲ top

티스토리툴바