목록WEB/javaScript (19)
귀찮아
1단계제목 내용 1단계제목 내용
램브란트에 사용함 1차 선택: 선택하세요 과일 야채 2차 선택: 먼저 1차 선택을 해주세요 3차 선택: 먼저 2차 선택을 해주세요 $(document).ready(function () { // 1차 선택 $('#select1').change(function () { const select1Value = $(this).val(); const $select2 = $('#select2'); const $select3 = $('#select3'); $select2.empty().prop('disabled', true); ..
마케팅정보수신동의를 제외한 나머지는 필수체크 마케팅 정보 수신 동의를 제외한 나머지 체크박스는 필수 체크로 설정하려면, 필수 항목을 체크하지 않은 경우 폼 제출을 막고 경고 메시지를 표시하는 기능을 추가해야 합니다.아래는 "이용 약관 동의"와 "개인정보 처리방침 동의"를 필수 체크 항목으로 설정하고, 체크되지 않은 경우 경고 메시지를 띄우는 jQuery 코드를 포함한 예제입니다. 전체 동의 이용 약관 동의 (필수) 개인정보 처리방침 동의 (필수) ..
이메일 입력하는 인풋 제이쿼리이메일 입력 필드를 위한 jQuery 코드는 사용자가 올바른 이메일 형식인지 즉시 확인하고, 적절한 스타일이나 메시지를 표시하는 데 유용합니다. 예를 들어, 이메일 형식이 올바르지 않으면 경고를 표시하는 방법을 구현할 수 있습니다. Invalid email address$(document).ready(function() { $('#email-input').on('input', function() { var email = $(this).val(); var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (emailPattern.test(email)) { $(this)..
Please select Option 1 Option 2 Option 3 .select-box { width: 200px; position: relative; cursor: pointer;}.selected { padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc;}.options { list-style: none; margin: 0; padding: 0; display: none; position: absolute; width: 100%; top: 100%; left: 0; background-color: wh..
두가지 셀렉트가 다른클래스일 때 독립적으로 오픈되는 ul li로 된 셀렉트메뉴 html Select Option 1 Option 1-1 Option 1-2 Option 1-3 Select Option 2 Option 2-1 Option 2-2 Option 2-3 CSS.custom-select { position: relative; width: 200px; margin-bottom: 20px;}.select-btn { width: 100%; padding: 10px; cursor: pointer;}.select-menu { position: absolute; top: 100%; left: 0; width: 100%; background..
html Section 1 Section 2 csssection { position: relative; width: 100%; height: 100vh; overflow: hidden;}/* Vimeo 동영상 배경 설정 */.vimeo-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}.vimeo-video { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: ..
new fullpage('.fullpage', { //............................................. //....Your other options.... //.............................................. onLeave: function(){ jQuery('.section [data-aos]').removeClass("aos-animate"); }, onSlideLeave: function(){ jQuery('.slide [data-aos]').removeClass("aos-animate"); }, afterSlideLoad: function(){ jQue..
유튜브 배경으로 불러오기 + 5초뒤에 서서히숨기기 + 닫기버튼클릭하면 서서히숨기기 + 1시간마다 노출 바로가기 #intro_video {position:fixed; width: 100%; height: 100vh; background: #fff; left:0; top:0; z-index:999999; transition: opacity .3s ease;}#intro_video::before {content:''; width: 100%; height: 100%; background: #000; opacity:.3; position: absolute; left:0; top:0; }.video-background{position:absolute; top:0;left:0;width:100%;height:..
.menu_btn {position: relative; width: 65px; height: 65px;background: var(--main-color1); border-radius:100%; } .bt_menu {position: absolute; left:50%; top:50%;transform:translate(-50%, -50%); width:32px; height:32px; font-size:11px;font-weight: bold;color:#fff; margin-top:0;} .bt_menu span {display: block;width: 100%;} .bt_menu i {display:block; width:32px; height:2px; background:#fff; margin..