skylove1982

가로형 배너가 5초마다 다른 배너로 변경되는 반응형 배너 예제코드 입니다. 브라우저의 사이즈에 따라서 배너를 감싸고 있는 ul 의 높이값이 스크립트에 의해 변경이 됩니다.

위와 같은 html 코드가 있다고 할때에...웹브라우저 창의 사이즈가 조절이 일어날때에.. 그 이미지의 가로 사이즈가 100%로 정해져있을 경우에 이미지의 가로 사이즈는 웹브라우저 사이즈에 맞게 자동으로 변경이 됩니다. 그러나 문제는 이미지의 세로 사이즈는 자동으로 변경 되기 때문에 알 수가 없습니다. 따라서 이미지의 크기에 맞게 ul의 높이값을 지정하여 li 한개에 있는 이미지만 보여주고 싶다면...창이 크기가 변경 되고 나서 이미지의 높이값을 jQuery를 통하여서 값을 읽고 ul 의 높이값을 지정하면 됩니다.아래는 jQuery 예시 입니다.

일반적으로 자바스크립트에서 문자 하나의 값을 변경이 가능합니다. 예를 들어..화면에 step > step2 > step3 이렇게 표시된다고 하였을때요.. > 표시를 > 로 html 에서 표기를 하는데요.. 문제는 자바스크립트에서는 값을 받아서 화면에 표시를 한다고 하면 그대로 > 로 표시가 되는 경우가 생기었습니다. 그래서 문자열 변경을 하기 위해서 해보았는데요. var strValue1 = 'step1 > step2 > step3';var strValue2 = strValue1.replace('&gtp;', '>'); 이렇게 되면 strValue2 의 값은 step1 > step2 > step3 로 값이 나타납니다. 즉 처음 단어 하나만 변경이 되는 것입니다. 그러나 이것은 제가 원하는것이 아니라 모든..

jQuery 를 이용한 스크립트를 작성할때 스크롤 이벤트에 관련된 함수에 이용 가능한 소스코드를 정리해 보았습니다. 처음에는 퀵메뉴를 고정시키고 슬라이딩 시키는 효과를 주려고 했지만 웹표준 상 퀵메뉴는 css 로 position:fixed 로 했습니다. 혹시 몰라서 스크롤 이벤트에 관련된 변수값과 정보들에 관해 적어 놓습니다. 참고하세요~^^ (참 맨 상단에 jquery.min.js 파일 포함되어야 하는 거 아시죠?^^ 파일을 jquery.com 사이트를 방문하시면 있어요^^)

jQuery 에서 input 타입이 체크박스(checkbox)일 경우에 체크박스를 클릭할때 체크 유무에 따라서 이벤트 발생하도록 하는 방법을 예로 설명하고자 합니다. 그리 어려운 방법은 아니지만 까끔 잊어버리기에 여기에 정리하고자 합니다. 우선 바로 아래의 소스코드를 보면 체크박스에 선택이 된 체크박스가 보일것 입니다. checked 값을 비우고 한다면 선택이 되지 않은 상태로 보일것입니다. 이 상태에서 체크박스를 선택할떄 일어나는 이벤트를 건다고 한다면.. 위의 예제와 같이 소스코드1에 해당하는 함수는 input 이라는 태그에서 타입이 체크박스에 해당되는 모든 것에 이벤트를 걸게 됩니다. 소스코드2의 함수는 input 태그에 네임이 checkValue 라는 것을 찾아서 이벤트를 걸게 됩니다. 즉 이름을..

jQuery 를 이용해서 메인 이미지의 페이드 효과를 주면서 변경해보는 효과를 만들어 보았습니다. ul li 형식에 각 li 에는 클래스 이름으로 지정되어있고 그 클래스에 배경이미지로 잡혀있는 경우입니다. 우선 html 소스코드를 보면은 메인이미지 위와 같습니다. 보시는 것과 같이 각 li 에 클래스 이름이 있고 mainimgview라는 이름과 넘버로 이루어져 있습니다. 그럼 위의 클래스는 스타일시트 즉 css 에 어떻게 적용이 되어있는가를 보면 아래와 같습니다. #mainimg { position:absolute;left:0;top:147px; width:100%; height:727px; z-index:99; } #mainimg .mainimgview01 { position:relative; floa..

jQuery 효과를 이용하는 것은 클래스를 이용하는 것이 기본이지요. 즉 특정 태그에 클래스를 추가했다가 삭제하는 등의 방법을 이용하는 것입니다. 보통 클래스는 CSS 를 이용한 디자인 코드를 이용하는 것이지만 이러한 CSS 구성요소를 이해해야 더욱더 jQuery 를 이용해서 더 많은 효과를 구현할 수가 있습니다. 처음 jQuery 프로그래밍을 하시는 분들에게는 css 가 무엇인지를 이해하실것입니다. 그러나 정확하게 아시는 분은 많이는 안되실것같아서 약간의 설명을 덧붙여 설명해보겠습니다. 최근에 웹페이지를 구성하는 요소는 html 태그인 소스 코드와 그 시각적인 디자인을 다루는 css 코드로 분리하는 웹표준화가 많이 진행되고 있습니다. 즉 하나의 웹페이지도 하나의 데이터 문서라고 보시면 됩니다. 따라서 ..

jQuery(function($){ // Contents - 다음 에디터에서 작성된 이미지는 txc-image 라는 클래스 이름을 가지는데 // 이미지 사이즈가 본문 크기를 넘으면 스크립트로 줄이도록 함 var Contents = $('div.tx-content-container'); var imgs = Contents.find('img'); imgs.each(function (i) { var width = $(this).attr('width'); if(width > 650) width=650; $(this).attr('width', width); }); }); 위의 내용과 같이 imgs 라는 변수에는 본문에 있는 모든 이미지들을 배열로 가지고 있습니다. 그리고 그것을 .each 함수를 통해서 하나씩 각..

jquery timer 타이머 시간에 따른 이벤트 설정 jQuery 가 정상적으로 동작하려면 우선 아래의 코드가 포함이 되어있어야 합니다. 위의 예제 코드는 예제 소스 코드입니다. 가장 중요한 핵심은 var timer = window.setInterval(timerAction, 3000); 이 코드 입니다. 즉 타이머라는 변수를 선언하는데 3000 곧 3초마다 timerAction 이라는 이름을 가진 함수를 실행하는 것을 의미합니다. 따라서 timerAction 함수에다가 무엇을 선언하느냐에 따라서 달라지겠죠?

jQuery를 이용한 ajax 예제를 간단히 올려봅니다. 은근 잘 까먹어서 적어두는게 나을것 같더군요. 소스코드가 잘 보일것 같아서 텍스트 파일로 하나 첨부합니다. 다운 받으세요. $('.cancle').click(function (){ var payment = $('#payment_radio').find('input[name=payment]:checked').attr('value'); if(payment == 0) var answer = confirm ('취소하시겠습니까? 데이터가 삭제됩니다.'); else var answer = confirm ('취소하시겠습니까?'); if(answer){ var no = 117; var payment = $('#payment_radio').find('input[na..