차근차근/JAVA Script 110

유튜브 아이프레임 일시정지

https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google for Developers 애플리케이션에 YouTube 플레이어를 삽입합니다. developers.google.com - 처음에는 이 api를 통해서 아이프레임 영역을 만들고 player.pauseVideo();함수를 실행시켜서 특정 상황에서 일시정지 기능을 넣었다. 근데 테스트를 하다보니 일시정시 기능이 간헐적으로 작동하지 않았고. api를 통해 아이프레임을 생성한 동영상에서 일시 정지 버튼을 눌렀을 때 연관동영상? 추천동영상이 영상 하단 부분에 뜨는 문..

ajax뒤로가기 시 이전 데이터 유지

지금 개발한 페이지가 게시판 목록인데 '더보기' 버튼을 눌러서 밑으로 계속 목록을 붙여가는 형식이다. '더보기'나 검색 시 화면이 새로고침되어서는 안된다고 해서 ajax로 작성을 했다. 문제는 상세페이지 혹은 다른 연관 페이지로 이동 후 뒤로가기버튼을 누르거나. 목록가기 버튼을 눌렀을 때 이전의 상태를 그대로 보여줘야 한다고 한다. 비동기인데..뒤로가기 했을 때 당연히 이전의 값이 없는게 맞지 라고 생각했지만.. 사용자의 생각은 다른가보다.. 생각해보니 내가 모든 페이지로 ajax를 통해 작성해본 적이 없었다. 어떻게 구현을 할까..방법을 찾는 중이다. 일단 급한대로 목록에서 페이지 이동 할 때 세션 스토리지에 현재의 상태값을 저장하고 다시 목록에 돌아왔을 때 그 상태값이 있으면 다시 조회하도록 했다. ..

마우스 오버 모바일에서 한번 더 터치해야 사라짐..해결중..

https://qastack.kr/programming/8291517/disable-hover-effects-on-mobile-browsers 모바일 브라우저에서 호버 효과 비활성화 qastack.kr https://ui.toast.com/posts/ko_20220106 https://east-star.tistory.com/44 마우스 이벤트, 제대로 사용하고 계신가요? - 클릭과 터치 '세 줄 독후감' 웹사이트를 운영하며, 최근 사용자들에게 한 오류를 제보 받았습니다. 아래 독후감 평점 입력 기능이 동작하지 않는다는 것이었습니다. 근본적인 원인을 찾아보자 먼저 데스크톱 east-star.tistory.com https://doqtqu.tistory.com/355 [css] 모바일 환경(터치 스크린)에서..

html 이미지로 만들어서 저장하기

html페이지를 이미지로 만들어서 카카오톡에 공유하려고 했는데 다른 방식으로 진행하게 되어서 일단 작성해둔다.. //html페이지는 css가 안먹힐 경우 //하나씩 개별 작성해야 한다. //1. html 페이지를 캡쳐한다. base64 //2. base64를 blob으로 변환하여 //3. 폼을 만들고 ajax로 서버에 저장하고 //4. 받아온 이미지 파일명을 카카오 공유할 때 사용한다. //* 화면이 100%여야 이미지가 그나마 정확하게 캡쳐됨. function fn_ImageSave(){ //1. html 캡쳐하기 $('html').scrollTop(0); var imgBase64 = ""; var base64ImageContent = ""; var blob = ""; html2canvas(docume..

form 안에 데이터 전체 확인하기

[ 기존 방식 ] //1) select box데이터 var test1_name = document.getElementById("test1_name"); var testName = test1_name.options[test1_name.selectedIndex].value; //2) input type text var test1Info = document.getElementById("test1_info"); //... 확인할 값들을 다 작성하고.. if(testName.value == ""){ alert("testName을 입력해주세요."); test1_name .focus(); return; } 이렇게.. 매번 폼데이터를 확인했었는데... 다른 방식이 있지 않을까 하고 찾아보다가 어차피 ajax로 form..

swiper , tap

[상황] 탭이 4개 있고 1번 탭에 swiper를 사용해서 보여줄 이미지 2개 2번 탭에 swiper를 사용해서 보여줄 이미지 2개 3번 탭에 swiper를 사용해서 보여줄 이미지 2개 4번 탭에 swiper를 사용해서 보여줄 이미지 4개 - 각 슬라이드 영역은 좌우 이동 버튼있음 - 하단 페이지네이션 버튼 있음 - 오토플레이+loop 문제점1) 이미지 슬라이드 영역을 style:block; style:none;으로 탭에 따라 css설정을 바꾸면 간헐적으로 슬라이드의 (좌우버튼)이 누리긴 하나 작동을 하지 않는 문제 있음 - 하단 페이지네이션 버튼을 누르거나 이미지 자체를 좌우로 한번 움직여 주면 버튼이 정상 작동하였음. 문제점1- 해결) swiper 생성 스트립트를 처음 페이지 불러올 때..

html태그까지 복사하기(javascript clipboard + html tag)

jsp ... 복사하기 ... 날짜 신청자 수 2022년 05월 2 2022년 06월 3 2022년 07월 4 ...​ HTML 삽입 미리보기할 수 없는 소스 js function fn_copyTable(){ var myCopyArea = document.getElementById("resultTable"); var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(myCopyArea); selection.removeAllRanges(); selection.addRange(range); //table영역 드래그 한 효과 document.execCommand('copy'); //clip..

반응형