Category Archives: javascript/jQuery

[번역] CSS와 jQuery를 이용한 메가 드롭 다운 메뉴 튜토리얼

Posted on by
Reply
이 메가 드롭다운 메뉴는 내가 애용하는 것이다. 튜토리얼이라 커스터마이징하기는 좀 까다롭지만 말이다. 오늘도 고칠 일이 좀 생겼는데 골치가 좀 아파서 그냥 튜토리얼을 번역하기로 결심했다. 그동안은 그냥 갔다 쓰기만 했는데 이번엔 한 번 제대로 공부해 볼 셈으로 말이다. 그럼 이제부터 번역 시작이다. 이 글을 보면 이 사람의 메가 드롭 다운 메뉴도 커스터마이징하기 … ▶전문 보기

[링크] jQuery 이미지 슬라이드 갤러리/뷰어 모음

Posted on by
10
[플러그인] 이미지 갤러리/슬라이드쇼 플러그인 25개 : 2011-08-02 추가 분류를 잘 보고 사용해야 한다 막 갖다 모으는 중이었는데 어느 날 이런 생각이 들었다. "ie6에서는 돌아갈까?" 역시나 몇 개는 돌아가지 않았다. 그리고 살펴 보니, tutorial(연습용 예제)과 plugin은 분명한 차이가 있다. tutorial은 보고 따라하는 거다. 재사용성이 좋을 수도 있지만 안 좋을 수도 있다. 즉, tutorial … ▶전문 보기

[jQuery plugin] 오른쪽 위에 반투명 메세지 박스 띄우는 플러그인 jgrowl

Posted on by
3
시간이 없어서 사용법을 자세히 소개하진 못하지만, 굉장히 간단하다. 일단 동영상을 보실까. 코드는 아래와 같다. 샘플 1부터 5까지 쉽게 알 수 있다. // Sample 1 - 그냥 사용하기 $.jGrowl("Hello world!"); // Sample 2 - 안 사라지게 하기 $.jGrowl("Stick this!", { sticky: true }); // Sample 3 - 메세지에 제목 띄우기 $.jGrowl("A message with a header", { header: 'Important' }); // Sample 4 - 시간 정하기(아래는 10초) $.jGrowl("A … ▶전문 보기

toggle:selector 형태로 토글 이벤트 할당하는 함수

Posted on by
Reply
접었다 폈다 하는 기능을 만드는 건 귀찮은 일을 수반한다. 하나쯤 만드는 건 간편하다. jQuery에는 slideToggle 이라는 강력한 메서드가 있다. 그런데 여러 개를 만들다 보면 좀 귀찮다. 코드가 반복된다. 그래서 간단하게, 버튼을 만들고, 거기다 타겟 이름을 적어 주면, 타겟을 접었다 폈다 하게 만드는 그런 이벤트 핸들러를 만들었다. 이렇게 하는 데 기본 아이디어는 코드 … ▶전문 보기

[jQuery] 레이어 팝업으로 이미지를 띄울 때 이미지가 다 불러진 다음 이미지 사이즈를 계산해서 화면 정 중앙에 오게 하기

Posted on by
Reply
요약: $('.certainImage').bind('load', functionName); 형식의 코드를 사용하면 된다. fancybox 라이브러리는 강력한 이미지 갤러리 기능을 갖추고 있다. 그런데 ie6~8에서 화면이 로드되고 약 1~2초 정도 얼어 버리는 (프리징) 현상이 관찰됐다. 어차피 이미지를 확대해 보여 주는 기능밖에 없었기 때문에 fancybox를 제거하고 날코딩을 하기로 결정했다. 소요될 거라 생각한 시간은 대략 1시간이었다. … ▶전문 보기

나눔고딕으로 Cufon 적용 후, 나눔고딕이나 맑은 고딕이 있는 사람에게는 적용하지 않기

Posted on by
1
사용되는 라이브러리는 jquery.font 다. 이놈은 사용자가 해당 글꼴을 갖고 있는지 감지해 준다. 이 글을 찾아 오신 분들 중에는 Cufon이 뭔지 모르는 분이 없을 거라 생각한다. (Cufon은 텍스트를 받아 글자를 그려 주는 라이브러리다.) 아래 함수를 이용하면, 나눔고딕이나 맑은 고딕 글꼴이 있는 경우 Cufon을 아예 건너뛰게 된다. 당연히 트래픽이 절약된다.(나눔고딕은 붙여 쓰고, … ▶전문 보기

[jQuery:링크] 추천 메가 드롭다운 메뉴 jQuery megamenu

Posted on by
1
메가 드롭다운 메뉴는 내비게이션에서 서브메뉴 탐색을 효과적으로 할 수 있도록 해 주는 메뉴 형식이다. 이 메가 드롭다운 메뉴는 설명도 잘 돼 있는 듯하고, javascript를 끄고 들어온 사용자에게도 스타일이 깨지지 않고 보인다. Mega Drop Down Menus w/ CSS & jQuery 그리고 이건 데모다. Mega Drop Down Menus w/ CSS & jQuery Demo 우연히 찾았던 jQuery megamenu2 라는 놈은 javascript를 끄고 … ▶전문 보기

[번역]jQuery는 플래시를 어떻게 없애고 있나 + jQuery 튜토리얼 & 플래시 애니메이션을 대체할 플러그인

Posted on by
1
How jQuery is Killing Flash + jQuery Tutorials & Plugins to Beat Up Flash Animations 위는 원문이고 아래는 제가 번역한 것입니다. 의역이 많이 있으니 정확하게 보고 싶다면 원문을 보세요. -------- 번역 시작 ---------- 1996년에 매크로미디어가 플래시라고 불리는 제품을 내놨다. 이건 벡터 기반 애니메이션 플랫폼이었다. 플래시로 웹디자이너들은 시간순으로 흐르는(using a timeline) 애니메이션과 비디오로서의 … ▶전문 보기

[번역] 아름답게 jQuery 엘리먼트 생성하기 Beautiful Element Creation with jQuery

Posted on by
1
원문은 Beautiful Element Creation with jQuery 입니다. 엘리먼트(요소), 파라미터(매개 변수), 어트리뷰트(속성), 오브젝트(객체)는 그냥 번역하지 않고 사용했습니다. <div class="thisClass"></div> 위 코드에서 div를 엘리먼트라고 합니다. class가 어트리뷰트고, thisClass는 value라고 하죠. 파라미터는 변수예요. 변수 모르시는 분은 없겠죠? var name = "철수" 할 때 name이 변수죠. 오브젝트는 … ▶전문 보기

[jQuery] 레이어 팝업 박스를 화면 정 가운데 위치시키기(ie든 파폭이든 크롬이든 다 되는 거)

Posted on by
1
레이어 팝업을 불러온 후 자바스크립트로 박스의 css를 아래처럼 해 준다. 물론 박스의 position 값은 absolute일 것이다. 레이어팝업의 width와 height는 미리 css에 정의해 두는 게 좋다. 아래 코드를 그대로 사용하려면 반드시 정의해 둬야 한다. var $layerPopupObj = $('.layerPopupBox'); var left = ( $(window).scrollLeft() + ($(window).width() - $layerPopupObj.width()) / 2 ); var top = ( $(window).scrollTop() + ($(window).height() … ▶전문 보기