(jQuery) 다음뷰 추천 버튼 바꾸기, 관련글 지우기

준비물: (jQuery) 연결하기 다음뷰 추천 플래시를 작은 것으로 바꾸고 그 아래에 표시되는 관련글을 삭제할 수 있다. 아래 자바스크립트 코드를 SCRIPT 태그로 감싸거나 JS 파일로 저장해서 연결한다. $(document).ready(function($){ var daumview = $('.blogger-news-widget'); $('.blogger-news-widget').html(daumview.html().replace('recombox1.swf', 'recombox3.swf').replace('400','67')); $('.article iframe[src*=daum]').remove(); }); var daumview = $('.blogger-news-widget'); 객체 재사용을 위해..

(PS3) 모션 컨트롤러 시연

2010년 출시될 모션 컨트롤러는 기울기 센서가 내장된 작은 색공 막대기 2개를 사용하여 PS3 게임을 즐길 수 있다. 영상으로 보면 어두운데서도 인식가능하도록 조명도 들어오는 것 같다. 위치 인식에 필요한 PSEye 카메라는 Eye♡Pet (아이러브펫)에도 포함되어있다. 슈퍼 컴퓨터로 사용 가능한 높은 성능과 무한한 가능성을 가진 멀티플랫폼 PS3... 타사 뿅뿅 오락기(X, W)와는 비교가 안됨~

(jQuery) JSONP로 크로스 도메인 원격 데이터 가져오기

