HTML 엘레멘트 좌표

외우기 귀차니즘... 파란색 파선은 document 실제 크기이다. screenLeft, screenTop: 창의 위치 scrollLeft, scrollTop: 스크롤 위치

PC&웹/웹프로그래밍 2010. 1. 30. 17:55

선의 종류

─────────────[실 선] ─ ─ ─ ─ ─ ─ ─ ─ ─ ─[파 선] ─ ─ ─ ─ ─ ─ ─[긴 틈새 파선] ── · ── · ── · ── · ── [1점 긴 쇄선] ── ·· ── ·· ── ·· ── ·· ── [2점 긴 쇄선] ── ··· ── ··· ── ··· ── ··· ── [3점 긴 쇄선] ·······················································[점 선] ── ─ ── ─ ── ─ ── ─ ── [1긴점 긴 쇄선] ── ─ ─ ── ─ ─ ── ─ ─ ── [2긴점 긴 쇄선] ─ · ─ · ─ · ─ · ─ · ─ · ─ · ─ · ─ [1점 짧은 쇄선] ─ ─ · ─ ─ · ─ ─ · ─ ─ · ─ ─ [1점 2중 짧은 쇄선] ─ ·..

PC&웹/그래픽&디자인 2010. 1. 30. 17:47

(구글 애드센스) 항상 화면에 띄우기

아래 코드를 적용하면 구글 애드센스를 화면 아래에 항상 띄웁니다. 페이지 스크롤을 해도 보입니다. CSS *html #ad_bottom {left:0; bottom:0; width:100%; height:90px; z-index:100; position:absolute; overflow-y:hidden; min-width:100px;} #ad_bottom {left:0; bottom:0; width:100%; height:90px; z-index:100;position:fixed; overflow-y:hidden; min-width:100px;text-align:right;} HTML 여기에 구글애드센스 코드 삽입 text-align:right; 속성을 left, center로 바꾸면 왼쪽, 중앙에 보이..

PC&웹/정보&기술 2010. 1. 30. 17:14

(구글 시각화 API) Gauge

결과물 보기: http://simulz.kr/dev/counter/page/ 예제 사이트에서는 트래픽을 게이지로 나타내보았다. %, MB, MB/분 먼저 아래처럼 자바스크립트를 연결해야 한다. google.load("jquery", "1"); jQuery 코어를 연결하는 것으로 구글 시각화 API에서는 필요 없지만 편리한 작업을 위해 추가해주면 좋다. google.load('visualization', '1', {packages:['gauge']}); 구글 시각화 API 중 게이지 패키지를 가져온다. adsense_728_1 var data = new google.visualization.DataTable(); 표를 만들기 위해 구글 테이블 클래스를 data에 객체로 저장한다. data.addColumn..

PC&웹/웹프로그래밍 2010. 1. 30. 11:09

(카운터) 블로그용 페이지 카운터 개발 중 - 이미지 설정 가능

오늘은 블로그 페이지 카운터 이미지를 변경할 수 있도록 업데이트 했다. 설정 페이지에서 원하는 카운터 이미지를 선택하면 블로그에 바로 적용된다. 현재 이 블로그에 적용 중이며 페이지 하단에 숫자 이미지 표시가 있다. 좀 더 다양한 이미지를 추가할 계획이다. 지금은 혼자 실험 중이며, 어느정도 완성 되면 서비스 될 예정이다.

PC&웹/웹프로그래밍 2010. 1. 29. 01:49

(PS3) PSN 트로피 조회 사이트 - 테마 적용

프로그램 바로가기 http://simulz.kr/dev/ps3/trophycard/ ※ 이 사이트에 PSN ID를 등록하고 싶다면 먼저 http://cafe.naver.com/ps3friend 카페에 가입을 하세요! (추천인: 시뮬즈) PS3 게이머라면 트로피라는 것을 다 알 것이라 믿는다. 백금, 금, 은, 동 트로피 숫자를 카드 이미지 안에 표시해주는 사이트가 있다. 이 사이트는 트로피 카드 이미지를 조회하고 순위를 볼 수 있도록했다. 트로피 순위 조회 사이트의 기능으로는 · PSN ID로 정보 조회 및 트로피 카드 업데이트 · ID별 게임 목록 보기(완료율, 트로피 수) · 게임별 회원 목록 보기 · ID, 트로피 수, 업데이트날짜 순으로 정렬하기 · UI 테마 바꾸기 어제 밤새도록 적용한 것이 테..

