■ 아래와 같이 크롬에서는 문제가 없지만 인터넷 익스플로러 브라우저를 사용할 때 PDF파일이 iframe으로 include되어있고 그 위로 레이어가 있을 경우 그 레이어가 PDF 파일뒤로 가려지게 된다. 이를 해결하기 위해 jquery bgiframe 플러그인이 있어 정리한다.
■ bgiframe 위치
– https://github.com/brandonaaron/bgiframe에서 최신 파일을 다운로드 받는다.(jquery.bgiframe.js)
■ bgiframe 사용법
– jquery 플러그인이므로 jquery와 bgiframe을 include한다.
<script type="text/javascript" src="./jquery-1.10.2.min.js"></script> <script type="text/javascript" src="./jquery.bgiframe.js"></script>
– 아래의 코드는 IE에서 위의 그림처럼 menu레이어가 pdf 플러그인에 의해 가려 지게 된다.
<h1>jQuery bgiframe - Visual Test</h1> <div id="title" class="box">title</div> <div id="menu" class="box" style="display:none;"> <a href="javascript:alert('menu1')">menu1</a><br/> <a href="javascript:alert('menu2')">menu2</a><br/> <a href="javascript:alert('menu3')">menu3</a><br/> </div> <iframe id="pdf" src="./sample.pdf" width="500" height="200"></iframe>
– 가려지는 menu레이어를 다시 보여주기 위해서는 아래와 같이 보여져야할 때 bgiframe() 함수를 호출하면 된다. 내부적으로 menu레이어와 pdf 플러그인 사이에 빈 iframe를 하나 생성해주는 듯하다. 전체 테스트 코드를 첨부한다. bgiframe 테스트코드 다운로드
$("#title").hover( function () { console.log("mouse hover..."); $("#menu").show(); $('#menu').bgiframe(); }, function () { console.log("mouse out..."); $("#menu").hide(); } ); $("#menu").hover( function () { console.log("mouse hover..."); $("#menu").show(); $('#menu').bgiframe(); }, function () { console.log("mouse out..."); $("#menu").hide(); } );
- jQuery checkbox 전체 선택/해제 예제 2022년 3월 15일
- Highcharts error #17 2019년 7월 10일
- Highchart TypeError: c.init is not a function 2019년 7월 10일
- Highchart 크기 조정 2019년 7월 8일
- Highcharts error #13 2019년 7월 8일
- Grid Stack Two grids demo 예제 2019년 6월 12일
- 동적으로 추가/생성된 태그에 이벤트 추가 방법 2019년 6월 10일
- Highcharts update event 2019년 3월 26일
- jdom2를 이용한 spring xml response(응답) 2017년 12월 5일
- jquery xml 요청, spring xml 리턴 2017년 12월 5일
- jquery div show hide 예제 2016년 5월 25일
- jquery css 예제 2016년 5월 25일
- jquery selectbox 예제 2016년 5월 25일
- jquery json 예제 2016년 5월 25일
- jquery template 예제 1 2016년 5월 25일
- jquery datepicker 2016년 5월 9일
- jquery radiobox 2016년 4월 29일
- jquery bgiframe 정리 2016년 2월 1일
- jquery each( $.each ) 2016년 1월 25일
- jquery spring – checkbox로 선택된 배열 주고 받기 2015년 8월 15일
- jquery spring ajax call 2015년 8월 15일
- jQuery 동적 체크박스 제어 2015년 1월 27일
- 간단한 jquery chained selectbox 예제 2014년 12월 4일
- jquery ui tip 2014년 9월 2일