오래된 글입니다. 준비물: (jQuery) 연결하기 브라우저 기본 보안 설정으로는 현재 페이지의 호스트가 아닌 다른 서버에 HTTP 요청을 할 수 없다. 하지만 JSONP를 사용하면 보안 설정을 바꾸지 않고도 원격 데이터를 가져올 수 있다. 이 블로그에서는 게시물 아래 인기순 Top 글 목록에 적용되어있다. 데이터를 보내줄 원격 도메인 쪽에 JSON 형식으로 출력하도록 PHP 스크립트 코드를 작성한다. $json['key'] 에 저장된 자료는 자바스크립트에서 data.key 형식으로 가져올 수 있다. json_encode() 배열을 JSON 형식으로 인코딩한다. 데이터를 보여줄 곳에 스크립트를 작성한다. $.getJSON("http://simulz.com?callback=?", function(data)..

(jQuery Plugin) CyclicFade 깜빡이는 효과 적용하기

준비물: (jQuery) 연결하기 비표준 태그를 jQuery 플러그인으로 부드럽게 깜빡이는 효과를 줄 수 있다. 자바스크립트 연결하기 제작자 원문: http://www.bugzappy.com/cyclic-fade-jquery-plugin/ 적용하기$(selector).cyclicFade(); $(selector).cyclicFade(); selector로 지정한 요소들에 .cyclicFade() 플러그인 메서드를 적용한다. 편리한 방법으로는 HTML을 작성할 때 적용을 원하는 요소에 class='cyclicfade' 처럼 임의의 클래스를 지정해주고 $('.cyclicfade').cyclicFade(); 처럼 사용하면 cyclicfade 클래스를 가진 모든 요소에 적용이 된다. 다양한 옵션을 줄 수 있다...

(jQuery) 블로그 태그 목록을 버튼으로 섞기

준비물 (jQuery) 연결하기 관련글 (jQuery) 태그 목록 섞기 (jQuery) 티스토리 태그 목록 컬러풀하게~ 이번엔 버튼으로 섞어보자. 버튼을 누르면 글자 색상, 크기가 임의로 지정되고 순서가 섞이게 된다. 이전 글(관련글 참고)에서 작성한 코드를 재사용하기 위해 함수 안에 넣는다. var tag_random = function() { var taglogli = $('.taglog li'); taglogli.find('a').each(function() { $(this).css('color', getRandomRGB).css('font-size', getRandomNumber(8,24)+'pt'); }); taglogli.shuffle(); } $("태그 섞기!").click(function(..

(jQuery) 블로그에 로딩 중 표시하기

준비물: (jQuery) 연결하기 이 블로그에 적용되어 있다.HTML에서 로딩 메시지 코드를 추가한다. 문서 상단에 추가할 수록 빨리 보인다. 바로 밑에 넣어도 된다. 로딩 중... CSS에 추가한다. #loading { border: 1px #000 solid; background-color: #eee; font-size:20pt !important; color:#000; text-align:center; top: 50%; left: 50%; padding-top: 10px; margin: -100px 0 0 -50px; width: 200px; height: 100px; z-index:10; position: absolute; } width, height를 알맞게 바꾼 후, margin의 top, l..

(jQuery) 태그 목록 섞기

준비물: (jQuery) 연결하기 미리보기 http://simulz.com/tag 관련글: (jQuery) 티스토리 태그 목록 컬러풀하게~ 새로고침할 때마다 목록이 섞인다. ABC, 가나다였던 태그 목록을 랜덤 정렬로 변경해보았다. $.shuffle Plugin http://mktgdept.com/jquery-shuffle 위 사이트에서 js 파일을 내려 받고 사이트나 블로그에 업로드 한다. HTML HEAD에 아래 코드를 추가하여 JS를 연결한다. $('.taglog li').shuffle(); $('.taglog li') taglog 클래스를 가진 요소의 자식 중에서 li 요소들을 선택한다. $.shuffle(selector) 처럼 사용 가능하다.

(jQuery) 티스토리 태그 목록 컬러풀하게~

준비물: (jQuery) 연결하기 미리보기 http://simulz.com/tag 새로고침 할 때마다 색상과 크기가 변한다. 많아야 5가지 색상과 크기뿐이었던 태그 목록을 랜덤 색상, 크기로 변경해보았다. 목록 섞기: (jQuery) 태그 목록 섞기 var getRandomRGB = function() { return '#' + Math.floor(Math.random()*16777216).toString(16); } var getRandomNumber = function(f, t) { var num = -1; while(f > num) num = Math.floor(Math.random() * (t+1)); return num; } $('.taglog li a').each(function() { $(t..

(카운터) 블로그용 페이지 카운터 - 자바스크립트로 변경

이미지 직접 전송 및 출력으로 카운팅되던 것을 자바스크립트를 사용하여 글 제목과 리퍼러를 전송할 수 있도록 했다. Ajax로 직접 전송을 하게 되면 스크립트 보안 때문에 작동이 안되므로 이미지로 전송하게 된다. 본문 밑에 Top.5 게시물 목록을 추가해봤는데 Ajax로 작동하므로 스크립트 보안이 설정되어 있는 브라우저에서는 보이지 않는다. limit 속성을 추가해서 HTML 편집으로 게시물 출력 갯수를 설정할 수 있도록 했다. 대부분 브라우저의 기본 설정은 플래시 사용이 가능하므로 출력만 하는 정보들은 자바스크립트 대신 플래시를 사용하는 것이 좋다.

(jQuery) 티스토리 달력 토요일 색상 변경

준비물: (jQuery) 연결하기 달력의 토요일을 아래처럼 파란색으로 변경해보자. $('.tt-calendar tr :nth-child(7)').removeClass('cal_day3').css('color','#0000ff'); $('.tt-calendar tr') tt-calendar 클래스를 가진 요소의 자식 중에서 tr 요소의 자식 요소들을 선택 :nth-child(index) 7번째 자식 요소(tr의 자식은 td)를 선택 .removeClass(class) 필요없는 내용이지만 확실히 해주려고... cal_day3 클래스를 제거한다. .css(key, value) color 속성의 값을 #0000ff 로 지정한다.

(jQuery) 블로그 목록, 반복 배경 적용하기

준비물: (jQuery) 연결하기 $('.recentPost li:odd, .recentComment li:odd, .searchList li:odd').css('background-color','#eeeeee'); $(selector, selector, ···) ,(쉼표) 를 사용하여 여러 요소들을 선택한다. 예제에서는 recentPost 클래스를 갖고 있는 요소의 자식 중에서 li 요소의 홀수번째 선택, recentComment 클래를 갖고 있는 요소의 자식 중에서...(쓰기 귀차니즘), searchList 클래스를...(역시 귀차니즘) 그 다음 .css(key, value) bacground-color 속성에 #eeeeee 값을 지정했다.

SWFObject 2.x로 3D 태그 적용하기

SWFObject 페이지 http://code.google.com/p/swfobject/ 티스토리 기준으로 설명 아래 파일을 내려받아 압축을 풀고 js, swf파일을 티스토리 스킨 편집 페이지에 업로드 한다. 제작자: http://wordpress.org/extend/plugins/wp-cumulus/ 블로그 스킨 HTML에서 HEAD 내에 아래 코드를 삽입한다. 자동으로 SWFObject 2.x 최신 버전을 연결해준다. 아래처럼 태그목록 코드를 정리한다. Tag Tag 밑에 아래 코드를 추가한다. WP-Cumulus by wordpress.org requires Flash Player 9 or better. 완성된 코드 Tag WP-Cumulus by wordpress.org requires Flash..

(jQuery) 티스토리 테터데스크에서 imgempty.png 그림 바꾸기

준비물: (jQuery) 연결하기 티스토리 사용자 중 테터데스크에 노출 되는 글에 첨부된 그림이 없으면 아래의 기본 이미지가 뜬다. 원하는 이미지로 변경을 해보자. $('img[src*=imgempty.png]').attr('src', 'http://cfs.tistory.com/custom/blog/2/20343/skin/images/imgempty.png'); img 요소 중 src 속성에 imgempty.png가 포함된 요소들을 찾아서. .attr() 메서드로 src 속성을 두번째 인자 값으로 변경한다. 이 블로그에 적용 되어있다. http://simulz.com 아래 그림으로 바뀌는 것을 볼 수 있다. (이 글은 제외)

(MP3 벨소리) 고주파음 모기벨

주파수별 4가지 고주파음을 사용하여 공공장소에서는 또는 휴대폰과 멀리 떨어져 있을 때 쉽게 알 수 있다. 단, 청각 상태가 좋아야 함

(MP3 벨소리) 블랙잭 모음

(MP3 벨소리) 군대 기상나팔, 취침나팔

기상나팔, 취침나팔, 비상 싸이렌 압축파일 기상나팔 취침나팔 비상 싸이렌 갱신: 2024-03-22