PC&웹/웹프로그래밍 2010. 1. 27. 10:14

(카운터) 블로그용 페이지 카운터 개발 중 - 기록 보기

이전 글: (카운터) 블로그용 페이지 카운터 개발, 적용 실험 중... 이번엔 로그 기록을 볼 수 있도록 했다. 추가로 24가지 UI 테마 플러그인도 연결했다. 운영자는 검색, 추가, 삭제가 가능하며(phpmyadmin이 귀찮을 때 좋겠다. 로딩 속도가 상당히 빠르다.) 사용자는 검색, 엑셀 출력이 가능하다. 다음엔 요약 페이지에 그래프로 볼 수 있도록 할 것이다. '정작 중요한 건 순위 글인데···'

PC&웹/웹프로그래밍 2010. 1. 27. 01:04

(jQuery UI) Theme Switcher 사용하기

아래 사이트에는 24가지의 UI 테마가 있다. http://jqueryui.com/themeroller/ 방문자마다 원하는 테마를 설정해서 보게 하려면 아래 페이지에서 플러그인을 연결하면 된다. http://jqueryui.com/docs/Theming/ThemeSwitcher 필요한 것은 jQuery Core와 Cookie 플러그인이다. 관련글: (jQuery) 연결하기 아래처럼 사용하면 쿠키 플러그인이 내장되어 있으니 따로 연결하지 않아도 된다. 때때로 적용이 안 되는 문제가 발생할 수 있다. 연속으로 테마를 바꿀 때는 적용이 잘 되지만, 링크를 통해 페이지를 갱신하거나 처음 테마를 적용할 때는 일부 객체에 테마 적용이 안 되는 현상이 있다. 해결 방법은 jQuery ready 메서드 내에 본문을 숨..

PC&웹/웹프로그래밍 2010. 1. 27. 00:54

(카운터) 블로그용 페이지 카운터 개발, 적용 실험 중...

오래전에 아래 사이트에서 서비스 됐던 블로그 페이지 카운터(Blog Page Counter)를 써본 블로거들이 많이 있을 것이다. http://n-3.net/count/ 일정 시간 후 메인 페이지로 이동한다. ESC를 누르면 색생을 바꿔볼 수있다. 너무 유용하고 기능성 있는 블로그 플러그인이라 꼭 다시 서비스 되기를 기다렸는데... 이런 서비스는 트래픽이 엄청나기 때문에 개인이 하기에 매우 힘들다. · 단순한 카운팅용이라 해도 페이지 경로, 사용자, 누적 카운트는 필수 정보이다. 이 외에는 · 접속자의 모든 정보를 기록을 임시 보관하는 테이블이 필요하다. 임시 기록이므로 삭제되기 전에 통계를 내는 작업을 해야 한다. · IP별로 하루 1회 증가시키려면 방문자 기록용 테이블이 필요하다. · 로봇을 제외 하..

PC&웹/웹프로그래밍 2010. 1. 24. 19:40

(jQuery) 의정부시 CCTV 소스 강좌 - DIV 재정렬

프로그램 소개: http://simulz.com/462 DIV 재정렬 테이블에서 주로 쓰는 정렬 기능을 DIV에 적용했다. var cctv_sort_checked = function() { var row_checked = $('#list div').has(':checked').get(); var row_unchecked = $('#list div').has(':not(:checked)').get(); $('#list').empty(); $.each(row_checked, function(index, row_checked) { row_checked.sortKey = parseFloat($(row_checked).attr('id').replace(/^[^\d.]*/,'')); }); $.each(row_un..

