반응형 프로그램546 jQuery를 이용한 부모 창 특정 아이템 호출 jQuery를 이용한 부모 창 특정 아이템 호출 팝업 창에서 jQuery를 사용하여 부모 창의 특정 아이템(예: 특정 HTML 요소)을 호출하거나 조작하고 싶다면, window.opener 객체를 이용하여 부모 창의 DOM에 접근할 수 있습니다. 이를 통해 부모 창의 특정 아이템에 접근하고, 이를 조작할 수 있습니다. 예제 코드1. 부모 창 (parent.html)부모 창에서는 조작할 아이템(예: 특정 요소)을 정의합니다. 부모 창 이 텍스트가 팝업 창에서 변경될 것입니다. 팝업 창 열기 2. 팝업 창 (popup.html)팝업 창에서는 부모 창의 특정 아이템을 조작합니다. 팝업 창 팝업 창 닫기 설명window.opener: 팝업 창에서 부모 창을 참조합니다.wind.. 2024. 9. 8. jQuery를 이용한 새창에서 부모창 함수 호출 jQuery를 이용한 새창에서 부모창 함수 호출 jQuery와 JavaScript를 사용하여 새 창(팝업 창)에서 부모 창의 함수를 호출하려면 window.opener 객체를 활용할 수 있습니다. 이 객체는 새 창이 부모 창을 참조할 수 있게 해주며, 이를 통해 부모 창에 정의된 함수를 호출할 수 있습니다. 예제 코드1. 부모 창 (parent.html)부모 창에서는 호출될 함수를 정의합니다. 부모 창 팝업 창 열기 2. 팝업 창 (popup.html)팝업 창에서는 부모 창의 함수를 호출합니다. 팝업 창 팝업 창 닫기 설명window.opener: 팝업 창을 열어준 부모 창을 참조합니다.window.opener.parentFunction('Hello from the popup!.. 2024. 9. 6. jQuery를 이용한 브라우저 종료 이벤트 jQuery를 이용한 브라우저 종료 이벤트 jQuery를 사용하여 브라우저 종료 이벤트를 처리하고자 할 때, 사실 직접적으로 브라우저 종료를 감지할 수 있는 방법은 없습니다. 하지만 window.onbeforeunload 이벤트를 사용하여 사용자가 페이지를 떠나거나 브라우저를 닫기 전에 실행할 코드를 지정할 수 있습니다. onbeforeunload 이벤트 사용onbeforeunload 이벤트는 사용자가 페이지를 떠날 때 발생합니다. 페이지를 새로고침하거나 다른 페이지로 이동하거나, 브라우저를 닫으려고 할 때 이 이벤트가 발생합니다. $(window).on('beforeunload', function(event) { // 이 함수 안에서 수행할 작업을 여기에 추가합니다. // 예: 데이터를 .. 2024. 9. 4. jQuery 새 창에서 부모 창 새로 고침 팝업 창에서 부모 창 새로고침 jQuery를 사용하여 새 창(팝업 창)에서 부모 창을 새로고침하는 방법은 다음과 같습니다. 이 방법은 팝업 창이 부모 창과 동일한 도메인에서 열려 있을 때 작동합니다. 팝업 창에서 부모 창을 새로고침하려면 window.opener 객체를 사용할 수 있습니다. // 부모 창을 새로고침하는 코드if (window.opener && !window.opener.closed) { window.opener.location.reload(); // 부모 창 새로고침 window.close(); // 팝업 창 닫기 (선택 사항)} 설명window.opener: 팝업 창을 열어준 부모 창을 가리킵니다. 팝업 창에서 부모 창에 접근할 때 사용됩니다.window.opener.. 2024. 9. 2. Timeline html, css, jsTimelineAuthor : haraldev01타임라인 / Timeline https://codepen.io/haraldev01/pen/NWVvNqy TimelineTimeline element inspired by Ibelick: https://www.ibelick.com/lab/timeline I expanded on the design, as it now correctly shows the selected year, high...codepen.io 2024. 8. 8. Horizontal Timeline of Web Development html, css, jsHorizontal Timeline of Web DevelopmentAuthor : Jerome Rass타임라인 / Timeline https://codepen.io/jerora98/pen/yLWzYGO Horizontal Timeline of Web DevelopmentExplore the evolution of web development through this interactive horizontal timeline. Scroll horizontally to navigate through the major milestones in ...codepen.io 2024. 8. 8. Basic Timeline html, css, jsBasic TimelineAuthor : J타임라인 / Timeline https://codepen.io/jaingam/pen/RwmjarP Basic TimelineBasic timeline component with dark mode compatibility. Using tailwindcss....codepen.io 2024. 8. 8. Timeline in Dark Theme html, cssTimeline in Dark ThemeAuthor : Muzammal Ahmed타임라인, Timeline https://codepen.io/MuzammalAhmed/pen/MWdVwVo Timeline in Dark ThemeIDK what to say but follow me for more awesome content...codepen.io 2024. 8. 8. Scrolling timeline clickable years html, css, jsScrolling timeline clickable yearsAuthor : buildplan타임라인 / Timeline https://codepen.io/buildplan/pen/pomLawb Scrolling timeline clickable yearsScrolling timeline clickable years with jquery...codepen.io 2024. 8. 8. Vertical Timeline With Icons #html / css#Vertical Timeline With Icons#Author : Riley Egge#타임라인/ Vertical Timeline https://codepen.io/eggeriley/pen/QWReeXO Vertical Timeline With IconsA vertical timeline widget using Font Awesome and pure css. ...codepen.io 2024. 8. 8. 기본적인 체크 박스(checkbox) 결과이미지 html(index.html) Basic Checkbox Basic Checkbox Round Checkbox Round Checkbox Custom Checkbox Custom Checkbox CSS(styles.css)body { font-family: Arial, sans-serif;}.basic-checkbox,.round-checkbox,.custom-checkbox { display: block; position: relative; padding-left: 35px; marg.. 2024. 8. 7. 심플한 애니메이션 탭(Tab bar animation) 결과 이미지 HTML먼저 HTML 구조를 작성합니다: Tab 1 Tab 2 Tab 3 Tab 4 Content 1 Content 2 Content 3 Content 4 CSS탭과 애니메이션 효과를 위한 CSS를 작성합니다:/* styles.css */body { font-family: Arial, sans-serif;}.tab-container { position: relative; display: flex; justify-content: space-around; margin-bottom: 20px; border-bottom: 2px solid #ddd;}.. 2024. 8. 6. 이전 1 2 3 4 5 6 ··· 46 다음
