<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery MouseWheel 응용</title>
<style>
/*부드러운 스크롤 이동
html { scroll-behavior: smooth;}
*/
body{ margin:0; padding:0;}
header{ position:absolute; width:100%; height:100px; border-bottom:1px solid #000; display:flex; justify-content: center; align-items: center; float:left;}
section{ width:100%; height:100vh; display:flex; justify-content: center; align-items: center; float:left;}
footer{ width:100%; height:300px; border-top:1px solid #000; display:flex; justify-content: center; align-items: center; float:left;}
section:nth-child(odd){ background-color:#f1f1f1;}
.main1{ display:inline-block; height:1400px;}
.main4{ display:inline-block; height:800px;}
.main4 h2{ width:100%;}
#main4_sub{ width:100%; overflow:hidden; display:inline-block;}
#main4_sub[data-box='0'] .main4-box{ margin-left:0;}
#main4_sub[data-box='1'] .main4-box{ margin-left:-600px;}
#main4_sub[data-box='2'] .main4-box{ margin-left:-1200px;}
#main4_sub[data-box='3'] .main4-box{ margin-left:-1800px;}
#main4_sub[data-box='4'] .main4-box{ margin-left:-2400px;}
/*
#main4_sub[data-box='5'] .main4-box{ margin-left:-3000px;}
#main4_sub[data-box='6'] .main4-box{ margin-left:-3600px;}
*/
.main4-box{ display:flex; width:4200px; transition-duration:0.3s;}
.main4-box > div{ width:600px; display:flex; justify-content: center; align-items: center; height:600px; }
.main4-box > div:nth-child(odd){ background-color:#fff1f1;}
.main4-box > div:nth-child(even){ background-color:#f1fff1;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// 스크롤 중복입력 방지용 flag
var scrollworker = false;
// 스크롤 구간 배열
var scrollTops = [];
// 기본 이동시간 0.8초
var basicinterval = 800;
// 페이지 로드 후 동작
$(function(){
// scrollTops 구간목록을 배열로 구성
$("section").each(function(index, element) {
if($(this).offset().top!=undefined){
scrollTops.push($(this).offset().top)
}
});
// scrollTops 내임차순 정렬
scrollTops.sort(function(a, b) { return a - b;});
// 마지막 scrollTops 을 넘겨줄 위치를 구하기 위해
scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
// header, section, footer 에서 마우스 휠을 넣었을 경우
$("header, section, footer").on("mousewheel", function (e) {
// 기존 이벤트 취소
e.preventDefault();
// 중복 입력 방지
if(scrollworker==false){
// 중복 입력 방지 on
scrollworker = true;
// 동작하고 있는 엘리먼트
const elm = $(this);
// 휠이벤트가 undefined 가 아니라면
if(event.wheelDelta!=undefined){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
// 지금의 스크롤탑 위치
const nst = $(window).scrollTop();
// 어디로 움직일 것인가
var moveTop;
if($(elm).hasClass("main1")){ // main1 스크롤 이동 패스
// 연속 입력위해 scrollworker 지정
scrollworker = false;
if(delta < 0){ // 아래로
moveTop = "+=50";
}else if(delta>0){ // 휠위로
moveTop = "-=50";
}
// main1에선 기본 스크롤
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 5,easing: "swing", complete: function () {
scrollworker = false;
}
});
return;
}else if($(elm).hasClass("main4")){ // main4 일 경우 조건 수행후 이어 동작시키기
// 조건을 수행시키기 위해 boxno 을 지정
var boxno = Number($("#main4_sub").attr("data-box"));
// 조건을 만족하는지에 대한 상태 flag
var movestat = false;
if(delta < 0){ // 아래로
boxno++;
// 조건값이 main4-box 의 수를 넘어가게 되면
if(boxno > $(".main4-box").length + 3){
boxno--;
// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
moveTop = scrollTops.filter(x=> x > nst)[0];
// 값이 없으면 마지막값으로 지정
if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
// 조건상태 만족처리
movestat = true;
}
}else if(delta>0){ // 휠위로
boxno--;
// 조건값이 최소라면
if(boxno < 0){
// 지금의 scrollTop 위치보다 작은 값 추출
var nstminArr = scrollTops.filter(x => x < nst);
// 역순정렬
nstminArr.sort(function(a, b) { return b - a;});
// 역순정렬한 첫번째값 추출
moveTop = nstminArr[0];
// 첫번째값이 undefined 면 움직일 위치 0으로 지정
if(moveTop == undefined) moveTop = 0;
movestat = true;
}
}
// 변경된 조건으로 스타일 적용
$("#main4_sub").attr("data-box",boxno);
// 조건에 따라 scrollTop을 지정하기 위해 변수지정
var intervals = basicinterval;
// 조건에 만족하지 않으면 움직임이 없도록 고정시킴
if(!movestat) { intervals=0; moveTop=$(".main4").offset().top;}
// scrollTop 이동
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: intervals,easing: "swing", complete: function () {
scrollworker = false;
}
});
}else{ // 그외일경우 일반적 진행
if(delta < 0){ // 아래로
// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
moveTop = scrollTops.filter(x=> x > nst)[0];
// 값이 없으면 마지막값으로 지정
if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
}else if(delta>0){ // 휠위로
// 지금의 scrollTop 위치보다 작은 값 추출
var nstminArr = scrollTops.filter(x => x < nst);
// 역순정렬
nstminArr.sort(function(a, b) { return b - a;});
// 역순정렬한 첫번째값 추출
moveTop = nstminArr[0];
// 첫번째값이 undefined 면 움직일 위치 0으로 지정
if(moveTop == undefined) moveTop = 0;
}
// scrollTop 이동
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: basicinterval,easing: "swing", complete: function () {
scrollworker = false;
}
});
}
}
}
});
});
$(window).resize(function(){
scrollTops = [];
$("section").each(function(index, element) {
if($(this).offset().top!=undefined){
scrollTops.push($(this).offset().top)
}
});
scrollTops.sort(function(a, b) { return a - b;});
scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
});
</script>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<section class="main0">
<h2>Main 0</h2>
</section>
<section class="main1">
<h2>Main 1</h2>
</section>
<section class="main2">
<h2>Main 2</h2>
</section>
<section class="main3">
<h2>Main 3</h2>
</section>
<section class="main4">
<div>
<h2>Main 4</h2>
<div id="main4_sub" data-box="0">
<div class="main4-box">
<div class="main4-box-1">4-1</div>
<div class="main4-box-2">4-2</div>
<div class="main4-box-3">4-3</div>
<div class="main4-box-4">4-4</div>
<div class="main4-box-5">4-5</div>
<div class="main4-box-6">4-6</div>
<div class="main4-box-7">4-7</div>
</div>
</div>
</div>
</section>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>
22. 8. 4.
Jquery 한화면 단위 Mouse Wheel 이동 (응용)
JQuery 한화면 단위 Mouse Wheel 이동를 토대로 응용해서 복합적으로...
22. 1. 19.
Javascript 동적 드래그 앤 드롭 레이어 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>드래그 앤 드롭 동적 생성</title>
<style>
html, body {margin:0; padding:0; }
#content { position:relative; width:100%; height:70vh; background-color:#f1f1f1; display:inline-block; overflow:scroll; }
.formdiv { width: 300px; height: 300px; display: inline-block; border: 1px solid #000; background-color: #000; position: absolute; cursor:move; left:0; top:0; }
</style>
<script>
// 시작위치
var startX = 0;
var startY = 0;
// 클릭위치
var clickX = 0;
var clickY = 0;
// 맨앞으로
var zIndex = 0;
function DragStartFunction(ev,el) {
if (el.style.left != undefined) {
startX = el.style.left;
startX = Number(startX.replace("px", ""));
}
if (el.style.top != undefined) {
startY = el.style.top;
startY = Number(startY.replace("px", ""));
}
clickX = ev.clientX - startX;
clickY = ev.clientY - startY;
}
function DragEndFunction(ev) {
var moveX = ev.clientX - clickX;
var moveY = ev.clientY - clickY;
ev.target.style.left = moveX + "px";
ev.target.style.top = moveY + "px";
zIndex++;
ev.target.style.zIndex = zIndex;
}
window.onload = function () {
document.getElementById("btn").onclick = function () {
var newDiv = document.createElement("div");
newDiv.className = "formdiv";
newDiv.setAttribute("draggable", true);
newDiv.setAttribute("ondragstart", "DragStartFunction(event,this)");
newDiv.setAttribute("ondragend", "DragEndFunction(event)");
// 구분을 위해 랜덤색상
newDiv.setAttribute("style", "background-color:#" + Math.round(Math.random() * 0xffffff).toString(16));
document.getElementById("content").appendChild(newDiv);
}
}
</script>
</head>
<body>
<a id="btn">ADD</a>
<div id="content"></div>
</body>
</html>
22. 1. 13.
웹페이지 페이지 이동(?) 갱신( Javascript History Api )
페이지 이동시 부드럽게 이동하기 위한 방법(=한페이지에서 변화를...)
Javascript 파일(/main.js)
PHP 페이지(/index.php, /A/index.php) : 복붙을 위해...
페이지구성(/header.html)
PHP 구성(/main.php)
PHP 구성(/A/main.php)
Javascript 파일(/main.js)
// 뒤로가기시 페이지 새로고침
window.onpopstate = function(event) {
var np = document.location
BodyClassLoad(np);
}
// 페이지 시작시 a태그의 href 조정(타 도메인일경우 그대로 두고 같은 도메인일 경우 function 으로 처리되도록..)
window.onload = function(){
var abtn = document.querySelectorAll("a");
for(var i = 0; i < abtn.length; i++){
const loc = abtn[i].getAttribute("href");
if(loc.indexOf("://") == -1){
MoveHrefClick(abtn[i],loc);
}else{
if(loc.indexOf("://"+window.location.origin) > -1){
MoveHrefClick(abtn[i],loc);
}
}
}
}
// body class 조정 및 section 의 내용 교체
function BodyClassLoad(url){
var nc = "";
var mhref = "";
if(url.origin != undefined){
nc = url.href.substring(url.origin.length,url.origin.length+url.href.length);
}else{
nc = url;
}
mhref = nc;
if(nc.substring(0,1)=="/"){
nc = nc.substring(1,nc.length);
}
if(nc.substring(nc.length-1,nc.length)=="/"){
nc = nc.substring(0,nc.length - 1);
}
nc = nc.replace("/"," ");
document.querySelector("body").className = "BodyTag "+ nc;
var xhr = new XMLHttpRequest();
var loadurl = mhref;
if(loadurl.indexOf("?") == -1){
loadurl += "/main.php";
loadurl = loadurl .replace("//","/");
}else{
// PHP 페이지를 불러오도록 상황에 따라 변경
loadurl = loadurl .replace("?","main.php?");
}
xhr.open('GET', loadurl, true);
xhr.send();
xhr.onload = function(){
if (xhr.status == 200) {
document.querySelector("section").innerHTML = xhr.response;
} else {
// 실패
}
}
}
// a태그 href 비활성화 및 history 에 이전주소로 기록
function MoveHrefClick(el,href){
el.removeAttribute("href");
el.onclick = function(){
history.pushState({page: 1}, document.title, href);
BodyClassLoad(href)
}
}
PHP 페이지(/index.php, /A/index.php) : 복붙을 위해...
<?php
$relative_path = preg_replace("`\/[^/]*\.php$`i", "/", $_SERVER['PHP_SELF']);
$pathNode = explode( '/', $relative_path );
$bodyClass = "BodyTag";
for( $i = 0;$i < sizeof($pathNode); $i++){
if($pathNode[$i] != ""){
$bodyClass .= " ".$pathNode[$i];
}
}
$path1 = "Order";
$path2 = "";
$path3 = "";
if($bodyClass != "BodyTag"){
if(sizeof($pathNode)>1){
$path1 = $pathNode[1];
}
if(sizeof($pathNode)>2){
$path2 = $pathNode[2];
}
if(sizeof($pathNode)>3){
$path3 = $pathNode[3];
}
}else{
$bodyClass .= " ".$path1;
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/main.js" defer></script>
</head>
<body class="<?php echo $bodyClass; ?>">
<header><?php include $_SERVER["DOCUMENT_ROOT"]."/header.html"; ?></header>
<section><?php include $_SERVER["DOCUMENT_ROOT"].$relative_path."main.php"; ?></section>
<footer><?php include $_SERVER["DOCUMENT_ROOT"]."/footer.html"; ?></footer>
</body>
</html>
페이지구성(/header.html)
<a href="/">Home</a> <a href="/A/">A</a>
PHP 구성(/main.php)
<h2>Home</h2>
PHP 구성(/A/main.php)
<h2>A</h2>
21. 7. 26.
제이쿼리(Jquery) 탭메뉴(Tab Menu)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab 메뉴</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function () {
$(".tabbtn").on("click", function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".tablist").removeClass("active").eq(index).addClass("active");
});
});
</script>
<style>
.tabnav{ width:100%; display:inline-block; float:left;}
.tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
.tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
.tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
.tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
.tab > .active{ padding:0.5em; display:block; min-height:300px;}
</style>
</head>
<body>
<nav class="tabnav">
<a class="tabbtn active">Tab1</a>
<a class="tabbtn">Tab2</a>
<a class="tabbtn">Tab3</a>
</nav>
<ul class="tab">
<li class="tablist active">
Tab1 Content
</li>
<li class="tablist">
Tab2 Content
</li>
<li class="tablist">
Tab3 Content
</li>
</ul>
</body>
</html>
Javascript 버전
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab 메뉴</title>
<script>
window.onload = function () {
var btns = document.querySelectorAll(".tabbtn");
for (var i = 0; i < btns.length; i++) {
btns[i].setAttribute("onclick", "btnClick(" + i + ");");
}
}
function btnClick(index) {
var tabbtn = document.getElementsByClassName("tabbtn");
var tablist = document.getElementsByClassName("tablist");
for (var i = 0; i < tabbtn.length; i++) {
if (index == i) {
tabbtn[i].className = "tabbtn active";
tablist[i].className = "tablist active";
} else {
tabbtn[i].className = "tabbtn";
tablist[i].className = "tablist";
}
}
}
</script>
<style>
.tabnav{ width:100%; display:inline-block; float:left;}
.tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
.tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
.tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
.tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
.tab > .active{ padding:0.5em; display:block; min-height:300px;}
</style>
</head>
<body>
<nav class="tabnav">
<a class="tabbtn active">Tab1</a>
<a class="tabbtn">Tab2</a>
<a class="tabbtn">Tab3</a>
</nav>
<ul class="tab">
<li class="tablist active">
Tab1 Content
</li>
<li class="tablist">
Tab2 Content
</li>
<li class="tablist">
Tab3 Content
</li>
</ul>
</body>
</html>
20. 9. 9.
Jquery Layer Popup(Drag & Drop)
은근히 쓰게되는 제이쿼리 레이어팝업...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>레이어 팝업</title>
<style>
/* Layer 팝업 css */
.LayerPopupTbl {position: absolute;border: 1px solid #2d2d2d;display: table;background-color: #ffffff;border-collapse: collapse;}
.LayerPopupTbl > thead > tr > td {width: 100%;padding-top: 3px;padding-bottom: 3px;background-color: #00CCFF;text-align: right;}
.LayerPopupTbl > tbody > tr > td {background-color: #FFF;display: table-cell;}
.LayerPopupTbl > tbody > tr > td img {margin:-1px;float:left;}
.LayerPopupTbl > tfoot > tr > td {background-color: #c9c9c9;padding: 3px;}
</style>
<script>
/* Popup */
var PopupmoveX = 0;
var PopupmoveY = 0;
var topPopup = 0;
var leftPopup = 0;
function zIndexReload(ele) {
$(ele).css("z-index", 1000).siblings().css("z-index", 999);
}
function Popupdrag(ev) {
if ($(ev.target).offset() != undefined) {
topPopup = ev.clientY - $(ev.target).offset().top;
leftPopup = ev.clientX - $(ev.target).offset().left;
}
PopupmoveX = ev.clientX;
PopupmoveY = ev.clientY;
}
function Popupdrop(ev) {
PopupmoveX = ev.clientX;
PopupmoveY = ev.clientY;
$(ev.target).css("top", (PopupmoveY - topPopup)).css("left", (PopupmoveX - leftPopup));
}
function setCookie(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
//todayDate.getDate()- localtime의 달의 날짜를 반환(1~31). setDate의경우 달의 날짜를 설정
document.cookie = name + '=' + escape(value) + '; path=/; expires=' + todayDate.toGMTString() + ';';
}
function getCookie(name) {
var nameOfCookie = name + '=';
var x = 0;
while (x <= document.cookie.length) {
var y = (x + nameOfCookie.length);
if (document.cookie.substring(x, y) == nameOfCookie) {
if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
endOfCookie = document.cookie.length;
return unescape(document.cookie.substring(y, endOfCookie));
}
x = document.cookie.indexOf(' ', x) + 1;
if (x == 0)
break;
}
return '';
}
// 오늘 하루 이창을 열지 않음
function PopupClose(elem) {
var elemName = $(elem).parents("table:first").attr("id");
setCookie(elemName, 'done', 1); // 오른쪽 숫자는 쿠키를 유지할 기간을 설정합니다
$(elem).parents("table:first").remove();
}
$(function () {
/* 목록만큼 돌린다 */
for (var i in popupArray) {
var mypopupName = popupArray[i].name;
var mypopupTop = popupArray[i].top;
var mypopupLeft = popupArray[i].left;
var mypopuphtml = popupArray[i].html;
/* 오늘 하루 이창 열지 않음을 누른상태가 아니라면 보여준다. */
if (getCookie(mypopupName) != "done") {
var popuptbl = document.createElement("table");
popuptbl.setAttribute("class", "LayerPopupTbl");
popuptbl.setAttribute("id", mypopupName);
popuptbl.setAttribute("draggable", true);
popuptbl.setAttribute("ondragstart", "Popupdrag(event)");
popuptbl.setAttribute("ondragend", "Popupdrop(event)");
popuptbl.setAttribute("onmouseover", "zIndexReload(this)");
popuptbl.style.top = mypopupTop;
popuptbl.style.left = mypopupLeft;
var formhtml = [];
formhtml.push("<thead><tr><td><a onclick=\"$(this).parents('table:first').remove();\">[닫기]</a></td></tr></thead>");
formhtml.push("<tbody><tr><td>" + mypopuphtml + "</td></tr></tbody>");
formhtml.push("<tfoot><tr><td><label><input type=\"checkbox\" onClick=\"PopupClose(this);\" /> 오늘 하루 이창을 열지 않음</label></td></tr></tfoot>");
popuptbl.innerHTML = formhtml.join("");
document.body.appendChild(popuptbl);
}
}
});
/* 팝업목록 name=팝업이름(id), top:팝업위치, left: 팝업위치, html : 팝업내용 - 만질경우 이부분만 고쳐서 사용하려고 구성... */
var popupArray = [
/* 팝업1 */
{ "name": "POPUP_ex_1", "top": "8px", "left": "20px", "html": "<a href='http://www.naver.com'><img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/banner_roulette.png'/></a>" },
/* 팝업2 */
{ "name": "POPUP_ex_2", "top": "8px", "left": "300px", "html": "<div style=\"background-color:yellow\"><h4 style=\"margin:0;padding:0;line-height:1.6;\">공지사항</h4><p style=\"margin:0;padding:0;line-height:1.6;\">안녕하세요</p></div>" },
/* 팝업3 */
{ "name": "POPUP_ex_3", "top": "176px", "left": "20px", "html": "<img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/bingo_banner.png'>" },
]
</script>
</head>
<body>
</body>
</html>
20. 8. 10.
Javascript 링크이동없이 URL 바꾸기
참고 : https://developer.mozilla.org/ko/docs/Web/API/History/pushState
p.html
page.html
p.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
a {
background-color: #000;
color: #fff;
margin: 2px;
cursor: pointer;
}
</style>
<script>
window.onload = function () {
document.getElementById("btn1").addEventListener("click", function () {
var page = 1;
var state = { 'page_id': page, 'user_id': "" }
var title = ''
var url = 'page.html?page=' + page;
history.pushState(state, title, url);
// Javascript
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
alert('XMLHTTP Fail');
return false;
}
httpRequest.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) {
document.getElementById("view").innerHTML = this.responseText;
} else {
alert('Error');
}
}
};
httpRequest.open('GET', url);
httpRequest.send();
});
document.getElementById("btn2").addEventListener("click", function () {
var page = 2;
var state = { 'page_id': page, 'user_id': "" }
var title = ''
var url = 'page.html?page=' + page;
history.pushState(state, title, url);
// JQuery
$.ajax({
type: "GET",
url: url,
success: function (res) {
$("#view").html(res);
}
});
});
}
</script>
</head>
<body>
<a id="btn1">Page 1</a>
<a id="btn2">Page 2</a>
<div id="view"></div>
</body>
</html>
page.html
Page 입니다
20. 6. 9.
Javascript & JQuery Rainbow Text Effect
Rainbow Text Animation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>JQuery Rainbow Animation</title>
<style>
.RainbowText{ text-align:center;}
.RainbowText > span{ font-size:30px; font-weight:900; animation-duration:1s; animation-iteration-count:infinite;}
</style>
<script>
// 색상목록
var rainbowArr = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
// 클래스명
var className = "RainbowText";
$(function () {
var html = [];
html.push("<style>");
// rainbowArr에 넣은 수만큼 클래스를 만든다.
for (var i = 0; i < rainbowArr.length; i++) {
// 클래스 선언
html.push(".rainbow" + i + "{color:" + rainbowArr[i] + ";animation-name:rainbow" + i + "Ani;}");
// 애니메이션 키프레임 선언
html.push("@keyframes rainbow" + i + "Ani{");
for (var j = i; j < i + rainbowArr.length + 1; j++) {
// 0% ~ 100% 가 등록한 배열순서대로 색상이 되도록 처리
html.push(((100 / rainbowArr.length) * (j - i)) + "%{color:" + rainbowArr[((j) % rainbowArr.length)] + "}");
}
html.push("}");
}
html.push("</style>");
// body 에 추가
$("body").append(html.join("\n"))
// 선언한 클래스에 html 을 치환
$("." + className).each(function () {
var str = $(this).text();
var html = [];
// text 수 만큼
for (var i = 0; i < str.length; i++) {
// span 으로 잘개쪼개고 클래스명을 지정
html.push("<span class=\"rainbow" + (i % rainbowArr.length) + "\">" + str.substring(i, i + 1) + "</span>");
}
// 클래스의 html태그를 변경
$(this).html(html.join(""));
});
});
</script>
</head>
<body>
<div class="RainbowText">Rainbow</div>
<div class="RainbowText">■■■■■■■</div>
</body>
</html>
19. 12. 13.
Javascript & JQuery 퀵 메뉴
간단하게 만들어본 제이쿼리 퀵메뉴
자바스크립트(Javascript)로 변경해 봄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
/* 스크롤바 박스 */
.quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
</style>
<script>
// 스크롤을 만들기위해 body 를 키움 없애도 뎀
$(function () { $("html,body").css("height", "10000px");});
// 따라다니게 하기 위한 처리
$(window).scroll(function (e) {
$(".quick").css("top", $(this).scrollTop()+"px");
});
</script>
</head>
<body>
<div class="quick">
<div>
<ul>
<li><a>menu 1</a></li>
<li><a>menu 2</a></li>
<li><a>menu 3</a></li>
<li><a>menu 4</a></li>
<li><a>menu 5</a></li>
</ul>
</div>
</div>
</body>
</html>
자바스크립트(Javascript)로 변경해 봄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
/* 스크롤바 박스 */
.quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
</style>
<script>
// 창크기 키워 스크롤 나오게 하기
window.onload = function () {
document.getElementsByTagName("body")[0].style.height = "10000px";
}
window.addEventListener('scroll', function (e) {
document.querySelector(".quick").style.top = window.scrollY + "px"
})
</script>
</head>
<body>
<div class="quick">
<div>
<ul>
<li><a>menu 1</a></li>
<li><a>menu 2</a></li>
<li><a>menu 3</a></li>
<li><a>menu 4</a></li>
<li><a>menu 5</a></li>
</ul>
</div>
</div>
</body>
</html>
19. 5. 16.
Javascript 페이지 스크롤상 위치 상단표시
간혹 블러그에 보이길래 그냥 만들어봄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#scrollBars{ position:fixed; height:8px; background-color:red; width:0; left:0; top:0; transition-duration:0.3s;}
</style>
<script type="text/javascript">
var barId = "scrollBars";
window.onload = function () {
// bar 개체생성
var barElm = document.createElement("div");
barElm.setAttribute("id", barId);
// body 에 추가
document.body.appendChild(barElm);
// 문서의폭
var bMax = document.body.clientWidth;
// 문서의 높이
var bH = document.body.clientHeight;
// 화면의 높이
var wH = window.innerHeight;
// 초기 세팅
document.getElementById(barId).setAttribute("style", "width:" + Math.floor(window.scrollY / (bH - wH) * 100) + "%");
// 스크롤 이벤트 등록
document.addEventListener("scroll", function (e) {
// 스크롤이 이동할때마다 처리
document.getElementById(barId).setAttribute("style", "width:" + Math.floor(window.scrollY / (bH - wH) * 100) + "%");
}, true);
}
</script>
</head>
<body>
<div style="width:100%; height:5000px;">이건그냥 스크롤용으로 만든 태그</div>
</body>
</html>
19. 4. 24.
Javascript 한화면 단위 Mouse Wheel 이동
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MouseWheel</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
html,body{ margin:0; padding:0; width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; color:#ffffff; font-size:24pt;}
</style>
<script type="text/javascript">
// 적용할 클래스명
var className = "box";
// 지금의 스크롤 위치를 담을 변수
var currentScroll = 0;
// 에니메이션 효과를 주기위한 function 명 선언
var tim;
window.onload = function () {
/* Div Class 명 */
// box클래스 추출
var elm = document.getElementsByClassName(className);
// box클래스 개수만큼 실행
for (var i = 0; i < elm.length; i++) {
// box 에 각각 마우스 휠 감지
// 휠감지
elm[i].addEventListener("mousewheel", MouseWheelHandler, false);
// firefox 용 휠처리
elm[i].addEventListener("DOMMouseScroll", MouseWheelHandler, true);
}
}
function MouseWheelHandler(e) {
// 스크롤 취소시킴(이걸 안할경우 도중에 명령을 받아 화면이 덜덜 거릴수 있음)
e.preventDefault();
// 휠값처리
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
// 여러개일경우 다른 selector 을 확인하기위한 상위 dom 으로 이동
var p = e.target.parentElement;
// 몇번째 dom 인지 저장
var index = Array.prototype.indexOf.call(p.children, e.target);
// 같은 위치의 돔목록 을 저장
var elmArr = e.target.parentElement.children;
// 지금의 스크롤 위치 저장
currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
// 다음위치의 좌표(기본이므로 현재의 Y 좌표 저장)
var NextTarget = currentScroll;
// 마우스휠 위로
if (delta > 0) {
// 맨처음 지점 제외
if (index > 0) {
// 이전 dom 의 index 번호
var no = (index - 1);
// 좌표위치 저장
NextTarget = elmArr[no].offsetTop;
}
}
// 마우스휠 아래로
else if (delta < 0)
{
// 맨마지막 지점 제외
if (index < elmArr.length - 1) {
// 다음 dom 의 index 번호
var no = (index + 1);
// 좌표위치 저장
NextTarget = elmArr[no].offsetTop;
}
}
// 애니메이션
// 필요없으면 바로 window.scrollTo(0, NextTarget);
// 에니메이션 초기화
clearInterval(tim);
// 애니메이션 실행
tim = setInterval(tran, 1);
// 애니메이션 function
function tran() {
// 이동속도 숫자가 작아질수록 느려짐
var speed = 5;
// 현재 스크롤과 이동후 스크롤이 같으면 정지시킨다
if (currentScroll == NextTarget) {
clearInterval(tran);
} else {
// 스크롤을 위로 올릴 경우
if (currentScroll - speed > NextTarget)
{
currentScroll -= speed;
}
// 스크롤을 내일 경우
else if (currentScroll + speed < NextTarget)
{
currentScroll += speed;
}
// 스크롤이 속도로 지정된 변수보다 작을 경우 강제적으로 맞춰준다
else
{
currentScroll = NextTarget;
}
// 스크롤위치 변경
window.scrollTo(0, currentScroll);
}
}
}
</script>
</head>
<body>
<div class="box" style="background-color:red;">1</div>
<div class="box" style="background-color:orange;">2</div>
<div class="box" style="background-color:yellow;">3</div>
<div class="box" style="background-color:green;">4</div>
<div class="box" style="background-color:blue;">5</div>
<div class="box" style="background-color:indigo;">6</div>
<div class="box" style="background-color:violet;">7</div>
</body>
</html>
JQuery 한화면 단위 Mouse Wheel 이동 를 참고해서 그냥 Javascript 로...
17. 1. 5.
Classic ASP 인스타그램(Instagram) API 로그인
login.asp 파일
<script type="text/javascript">
function instagramlogin(){
var openUrl = "https://api.instagram.com/oauth/authorize/";
var client_id = "97e52e1da4064299b2a1ba87db3c4167";
var return_url = "http://www.mysite.com/login/instagram.asp";
var DataVal = "";
DataVal += "client_id="+escape(client_id).replace(/\+/gi, '%2B');;
DataVal += "&redirect_uri="+escape(return_url).replace(/\+/gi, '%2B');
DataVal += "&response_type=code";
var instagramLogin = window.open(openUrl+"?"+DataVal,"instagramLogin","width=450,height=300,scrollbars=no");
instagramLogin.focus();
}
</script>
<a onclick="instagramlogin();">인스타그램(Instagram) 로그인</a>
instagram.asp 파일
<!-- #include file = "aspJSON1.17.asp"--><%
return_code = request.QueryString("code")
returnURL = server.URLEncode("http://www.mysite.com/login/instagram.asp")
client_id = "97e52e1da4064299b2a1ba87db3c4167"
client_secret = "db0bcf2b60124ff5a1234298f80a8ca8"
Set httpObj = Server.CreateObject("WinHttp.WinHttpRequest.5.1")
httpObj.open "POST" , "https://api.instagram.com/oauth/access_token", False
httpObj.SetRequestHeader "Content-Type", "application/x-www-form-urlencoded"
httpObj.Send "grant_type=authorization_code&client_id=" & client_id & "&client_secret=" & client_secret & "&redirect_uri=" & returnURL & "&code=" & return_code
httpObj.WaitForResponse
If httpObj.Status = "200" Then
JsonText = httpObj.ResponseText
Else
JsonText = null
End If
Set oJSON = New aspJSON
oJSON.loadJSON(JsonText)
If oJSON.data("error") = "" then
UsrId = oJSON.data("user").item("id")
UserNn = oJSON.data("user").item("username")
response.write(UsrId & " 님 안녕하세요")
End If
%>
참고
aspJSON1.17.asp 파일
aspJSON1.17.asp 파일
<%
'Februari 2014 - Version 1.17 by Gerrit van Kuipers
Class aspJSON
Public data
Private p_JSONstring
private aj_in_string, aj_in_escape, aj_i_tmp, aj_char_tmp, aj_s_tmp, aj_line_tmp, aj_line, aj_lines, aj_currentlevel, aj_currentkey, aj_currentvalue, aj_newlabel, aj_XmlHttp, aj_RegExp, aj_colonfound
Private Sub Class_Initialize()
Set data = Collection()
Set aj_RegExp = new regexp
aj_RegExp.Pattern = "\s{0,}(\S{1}[\s,\S]*\S{1})\s{0,}"
aj_RegExp.Global = False
aj_RegExp.IgnoreCase = True
aj_RegExp.Multiline = True
End Sub
Private Sub Class_Terminate()
Set data = Nothing
Set aj_RegExp = Nothing
End Sub
Public Sub loadJSON(inputsource)
inputsource = aj_MultilineTrim(inputsource)
If Len(inputsource) = 0 Then Err.Raise 1, "loadJSON Error", "No data to load."
select case Left(inputsource, 1)
case "{", "["
case else
Set aj_XmlHttp = Server.CreateObject("Msxml2.ServerXMLHTTP")
aj_XmlHttp.open "GET", inputsource, False
aj_XmlHttp.setRequestHeader "Content-Type", "text/json"
aj_XmlHttp.setRequestHeader "CharSet", "UTF-8"
aj_XmlHttp.Send
inputsource = aj_XmlHttp.responseText
set aj_XmlHttp = Nothing
end select
p_JSONstring = CleanUpJSONstring(inputsource)
aj_lines = Split(p_JSONstring, Chr(13) & Chr(10))
Dim level(99)
aj_currentlevel = 1
Set level(aj_currentlevel) = data
For Each aj_line In aj_lines
aj_currentkey = ""
aj_currentvalue = ""
If Instr(aj_line, ":") > 0 Then
aj_in_string = False
aj_in_escape = False
aj_colonfound = False
For aj_i_tmp = 1 To Len(aj_line)
If aj_in_escape Then
aj_in_escape = False
Else
Select Case Mid(aj_line, aj_i_tmp, 1)
Case """"
aj_in_string = Not aj_in_string
Case ":"
If Not aj_in_escape And Not aj_in_string Then
aj_currentkey = Left(aj_line, aj_i_tmp - 1)
aj_currentvalue = Mid(aj_line, aj_i_tmp + 1)
aj_colonfound = True
Exit For
End If
Case "\"
aj_in_escape = True
End Select
End If
Next
if aj_colonfound then
aj_currentkey = aj_Strip(aj_JSONDecode(aj_currentkey), """")
If Not level(aj_currentlevel).exists(aj_currentkey) Then level(aj_currentlevel).Add aj_currentkey, ""
end if
End If
If right(aj_line,1) = "{" Or right(aj_line,1) = "[" Then
If Len(aj_currentkey) = 0 Then aj_currentkey = level(aj_currentlevel).Count
Set level(aj_currentlevel).Item(aj_currentkey) = Collection()
Set level(aj_currentlevel + 1) = level(aj_currentlevel).Item(aj_currentkey)
aj_currentlevel = aj_currentlevel + 1
aj_currentkey = ""
ElseIf right(aj_line,1) = "}" Or right(aj_line,1) = "]" or right(aj_line,2) = "}," Or right(aj_line,2) = "]," Then
aj_currentlevel = aj_currentlevel - 1
ElseIf Len(Trim(aj_line)) > 0 Then
if Len(aj_currentvalue) = 0 Then aj_currentvalue = aj_line
aj_currentvalue = getJSONValue(aj_currentvalue)
If Len(aj_currentkey) = 0 Then aj_currentkey = level(aj_currentlevel).Count
level(aj_currentlevel).Item(aj_currentkey) = aj_currentvalue
End If
Next
End Sub
Public Function Collection()
set Collection = Server.CreateObject("Scripting.Dictionary")
End Function
Public Function AddToCollection(dictobj)
if TypeName(dictobj) <> "Dictionary" then Err.Raise 1, "AddToCollection Error", "Not a collection."
aj_newlabel = dictobj.Count
dictobj.Add aj_newlabel, Collection()
set AddToCollection = dictobj.item(aj_newlabel)
end function
Private Function CleanUpJSONstring(aj_originalstring)
aj_originalstring = Replace(aj_originalstring, Chr(13) & Chr(10), "")
aj_originalstring = Mid(aj_originalstring, 2, Len(aj_originalstring) - 2)
aj_in_string = False : aj_in_escape = False : aj_s_tmp = ""
For aj_i_tmp = 1 To Len(aj_originalstring)
aj_char_tmp = Mid(aj_originalstring, aj_i_tmp, 1)
If aj_in_escape Then
aj_in_escape = False
aj_s_tmp = aj_s_tmp & aj_char_tmp
Else
Select Case aj_char_tmp
Case "\" : aj_s_tmp = aj_s_tmp & aj_char_tmp : aj_in_escape = True
Case """" : aj_s_tmp = aj_s_tmp & aj_char_tmp : aj_in_string = Not aj_in_string
Case "{", "["
aj_s_tmp = aj_s_tmp & aj_char_tmp & aj_InlineIf(aj_in_string, "", Chr(13) & Chr(10))
Case "}", "]"
aj_s_tmp = aj_s_tmp & aj_InlineIf(aj_in_string, "", Chr(13) & Chr(10)) & aj_char_tmp
Case "," : aj_s_tmp = aj_s_tmp & aj_char_tmp & aj_InlineIf(aj_in_string, "", Chr(13) & Chr(10))
Case Else : aj_s_tmp = aj_s_tmp & aj_char_tmp
End Select
End If
Next
CleanUpJSONstring = ""
aj_s_tmp = split(aj_s_tmp, Chr(13) & Chr(10))
For Each aj_line_tmp In aj_s_tmp
aj_line_tmp = replace(replace(aj_line_tmp, chr(10), ""), chr(13), "")
CleanUpJSONstring = CleanUpJSONstring & aj_Trim(aj_line_tmp) & Chr(13) & Chr(10)
Next
End Function
Private Function getJSONValue(ByVal val)
val = Trim(val)
If Left(val,1) = ":" Then val = Mid(val, 2)
If Right(val,1) = "," Then val = Left(val, Len(val) - 1)
val = Trim(val)
Select Case val
Case "true" : getJSONValue = True
Case "false" : getJSONValue = False
Case "null" : getJSONValue = Null
Case Else
If (Instr(val, """") = 0) Then
If IsNumeric(val) Then
getJSONValue = CDbl(val)
Else
getJSONValue = val
End If
Else
If Left(val,1) = """" Then val = Mid(val, 2)
If Right(val,1) = """" Then val = Left(val, Len(val) - 1)
getJSONValue = aj_JSONDecode(Trim(val))
End If
End Select
End Function
Private JSONoutput_level
Public Function JSONoutput()
dim wrap_dicttype, aj_label
JSONoutput_level = 1
wrap_dicttype = "[]"
For Each aj_label In data
If Not aj_IsInt(aj_label) Then wrap_dicttype = "{}"
Next
JSONoutput = Left(wrap_dicttype, 1) & Chr(13) & Chr(10) & GetDict(data) & Right(wrap_dicttype, 1)
End Function
Private Function GetDict(objDict)
dim aj_item, aj_keyvals, aj_label, aj_dicttype
For Each aj_item In objDict
Select Case TypeName(objDict.Item(aj_item))
Case "Dictionary"
GetDict = GetDict & Space(JSONoutput_level * 4)
aj_dicttype = "[]"
For Each aj_label In objDict.Item(aj_item).Keys
If Not aj_IsInt(aj_label) Then aj_dicttype = "{}"
Next
If aj_IsInt(aj_item) Then
GetDict = GetDict & (Left(aj_dicttype,1) & Chr(13) & Chr(10))
Else
GetDict = GetDict & ("""" & aj_JSONEncode(aj_item) & """" & ": " & Left(aj_dicttype,1) & Chr(13) & Chr(10))
End If
JSONoutput_level = JSONoutput_level + 1
aj_keyvals = objDict.Keys
GetDict = GetDict & (GetSubDict(objDict.Item(aj_item)) & Space(JSONoutput_level * 4) & Right(aj_dicttype,1) & aj_InlineIf(aj_item = aj_keyvals(objDict.Count - 1),"" , ",") & Chr(13) & Chr(10))
Case Else
aj_keyvals = objDict.Keys
GetDict = GetDict & (Space(JSONoutput_level * 4) & aj_InlineIf(aj_IsInt(aj_item), "", """" & aj_JSONEncode(aj_item) & """: ") & WriteValue(objDict.Item(aj_item)) & aj_InlineIf(aj_item = aj_keyvals(objDict.Count - 1),"" , ",") & Chr(13) & Chr(10))
End Select
Next
End Function
Private Function aj_IsInt(val)
aj_IsInt = (TypeName(val) = "Integer" Or TypeName(val) = "Long")
End Function
Private Function GetSubDict(objSubDict)
GetSubDict = GetDict(objSubDict)
JSONoutput_level= JSONoutput_level -1
End Function
Private Function WriteValue(ByVal val)
Select Case TypeName(val)
Case "Double", "Integer", "Long": WriteValue = val
Case "Null" : WriteValue = "null"
Case "Boolean" : WriteValue = aj_InlineIf(val, "true", "false")
Case Else : WriteValue = """" & aj_JSONEncode(val) & """"
End Select
End Function
Private Function aj_JSONEncode(ByVal val)
val = Replace(val, "\", "\\")
val = Replace(val, """", "\""")
'val = Replace(val, "/", "\/")
val = Replace(val, Chr(8), "\b")
val = Replace(val, Chr(12), "\f")
val = Replace(val, Chr(10), "\n")
val = Replace(val, Chr(13), "\r")
val = Replace(val, Chr(9), "\t")
aj_JSONEncode = Trim(val)
End Function
Private Function aj_JSONDecode(ByVal val)
val = Replace(val, "\""", """")
val = Replace(val, "\\", "\")
val = Replace(val, "\/", "/")
val = Replace(val, "\b", Chr(8))
val = Replace(val, "\f", Chr(12))
val = Replace(val, "\n", Chr(10))
val = Replace(val, "\r", Chr(13))
val = Replace(val, "\t", Chr(9))
aj_JSONDecode = Trim(val)
End Function
Private Function aj_InlineIf(condition, returntrue, returnfalse)
If condition Then aj_InlineIf = returntrue Else aj_InlineIf = returnfalse
End Function
Private Function aj_Strip(ByVal val, stripper)
If Left(val, 1) = stripper Then val = Mid(val, 2)
If Right(val, 1) = stripper Then val = Left(val, Len(val) - 1)
aj_Strip = val
End Function
Private Function aj_MultilineTrim(TextData)
aj_MultilineTrim = aj_RegExp.Replace(TextData, "$1")
End Function
private function aj_Trim(val)
aj_Trim = Trim(val)
Do While Left(aj_Trim, 1) = Chr(9) : aj_Trim = Mid(aj_Trim, 2) : Loop
Do While Right(aj_Trim, 1) = Chr(9) : aj_Trim = Left(aj_Trim, Len(aj_Trim) - 1) : Loop
aj_Trim = Trim(aj_Trim)
end function
End Class
%>
16. 10. 24.
VB로 MS-SQL 연동
insert,update,delete
select
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles MyBase.Load
Dim connectionString As String
Dim sqlConn As New SqlConnection
Dim sqlComm As New SqlCommand
connectionString = "server = 127.0.0.1,1433; uid = sa; pwd = password; database = member;"
sqlConn = New SqlConnection(connectionString)
sqlComm = New SqlCommand()
sqlComm.Connection = sqlConn
sqlComm.CommandText = "insert into tbl_member (code,id,addr) values (@param1,@param2,param3)"
'sqlComm.CommandText = "update tbl_member set addr=@param3 where code=@param1 and id=param2"
'sqlComm.CommandText = "delete tbl_member where code=@param1 and id=param2"
sqlComm.Parameters.AddWithValue("@param1", "1")
sqlComm.Parameters.AddWithValue("@param2", "abc")
sqlComm.Parameters.AddWithValue("@param3", "서울")
Try
sqlConn.Open()
sqlComm.ExecuteNonQuery()
sqlConn.Close()
Catch ex As Exception
Response.Write(ex)
End Try
End Sub
End Class
select
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles MyBase.Load
Dim connectionString As String
Dim sqlConn As New SqlConnection
Dim sqlComm As New SqlCommand
Dim dt As DataTable
dt = New DataTable("MEMBER")
dt.Columns.Add("code", GetType(Integer))
dt.Columns.Add("id", GetType(String))
dt.Columns.Add("addr", GetType(String))
connectionString = "server = 127.0.0.1,1433; uid = sa; pwd = password; database = member;"
sqlConn = New SqlConnection(connectionString)
sqlComm = New SqlCommand()
sqlComm.Connection = sqlConn
sqlComm.CommandText = "select top 10 code,id,addr from tbl_member where m_id=@param1 order by m_id asc"
sqlComm.Parameters.AddWithValue("@param1", "master")
Try
sqlConn.Open()
Dim rs As SqlDataReader = sqlComm.ExecuteReader()
If rs.HasRows Then
Do While rs.Read()
dt.Rows.Add(rs(0), rs(1), rs(2))
Loop
End If
rs.Close()
sqlConn.Close()
Catch ex As Exception
Response.Write(ex)
End Try
Response.Write("<table border=""1""><thead><tr><th>CODE</th><th>ID</th><th>ADDR</th></tr></thead><tbody>")
For i As Integer = 0 To dt.Rows.Count - 1
Response.Write(String.Format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", dt.Rows(i).Item("code"), dt.Rows(i).Item("id"), dt.Rows(i).Item("addr")))
Next
Response.Write("</tbody></table>")
End Sub
End Class
PHP에서 ODBC 이용 MS-SQL 연동
<?php
$ListArr = array();
$conn = odbc_connect('dbserver', 'ID', 'PASSWORD');
if($conn){
$sql = "select top 10".PHP_EOL.
"m_code,m_id,convert(char(10),m_regdate,120) as m_regdate".PHP_EOL.
"from tbl_member".PHP_EOL.
"order by m_code desc".PHP_EOL;
$rs = odbc_exec($conn, $sql);
while (odbc_fetch_row($rs)){
array_push($ListArr,
array(
odbc_result($rs,"m_code"),
iconv('euc-kr','utf-8',odbc_result($rs,"m_id")),
odbc_result($rs,"m_regdate")
)
);
}
odbc_close($conn);
}
?>
<table border="1">
<thead><tr><th>CODE</th><th>ID</th><th>DATE</th></tr></thead>
<tbody>
<?php
if(count($ListArr)>0){
foreach($ListArr as $arr1){
echo "<tr><td>".$arr1[0]."</td><td>".$arr1[1]."</td><td>".$arr1[2]."</td></tr>";
}
}else{
echo "<tr><td colspan=\"3\" align=\"center\">No Exist</td></tr>";
}
?>
</tbody>
</table>
JQuery 한화면 단위 Mouse Wheel 이동
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MouseWheel</title>
<style type="text/css">
html,body{ margin:0; padding:0; width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; color:#ffffff; font-size:24pt;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var elm = ".box";
$(elm).each(function (index) {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
var moveTop = $(window).scrollTop();
var elmSelecter = $(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try{
moveTop = $(elmSelecter).next().offset().top;
}catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if ($(elmSelecter).prev() != undefined) {
try{
moveTop = $(elmSelecter).prev().offset().top;
}catch(e){}
}
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
});
});
}
</script>
</head>
<body>
<div class="box" style="background-color:red;">1</div>
<div class="box" style="background-color:orange;">2</div>
<div class="box" style="background-color:yellow;">3</div>
<div class="box" style="background-color:green;">4</div>
<div class="box" style="background-color:blue;">5</div>
<div class="box" style="background-color:indigo;">6</div>
<div class="box" style="background-color:violet;">7</div>
</body>
</html>
ie 일 경우 ie 6 이하의 브라우저에서 안됨 이때에는 head에<meta http-equiv="X-UA-Compatible" content="IE=edge">
를 넣어줘야한다
추가 (좌우)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MouseWheel</title>
<style type="text/css">
html,body{ margin:0; padding:0; width:100%; height:100%;}
.boxwrap{ display: table; table-layout: fixed; width: 700%; height: 100%; table-layout: fixed;}
.box{ display: table-cell;position:relative; color:#ffffff; font-size:24pt;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var elm = ".box";
$(elm).each(function (index) {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
var moveTop = $(window).scrollLeft();
var elmSelecter = $(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try{
moveTop = $(elmSelecter).next().offset().left;
}catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if ($(elmSelecter).prev() != undefined) {
try{
moveTop = $(elmSelecter).prev().offset().left;
}catch(e){}
}
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollLeft: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
});
});
}
</script>
</head>
<body>
<div class="boxwrap">
<div class="box" style="background-color:red;">1</div>
<div class="box" style="background-color:orange;">2</div>
<div class="box" style="background-color:yellow;">3</div>
<div class="box" style="background-color:green;">4</div>
<div class="box" style="background-color:blue;">5</div>
<div class="box" style="background-color:indigo;">6</div>
<div class="box" style="background-color:violet;">7</div>
</div>
</body>
</html>
좀 복잡한 방법 : Jquery 한화면 단위 Mouse Wheel 이동 (응용)
VB.NET Email 전송
Function eMailCDOSend(MailTitle As String, MailTag As String, Sender As String, Receiver As String, addFile As String) As Boolean
' MailTitle : 제목
' MailTag : html내용
' Sender : 보내는 사람
' Receiver : 받는사람
Dim eMailObject, eMailConfig
Dim SchemaPath
eMailObject = Server.CreateObject("CDO.Message")
eMailConfig = Server.CreateObject("CDO.Configuration")
SchemaPath = "http://schemas.microsoft.com/cdo/configuration/"
Try
With eMailConfig.Fields
.Item(SchemaPath & "sendusing") = 2 'CDOSendUsingPort
.Item(SchemaPath & "smtpserver") = "127.0.0.1" 'CDOSendUsingPort [ServerIP]
.Item(SchemaPath & "smtpserverport") = "325" 'Port
.Update
End With
eMailObject.Configuration = eMailConfig
eMailConfig = Nothing
If addFile <> "" Then
eMailObject.To = Receiver
eMailObject.From = Sender
eMailObject.Subject = MailTitle
eMailObject.HTMLBody = MailTag
eMailObject.BodyPart.Charset = "ks_c_5601-1987"
eMailObject.HTMLBodyPart.Charset = "ks_c_5601-1987"
eMailObject.HTMLBodyPart.ContentTransferEncoding = "quoted-printable"
eMailObject.AddAttachment(addFile)
eMailObject.fields.update
eMailObject.Send
Else
With eMailObject
.From = Sender
.To = Receiver
.Subject = MailTitle
.HTMLBody = MailTag
.BodyPart.Charset = "ks_c_5601-1987"
.HTMLBodyPart.Charset = "ks_c_5601-1987"
.HTMLBodyPart.ContentTransferEncoding = "quoted-printable"
.Send
End With
End If
eMailObject = Nothing
Catch ex As Exception
Return False
End Try
Return True
End Function
16. 7. 28.
C#으로 MS-SQL 연동
insert,update,delete
select
using System;
using System.Data.SqlClient;
namespace MsSql
{
class Program
{
static void Main(string[] args)
{
// Sql 연결정보(서버:127.0.0.1, 포트:3535, 아이디:sa, 비밀번호 : password, db : member)
string connectionString = "server = 127.0.0.1,3535; uid = sa; pwd = password; database = member;";
// Sql 새연결정보 생성
SqlConnection sqlConn = new SqlConnection(connectionString);
SqlCommand sqlComm = new SqlCommand();
sqlComm.Connection = sqlConn;
sqlComm.CommandText = "insert into tbl_member (id,name,addr) values (@param1,@param2,@param3)";
//sqlComm.CommandText = "update tbl_member set addr=@param3 where id=@param1 and name=@param2";
//sqlComm.CommandText = "delete tbl_member where id=@param1 and name=@param2 and addr=@param3";
sqlComm.Parameters.AddWithValue("@param1", "abc");
sqlComm.Parameters.AddWithValue("@param2", "홍길동");
sqlComm.Parameters.AddWithValue("@param3", "서울");
sqlConn.Open();
sqlComm.ExecuteNonQuery();
sqlConn.Close();
}
}
}
select
using System;
using System.Data.SqlClient;
namespace MsSql
{
class Program
{
static void Main(string[] args)
{
// Sql 연결정보(서버:127.0.0.1, 포트:3535, 아이디:sa, 비밀번호 : password, db : member)
string connectionString = "server = 127.0.0.1,3535; uid = sa; pwd = password; database = member;";
// Sql 새연결정보 생성
SqlConnection sqlConn = new SqlConnection(connectionString);
SqlCommand sqlComm = new SqlCommand();
sqlComm.Connection = sqlConn;
sqlComm.CommandText = "select top 10 id,addr from tbl_member where name=@param1 order by id asc";
sqlComm.Parameters.AddWithValue("@param1", "김준");
sqlConn.Open();
using (SqlDataReader SqlRs = sqlComm.ExecuteReader())
{
Console.WriteLine("ID \t \t | Address");
while (SqlRs.Read())
{
Console.WriteLine(string.Format("{0} \t \t | {1}", SqlRs[0].ToString(),SqlRs[1].ToString()));
}
}
sqlConn.Close();
}
}
}
16. 7. 20.
C#.NET 파일업로드
upload.html 파일
<!doctype html> <html> <head> <meta charset="utf-8"> <title>파일업로드</title> </head> <body> <form name="form1" method="post" action="Upload.aspx" enctype="multipart/form-data"> <input type="file" name="file1" multiple/> <input type="submit" value="업로드"/> </form> </body> </html>
Upload.aspx 파일
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Upload.aspx.cs" Inherits="Upload" %>
Upload.aspx.cs 파일
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Web;
public partial class Upload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection uploadedFiles = Request.Files;
int maxFile = 10;
if (uploadedFiles.Count > maxFile)
{
Response.Write("한번에 올릴 수 있는 파일수는 " + maxFile.ToString() + "개입니다.");
return;
}
for (int i = 0; i < uploadedFiles.Count; i++)
{
HttpPostedFile userPostedFile = uploadedFiles[i];
if (userPostedFile.ContentLength > 0 && !String.IsNullOrEmpty(userPostedFile.FileName))
{
string result = UploadFileSave(userPostedFile, i);
if (result != "")
{
// 업로드 성공
Response.Write(result + " ");
}
else
{
// 업로드 실패
}
}
}
}
private string UploadFileSave(HttpPostedFile SaveFile, int no)
{
// 저장폴더
string wPath = Server.MapPath("/file") + "\\";
string thumPath = Server.MapPath("/file/thum") + "\\";
DirectoryInfo di = new DirectoryInfo(wPath);
// 폴더가 없을 경우 생성
if (di.Exists == false)
di.Create();
di = new DirectoryInfo(thumPath);
// 폴더가 없을 경우 생성
if (di.Exists == false)
di.Create();
// 확장자
string fileType = SaveFile.FileName.Substring(SaveFile.FileName.LastIndexOf(".") + 1);
// 변경할 파일 이름
string saveFileName = DateTime.Now.ToString("yyyyMMddhhmmss") + '_' + no + "." + fileType;
try
{
// 이미지 확장자 일 경우
if (("jpg|jpeg|bmp|gif|png").IndexOf(fileType.ToLower()) > -1)
{
Bitmap img = new Bitmap(SaveFile.InputStream);
RotateFlipType rft = RotateFlipType.RotateNoneFlipNone;
PropertyItem[] properties = img.PropertyItems;
foreach (PropertyItem p in properties)
{
// 이미지가 똑바로 되어있지 않은 경우
if (p.Id == 274)
{
Int16 orientation = BitConverter.ToInt16(p.Value, 0);
switch (orientation)
{
case 1:
rft = RotateFlipType.RotateNoneFlipNone;
break;
case 3:
rft = RotateFlipType.Rotate180FlipNone;
break;
case 4:
rft = RotateFlipType.Rotate90FlipNone;
break;
case 8:
rft = RotateFlipType.Rotate270FlipNone;
break;
}
}
}
// 이미지가 부분은 이미지가 누워있을 경우 세워준다
if (rft != RotateFlipType.RotateNoneFlipNone)
{
img.RotateFlip(rft);
}
// 저장
img.Save(wPath + "\\" + saveFileName);
// 썸네일 작업
// 썸네일 폭
int thumW = 100;
// 썸네일 높이
int thumH = 100;
// 썸네일 좌표 X
int thumX = 0;
// 썸네일 좌표 Y
int thumY = 0;
// 썸네일 이미지 그리기전 사이즈 지정
Bitmap thumimg = new Bitmap(thumW, thumH);
if (img.Width >= thumW && img.Height >= thumH)
{
if (img.Width >= img.Height)
{
thumW = (thumH * img.Width) / img.Height;
thumX = (thumW - thumH) / 2;
thumY = 0;
}
else
{
thumH = (thumW * img.Height) / img.Width;
thumY = (thumH - thumW) / 2;
thumX = 0;
}
}
else if (img.Width >= img.Height && img.Height < thumH)
{
thumW = img.Width;
thumH = img.Height;
thumX = (img.Width - thumW) / 2;
thumY = (img.Height - thumH) / 2 * -1;
}
else if (img.Width < img.Height && img.Height >= thumH)
{
thumW = img.Width;
thumH = img.Height;
thumX = (img.Width - thumW) / 2 * -1;
thumY = (img.Height - thumH) / 2;
}
else
{
thumW = img.Width;
thumH = img.Height;
thumX = (img.Width - thumW) / 2 * -1;
thumY = (img.Height - thumH) / 2 * -1;
}
Graphics gp = Graphics.FromImage(thumimg);
gp.InterpolationMode = InterpolationMode.HighQualityBicubic;
gp.DrawImage(img, new Rectangle(-thumX, -thumY, thumW, thumH));
// 썸네일 저장
thumimg.Save(wPath + "\\thum\\" + saveFileName);
}
else
{
// 이미지가 아닐경우
// 저장하기
SaveFile.SaveAs(wPath + "\\" + saveFileName);
}
}
catch
{
return "";
}
return saveFileName;
}
}
14. 1. 10.
안드로이드 Classic ASP PUSH 서버
push.asp 파일
<%
' 안드로이드 ASP 푸시 요청
PushServerURL = "https://android.googleapis.com/gcm/send"
' 브라우저APIkey
ApplicationAPIKey = "AIzaSyBi0pn1ckaJhRL9kK3mbwsHzk7x0fdE_Z8"
' regId(받을사람이 지급받은 registration_ids - 여러명일 경우 배열로 받아처리하면 될 듯 최대 1000)
RegId = "APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9po8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR"
' 알림명
tickerText = "알림테스트"
' 알림 제목
contentTitle = "테스트 제목"
' 알림 내용
message = "헬로~~~ 테스트입니다.~~~"
postJSONData = "" & _
"{" & _
" ""registration_ids"" : [ """ & RegId & """ ]" & _
", ""data"": {" & _
" ""tickerText"" : """ & tickerText & """" & _
" , ""contentTitle"" : """ & contentTitle & """" & _
" , ""message"" : """ & message & """" & _
" }" & _
"}"
Set httpObj = Server.CreateObject("WinHttp.WinHttpRequest.5.1")
httpObj.open "POST" , PushServerURL, False
httpObj.SetRequestHeader "Content-Type", "application/json"
httpObj.SetRequestHeader "Authorization", "key=" & ApplicationAPIKey
httpObj.Send postJSONData
httpObj.WaitForResponse
If httpObj.Status = "200" Then
response.Write("전송성공 : " & httpObj.ResponseText)
Else
response.Write("전송실패 : " & httpObj.ResponseText)
End If
%>
참고:
html
<form method="post" action="push.asp">
tickerText :
<input type="text" name="tickerText" value="알림테스트" /><br>
contentTitle :
<input type="text" name="contentTitle" value="테스트 제목" /><br>
message :
<textarea name="message">헬로~~~ 테스트입니다.~~~</textarea><br>
RegId :
<input type="text" name="RegId" value="APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9po8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR" /><br>
<input type="text" name="RegId" value="APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9pp8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR" /><br>
<input type="text" name="RegId" value="APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9pd8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR" /><br>
<input type="submit" value="전송요청" />
</form>
asp
<%
tickerText = request.Form("tickerText")
contentTitle = request.Form("contentTitle")
message = request.Form("message")
RegId_Count = request.Form("RegId").Count
RegId = ""
For i = 1 To RegId_Count
if i<>1 then RegId = RegId & ","
RegId = RegId & """" & request.Form("RegId")(i) & """"
Next
postJSONData = "" & _
"{" & _
" ""registration_ids"" : [ " & RegId & " ]" & _
", ""data"": {" & _
" ""tickerText"" : """ & tickerText & """" & _
" , ""contentTitle"" : """ & contentTitle & """" & _
" , ""message"" : """ & message & """" & _
" }" & _
"}"
%>
13. 8. 10.
안드로이드 C#.NET PUSH 서버
push.aspx 파일
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="push.aspx.cs" Inherits="mobile_push" %>
<!DOCTYPE html>
<html>
<head>
<title>푸쉬 전송 TEST</title>
</head>
<body>
<asp:Literal ID="SendResult" runat="server" />
</body>
</html>
push.aspx.cs 파일
using System;
using System.Net.Security;
using System.Net;
using System.Text;
using System.IO;
using System.Security.Cryptography.X509Certificates;
public partial class mobile_push : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 브라우저APIkey
string BrowserAPIKey = Request.QueryString["ApiKey"];
// BrowserAPIKey = "AIzaSyBi0pn1ckaJhRL9kK3mbwsHzk7x0fdE_Z8";
// regId(받을사람이 지급받은 registration_ids - 여러명일 경우 배열로 받아처리하면 될 듯 최대 1000)
string RegId = Request.QueryString["RegId"];
// RegId = "APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9po8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR";
// 알림명
string tickerText = Request.QueryString["Ticker"];
// tickerText = "알림테스트";
// 알림 제목
string contentTitle = Request.QueryString["Title"];
// contentTitle = "알림제목";
// 알림 내용
string message = Request.QueryString["Msg"];
// message = "안녕하세요~~~푸쉬입니다.";
string postData = "";
postData += "{";
postData += " \"registration_ids\": [ \"" + RegId + "\" ]";
postData += ", \"data\": {";
postData += " \"tickerText\":\"" + tickerText + "\"";
postData += " , \"contentTitle\":\"" + contentTitle + "\"";
postData += " , \"message\": \"" + message + "\"";
postData += " }";
postData += "}";
string response = SendGCMNotification(BrowserAPIKey, postData);
SendResult.Text = response;
}
private string SendGCMNotification(string apiKey, string postData, string postDataContentType = "application/json")
{
ServicePointManager.ServerCertificateValidationCallback += new RemoteCertificateValidationCallback(ValidateServerCertificate);
// MESSAGE CONTENT
byte[] byteArray = Encoding.UTF8.GetBytes(postData);
// CREATE REQUEST
HttpWebRequest Request = (HttpWebRequest)WebRequest.Create("https://android.googleapis.com/gcm/send");
Request.Method = "POST";
Request.KeepAlive = false;
Request.ContentType = postDataContentType;
Request.Headers.Add(string.Format("Authorization: key={0}", apiKey));
Request.ContentLength = byteArray.Length;
Stream dataStream = Request.GetRequestStream();
dataStream.Write(byteArray, 0, byteArray.Length);
dataStream.Close();
// SEND MESSAGE
try
{
WebResponse Response = Request.GetResponse();
HttpStatusCode ResponseCode = ((HttpWebResponse)Response).StatusCode;
if (ResponseCode.Equals(HttpStatusCode.Unauthorized) || ResponseCode.Equals(HttpStatusCode.Forbidden))
{
var text = "Unauthorized - need new token";
Console.Write(text);
}
else if (!ResponseCode.Equals(HttpStatusCode.OK))
{
var text = "Response from web service isn't OK";
Console.Write(text);
}
StreamReader Reader = new StreamReader(Response.GetResponseStream());
string responseLine = Reader.ReadToEnd();
Reader.Close();
return responseLine;
}
catch (Exception e)
{
}
return "Error";
}
public static bool ValidateServerCertificate(object sender,X509Certificate certificate,X509Chain chain,SslPolicyErrors sslPolicyErrors)
{
return true;
}
}
13. 7. 19.
Javascript 브라우저 기본정보 체크
window.onload = function(){
var html="";
html += "width : " + "<strong>" + screen.availWidth + "</strong>";
html += "height : " + "<strong>" + screen.availHeight + "</strong>";
html += "platform : " + "<strong>" + navigator.platform + "</strong>";
html += "app_name : " + "<strong>" + navigator.appName + "</strong>";
html += "app_version : " + "<strong>" + navigator.appVersion + "</strong>";
document.write(html);
}
피드 구독하기:
덧글 (Atom)