PC&웹/웹프로그래밍 2010. 1. 22. 12:58

(jQuery) 의정부시 CCTV 소스 강좌 - 마우스 스크롤 확대·축소

프로그램 소개: http://simulz.com/462 마우스 스크롤 줌인, 줌아웃 버튼 위에서 마우스 휠을 돌리면 CCTV가 확대·축소 된다. $("↕100%").insertAfter('#reset').hide(); var numWidth = 320; var numHeight = 240; $('#cctv_zoominout').click(function() { numWidth = 320; numHeight = 240; cctv_resize(this); }).mousewheel(function(objEvent, intDelta){ if (intDelta > 0){ if(numWidth >= 1280) return false; numWidth += 160; numHeight += 120; } else if ..

PC&웹/웹프로그래밍 2010. 1. 22. 12:28

jQuery 1.4에서 바뀐 것들

http://api.jquery.com/category/version/1.4/ jQuery 1.4 API Cheat Sheet .add( selector, context ) selectorA string containing a selector expression to match additional elements against. contextAdd some elements rooted against the specified context. .addClass( function(index, class) )function(index, class)A function returning one or more space-separated class names to be added. Receives the index ..

PC&웹/웹프로그래밍 2010. 1. 22. 11:24

(jQuery) 의정부시 CCTV 소스 강좌 - 툴팁, 마우스 오버 효과

프로그램 소개: http://simulz.com/462 툴팁, 마우스 오버 효과 var $tooltip = $('').appendTo('body'); var positionTooltip = function(event) { var tPosX = event.pageX; var tPosY = event.pageY + 20; $tooltip.css({top: tPosY, left: tPosX}); }; var mouseOver = function(event) { $(this).addClass('hover'); var cctvName = $(this).text().replace(/\d+\./, ''); var action = ' 추가'; if ($(this).is('.checked')) { action = '서 ..

PC&웹/웹프로그래밍 2010. 1. 21. 16:17

(jQuery) 의정부시 CCTV 소스 강좌 - 초기화 버튼 토글

프로그램 소개: http://simulz.com/462 초기화 버튼 토글 var toggleResetButton = function() { if($('#list :checked').length) { $('#reset').attr('disabled', false); } else { $('#reset').attr('disabled', true); } } if($('#list :checked').length) ID가 list인 객체에 속해있는 체크박스 중 속성이 checked인 객체들이 있으면, jQuery는 객체가 없어도 값을 반환하므로 .length로 검사해야 한다. $('#reset').attr('disabled', false); ID가 reset인 객체(BUTTON)의 disabled 속성을 제거한다.

PC&웹/웹프로그래밍 2010. 1. 21. 15:55

(jQuery) 의정부시 CCTV 소스 강좌 - 프리셋 선택하기

프로그램 소개: http://simulz.com/462 프리셋으로 선택하기 미리 설정된 CCTV들을 자동으로 선택한다. $('#left_foot button').click(function(){ $('#list :checkbox').attr('checked',false).parent().removeClass('checked'); $.each(cctv_preset(this.id), function() { $('#c' + this).attr('checked',true).parent().addClass('checked'); }); toggleResetButton(); }); $('#left_foot button') ID가 left_foot인 객체에 속해있는 하위 엘레멘트인 button 객체들을 가리킨다. .cl..

PC&웹/웹프로그래밍 2010. 1. 21. 15:27

(jQuery) 의정부시 CCTV 소스 강좌 - 직접 선택하기

프로그램 소개: http://simulz.com/462 CCTV 직접 선택하기 DIV 영역 또는 체크박스를 클릭하면 선택이 된다. $('#list div').click(function(event) { var $check = $(this); if($check.is(':not(.checked)')) { $check.addClass('checked').find(':not(:checked)').attr('checked',true); }else if($check.is('.checked')) { $check.removeClass('checked').find(':checked').attr('checked',false); } mouseOver.call(this, event); toggleResetButton(); })..

PC&웹/웹프로그래밍 2010. 1. 21. 14:54

530 PC&웹