https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript 테스트 버전 0.2 (2004-04-26) ko https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&wr_id=5202 주로 프로모션용 웹페이지나 사이트의 메인페이지에 많은 내용의 콘텐츠를 보여줄 때 사용합니다.
대개 메뉴를 클릭하면 해당 메뉴 섹션으로 스크롤이 이동하여 섹션의 내용이 화면에 보이도록 UI를 구성합니다.

[CODE html]<div class="header">
<h1>header</h1>
</div>
<div id="contents">
<div class="floating-menu">
<ul>
<li class="m"><a href="#section-01" class="menu-01"><span>메뉴 1</span></a></li>
<li class="m"><a href="#section-02" class="menu-02"><span>메뉴 2</span></a></li>
<li class="m"><a href="#section-03" class="menu-03"><span>메뉴 3</span></a></li>
<li class="btn-top"><a href="#header" class="menu-04"><span>상단으로</span></a></li>
</ul>
</div>
<div class="section-01 scroll">
<h2>섹션 1</h2>
</div>
<div class="section-02 scroll">
<h2>섹션 2</h2>
</div>
<div class="section-03 scroll">
<h2>섹션 3</h2>
</div>
</div>
<div class="footer"> 푸터단 </div>
Temp CSS
CSS
.header { position: relative; height: 200px; background-color: #ffccec;}
/* contents */
.section-01,.section-02,.section-03 { position: relative; height: 600px; }
.section-01 { background-color: #ffc8a2;}
.section-02 { background-color: #91b8ff;}
.section-03 { background-color: #a2ffbd;}
/* floating menu */
.floating-menu { position: fixed; right: 50px; top: 50%; z-index: 100; width: 128px;  margin: -220px 0 0 0; background-color: #d4cecf;; /*background: url("") 0 0 no-repeat;*/ }
.floating-menu li { margin: 0; *float: left; }
.floating-menu a { display: block; width: 123px; padding: 10px 0;color: #fff; text-align: center; border: 1px solid #464646; text-decoration: none;}
.floating-menu a.menu-04 { height: 20px; background: none; }
.floating-menu li.on a { background-color: #333; color: #fff;/*background: url("") 0 0 no-repeat;*/ }
.floating-menu li.on a.menu-01 {/* background-position: -131px 0;*/ }
.floating-menu li.on a.menu-02 {/* background-position: -131px -104px;*/ }
.floating-menu li.on a.menu-03 { /*background-position: -131px -219px;*/ }
.footer { height: 100px; background-color: #707070;}
스크롤 메뉴 스크립트
JAVASCRIPT
(function (global, $) {
var $menu     = $('.floating-menu li.m'),
$contents = $('.scroll'),
$doc      = $('html, body');
$(function () {
// 해당 섹션으로 스크롤 이동
$menu.on('click','a', function(e){
var $target = $(this).parent(),
idx     = $target.index(),
section = $contents.eq(idx),
offsetTop = section.offset().top;
$doc.stop()
.animate({
scrollTop :offsetTop
}, 800);
return false;
});
});
// menu class 추가
$(window).scroll(function(){
var scltop = $(window).scrollTop();
$.each($contents, function(idx, item){
var $target   = $contents.eq(idx),
i         = $target.index(),
targetTop = $target.offset().top;
if (targetTop <= scltop) {
$menu.removeClass('on');
$menu.eq(idx).addClass('on');
}
if (!(200 <= scltop)) {
$menu.removeClass('on');
}
})
});
// Go to the TOP
var btnTop = $('.btn-top');
btnTop.on('click','a', function(e){
e.preventDefault();
$doc.stop()
.animate({
scrollTop : 0
},800)
});
}(window, window.jQuery));[/CODE]]]> MintState Tue, 10 Dec 2024 09:39:13 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5201
[CODE js]<script>
function CehckPassWord(ObjUserPassWord)
{

    if(!ObjUserPassWord.match(/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-_])(?=.*[0-9]).{6,16}$/))
    {
        return false;
    }

    /*if(ObjUserID.indexOf(ObjUserPassWord) > -1)
    {
        return false;
    }*/
   
    var SamePass_0 = 0; //동일문자 카운트
    var SamePass_1 = 0; //연속성(+) 카운드
    var SamePass_2 = 0; //연속성(-) 카운드


   
    var chr_pass_0;
    var chr_pass_1;
    var chr_pass_2;

   
    for(var i=0; i < ObjUserPassWord.length; i++)
    {
        chr_pass_0 = ObjUserPassWord.charAt(i);
        chr_pass_1 = ObjUserPassWord.charAt(i+1);
       
        //동일문자 카운트
        if(chr_pass_0 == chr_pass_1)
        {
    SamePass_0 = SamePass_0 + 1
        }
       
     
        chr_pass_2 = ObjUserPassWord.charAt(i+2);
        //연속성(+) 카운드

        if(chr_pass_0.charCodeAt(0) - chr_pass_1.charCodeAt(0) == 1 && chr_pass_1.charCodeAt(0) - chr_pass_2.charCodeAt(0) == 1)
        {
            SamePass_1 = SamePass_1 + 1
        }
       
        //연속성(-) 카운드
        if(chr_pass_0.charCodeAt(0) - chr_pass_1.charCodeAt(0) == -1 && chr_pass_1.charCodeAt(0) - chr_pass_2.charCodeAt(0) == -1)
        {
            SamePass_2 = SamePass_2 + 1
        }
    }
    if(SamePass_0 > 1)
    {
        return false;
    }
 
    if(SamePass_1 > 1 || SamePass_2 > 1 )
    {
        return false;
    }

 return true;
}
var password1 = "spdn2738!!";
var chkpass = CehckPassWord(password1);
if (!chkpass) {
alert("비밀번호는 6자이상 16자리 이하 영문, 숫자, 특수문자 조합으로 입력해 주세요.");
} else {
alert("사용가능");
}
</script>[/CODE]]]> MintState Fri, 22 Mar 2019 16:26:51 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5200 http://jsfiddle.net/gchoice/n7Mur/

[CODE html]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery 글자수 체크</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$('.remaining').each(function() {
// count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.
var $count = $('.count', this);
var $input = $(this).prev();
// .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
var maximumCount = $count.text() * 1;
// update 함수는 keyup, paste, input 이벤트에서 호출한다.
var update = function() {
var before = $count.text() * 1;
var now = maximumCount - $input.val().length;
// 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
if (now < 0) {
var str = $input.val();
alert('글자 입력수가 초과하였습니다.');
$input.val(str.substr(0, maximumCount));
now = 0;
}
// 필요한 경우 DOM을 수정한다.
if (before != now) {
$count.text(now);
}
};
// input, keyup, paste 이벤트와 update 함수를 바인드한다
$input.bind('input keyup paste', function() {
setTimeout(update, 0)
});
update();
});
});
</script>
</head>
<body>
<textarea id="contentHelp"></textarea>
<div class=remaining>남은 글자수: <span class="count">100</span></div>
</body>
</html>[/CODE]

[B]쓴 글자수[/B]
[CODE html]<textarea name="memo" id="memo"></textarea>
<script language="javascript">
$(document).ready(function(){
var update = function() {
var now = $('#memo').val().length;
$('.count').text(now);
};
// input, keyup, paste 이벤트와 update 함수를 바인드한다
$('#memo').bind('input keyup paste', function() {
setTimeout(update, 0)
});
update();
});
</script>[/CODE]]]> MintState Tue, 24 Jul 2018 15:57:14 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5199
홈페이지가 길어지면 상단으로 버튼을 만드는 것이 좋다.
스크롤에 따라 나타났다 사라졌다 하는 버튼을 만들어 본다.

[CODE html]<!--상단올라가기-->
<script type=text/javascript>
$(document).ready(function(){
    $(".return-top").hide(); // 탑 버튼 숨김
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { // 스크롤 내릴 표시
                $('.return-top').fadeIn();
            } else {
                $('.return-top').fadeOut();
            }
        });
        $('.return-top').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);  // 탑 이동 스크롤 속도
            return false;
        });
    });
});
</script>
<a class="return-top" href="#"><img src="./img/topbtn.png"></a>
<style>
.return-top {right:10px; bottom:30px; position:fixed; z-index:9999; padding:5px 10px 10px 10px;}
.return-top img {width:45px;}
</style>
<!--상단올라가기끝-->[/CODE]


중앙 정렬 홈페이지 일경우.
[CODE html]<div class="return-top"><a href="#"><img src="./img/topbtn.png"></a></div>
<style>
.return-top {left:50%;bottom:30px;position:fixed;z-index:9999;margin-left:530px;}
.return-top a {padding:5px 10px 10px 10px;}
.return-top img {width:45px;}
</style>[/CODE]]]> MintState Thu, 19 Apr 2018 11:23:22 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5198
정규식을 이용한 방법
[CODE js]//숫자를 한글로 바꾸어 반환
function getKorNameMoney(amount) {
  // 공백을 찾는다.
  // 해석을 하면 "/" 정규식을 시작한다. "^" 해당 받은 문자를 시작한다.
  // "\s" 공백을 "$" 해당 줄의 끝에서부터 찾아라. "/" 여기까지가 정규식이다.
  // 정규식.test(정규식체크할변수) 로 공백이 있으면 이 로직을 탄다.
  if(/^\s*$/.test(amount))
    return "";
 
  // 헉 또 정규식이... 자 또 해석을 해 보자.
  // "/" 정규식 시작하고 "^" 첫 라인부터 "0" 숫자가 0이 "*" 여러개 존재 "|"(Or이죠)하거나
  // ","를 "*" 여러개 있다면 replace로 "" 으로 치환하라는거죠.
  // "/" 정규식 닫은 곳에 i와 g는 i는 대소문자를 무시하라는 거죠.
  // g는 패턴에 맞는 모든 문자를 찾아라는 거죠.
  amount = amount.replace(/^0*|,*/ig,"");
  var korNumName = ["","일","이","삼","사","오","육","칠","팔","구"];
  var unit = ["","십","백","천"];
  var gunit = [
                ["","^[1-4]$",1],
                ["만","^[5-8]$",5],
                ["억","^9|1[0-2]$",9],
                ["조","^1[3-6]$",13],
                ["경","^1[7-9]|20$", 17],
                ["해","^2[1-4]$", 21],
                ["자","^2[5-8]$", 25]
              ];

  var res = "";      // 리턴값 정의
  var tmp = "";    // 임시로 숫자 단위별로 저장할 변수
  var mxlen = amount.length;
  var rexp = null;  // 해당 정규식을 저장한다.
  var cpos = 0;
 
  for(var i=0; i < mxlen ; i++){
    cpos = mxlen - i;
    tmp = korNumName[parseInt(amount.charAt(i))];
 
    if (tmp != "")
    {
      for(var j=0; j < gunit.length; j++){
          rexp = new RegExp(gunit[j][1]);
 
          if(rexp.test(cpos)){
              tmp += unit[(cpos - gunit[j][2])];
 
              if(cpos == gunit[j][2])
                  tmp += gunit[j][0];
          }
        }
    }
    res += (tmp + " ");
  }
 
  res += " 원정";
  return res;
}[/CODE]
 

배열을 이용한 방법
[CODE js]hanNumber  = new Array ('영', '일', '이', '삼', '사', '오', '육', '칠', '팔', '구' );
fourFour    = new Array ('일', '만', '억', '조' );
fourDigit  = new Array ('일', '십', '백', '천' );
function getHanAmt(num, strValue) {
    str = "";
    strr = num.split(",");
    for (i=0; i<strr.length; i++){
        str += strr[i];
    }
    num = str;
    // 한글금액 처리
    delimiter = ' ';
    var endValue = ' 원';    // 원(圓)
    var endZValue= ' 영';    // 영(零)
    bPos = 0; // 만(萬), 억(億), 조(兆)
    sPos = 0; // 십(十), 백(百), 천(千)
    digit = 0;
    if (strValue==null || strValue=='0'){        // 원단위
        bPos = 0; // 만, 억, 조
        sPos = 0; // 십, 백, 천
        endValue = " 원";
        endZValue = "영 원";
    } else if (strValue=='1'){    //만단위
        bPos = 1; // 만, 억, 조
        sPos = 0; // 십, 백, 천
        endValue = " 원";
        endZValue = "영 만원";
    } else if (strValue=='2') {    //십만단위
        bPos = 1; // 만, 억, 조
        sPos = 1; // 십, 백, 천
        endValue = "만 원";
        endZValue = "영 십만원";
    }
    szDigit = '';
    is_start = false;
    appendFF = false;
    len = num.length;
    szHan = '';
    for (i=len-1;i>=0;i--) {
        szDigit = num.substring(i,i+1);
        digit = parseInt(szDigit);
        if (digit!=0) {
            if (bPos!=0 && sPos==0) {
                if (is_start==true) szHan += delimiter;
                szHan += fourFour[bPos]; // 만, 억
                appendFF=false;
            }
            if (bPos!=0 && appendFF==true) {
                if (is_start==true) szHan += delimiter;
                szHan += fourFour[bPos]; // 만, 억
                appendFF=false;
            }
            if (sPos!=0) szHan += fourDigit[sPos]; // 십, 백, 천
            szHan += hanNumber[digit]; // 일, 이, 삼
            is_start=true;
        }
        else if (sPos==0 && bPos!=0) appendFF = true;
        sPos++;
        if (sPos%4==0) {
            sPos=0;
            bPos++;
            if (bPos>=4) return "(범위초과)";
        }
    }
    if (is_start==false)
    {
        rslt = '';
        return rslt + endZValue;
    }
    else
    {
        rslt = '';
        for(i = szHan.length - 1; i >= 0; i--) {
            rslt += szHan.substring(i, i + 1);
        }
        return rslt + endValue;
    }
}[/CODE]]]> MintState Thu, 02 Nov 2017 09:43:39 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5197
[U]video.js - open source HTML5 & Flash video player[/U]
https://github.com/videojs/video.js
http://videojs.com/


[B]a plugin for videojs run a full 360 degree panorama video. [/B]
https://github.com/yanwsh/videojs-panorama
http://yanwsh.github.io/videojs-panorama/]]> MintState Fri, 27 Oct 2017 14:30:53 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5196
가끔씩 gif 를 홈페이지에 넣게 되는데 계속 로테이션으로 플레이 되어 안좋은 때가 있습니다.

그래서 소개해 드릴것이 gifplayer 입니다. jquery 플러그인식으로 작동합니다.
[URL=http://rubentd.com/gifplayer]http://rubentd.com/gifplayer[/URL]
[URL=https://github.com/rubentd/gifplayer]https://github.com/rubentd/gifplayer[/URL]


Customizable jquery plugin to play and stop animated gifs. Similar to 9gag's. New: Video support (webm, mp4)

###Basic Usage
1. Add a preview of the gif or video file to your website
2. Specify a ‘data-src’ attribute with the path to the animated gif or video, or simply have an image with the same name and the .gif extension in the same folder of the ‘preview’ image
3. Include jquery.js, jquery.gifplayer.js and gifplayer.css on your site
4. Call the .gifplayer() method for the desired images
[CODE html]<img class="gifplayer" src="media/banana.png" />
<script>
$('.gifplayer').gifplayer();
</script>[/CODE]]]> MintState Tue, 26 Sep 2017 11:37:59 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5195
[CODE js]function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return 'error';
    }
}

var myId = getId('http://www.youtube.com/watch?v=zbYf5_S7oJo');

var myCode = '<iframe width="560" height="315" src="//www.youtube.com/embed/'
    + myId + '" frameborder="0" allowfullscreen></iframe>';[/CODE]]]> MintState Wed, 08 Mar 2017 14:39:13 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5194
암호 유효성 검사 스크립트 입니다.

출처 : http://blog.naver.com/alondightoo/220263824623

[B]1. 영문, 숫자 혼합하여 6~20자리 이내[/B]
[CODE js]function chkPwd(str){
 var reg_pwd = /^.*(?=.{6,20})(?=.*[0-9])(?=.*[a-zA-Z]).*$/;
 if(!reg_pwd.test(str)){
  return false;
 }
 return true;
}
if(!chkPwd( $.trim($('#mpassword').val()))){
 alert('비밀번호를 확인하세요.₩n(영문,숫자를 혼합하여 6~20자 이내)');   
 $('#mpassword').val('');
 $('#mpassword').focus(); return false;
 }[/CODE]


[B]2. 영문,숫자,특수문자 혼합하여 8자리~20자리 이내.(비밀번호 표준)[/B]
[CODE js]function chkPwd(str){
 var pw = str;
 var num = pw.search(/[0-9]/g);
 var eng = pw.search(/[a-z]/ig);
 var spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);
 
 if(pw.length < 8 || pw.length > 20){
  alert("8자리 ~ 20자리 이내로 입력해주세요.");
  return false;
 }
 if(pw.search(/₩s/) != -1){
  alert("비밀번호는 공백업이 입력해주세요.");
  return false;
 } if(num < 0 || eng < 0 || spe < 0 ){
  alert("영문,숫자, 특수문자를 혼합하여 입력해주세요.");
  return false;
 }
 
 return true;
}
if(!chkPwd( $.trim($('#mpassword').val()))){
  $('#mpassword').val('');
  $('#mpassword').focus();
  return false;
}[/CODE]


[B]3. 영문,숫자,특수문자 중 2가지 혼합하여 10자리~20자리 이내.(비밀번호 표준)[/B]
[CODE js]function chkPwd(str){
 var pw = str;
 var num = pw.search(/[0-9]/g);
 var eng = pw.search(/[a-z]/ig);
 var spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);
 if(pw.length < 10 || pw.length > 20){
  alert("10자리 ~ 20자리 이내로 입력해주세요.");
  return false;
 }
 if(pw.search(/₩s/) != -1){
  alert("비밀번호는 공백업이 입력해주세요.");
  return false;
 }
 if( (num < 0 && eng < 0) || (eng < 0 && spe < 0) || (spe < 0 && num < 0) ){
  alert("영문,숫자, 특수문자 중 2가지 이상을 혼합하여 입력해주세요.");
  return false;
 }
 return true;
}
if(!chkPwd( $.trim($('#mpassword').val()))){
  $('#mpassword').val('');
  $('#mpassword').focus();
  return false;
}[/CODE]]]> MintState Mon, 14 Nov 2016 14:06:21 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5193
CSS 이용하여 하단고정레이아웃을 만들어 보자.

[CODE html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>하단고정레이아웃</title>
<meta http-ｅquiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html { overflow: hidden; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#wrapper{ width: 100%; height: 100%; position: absolute; overflow-y:scroll; }
#content { width: 100%; padding-bottom:50px; }
#footer
{
 background-color:#eeeeee;
 overflow: hidden;
 position: absolute;
 bottom: 0;
 height: 50px; width:100%; text-align: center;
 margin-left:0px; margin-bottom:-1px;
}
</style>
</head>
<body>
<div id="wrapper">
 <div id="content">
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용... <BR>
  본문내용END<BR>
 </div>
</div>
<div id="footer">
 풋터내용
</div>
   
</body>
</html>[/CODE]]]> MintState Fri, 01 Jul 2016 14:30:17 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5192
[URL]http://www.highcharts.com[/URL]

[B]Highcharts[/B]
Create interactive charts easily for your web projects.
[I]Used by tens of thousands of developers and 61 out of the world's 100 largest companies, Highcharts is the simplest yet most flexible charting API on the market. [/I]

[B]Highstock[/B]
Highstock lets you create stock or general timeline charts in pure JavaScript. 
[I]Including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning. [/I]

[B]Highmaps[/B]
Interactive map charts with drilldown and touch support. 
[I]Build interactive maps to display sales, election results or any other information linked to geography. Perfect for standalone use or in dashboards in combination with Highcharts! [/I]]]> MintState Thu, 05 Mar 2015 16:04:43 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=5190
중국사이트 뒤지던중 재미있는 효과를 찾았다.

[URL]http://masonry.desandro.com/[/URL] 사이트에서 배포를 하는데 이 사이트를 방문하면 데모를 볼 수 있다.
이 소스와 infinite scroll ([URL]http://www.infinite-scroll.com/[/URL])라는 소스를 합치면 효과 만점이다.

브라우져에서 스크롤을 하단까지 나오면 다음 갤러리가 출력되는 방법을 쓰면 되겠다.
구체적인 적용방법은 한번 써봐야 알겠지만 중국쪽 사이트에서는 매력적으로 보였다.

첨부파일과 사이트를 참조하면 된다.]]> MintState Tue, 19 Nov 2013 18:54:07 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=184
기존에 dtd 선언하지 않았을 경우 파폭에서도 잘 되었는데 dtd를 선언하니 리사이즈가 안되어 검색중 발견한 포스팅입니다.

출처 : http://icq4ever.webzero.co.kr/tt/521

iframe태그를 사용하면 원래 페이지 안에 또다른 웹페이지를 넣을수가 있는데
가로, 세로 사이즈를 적용하여 넣을 공간을 잡아주어야 한다.

사이즈는 px단위를 사용할수도 있고, 테이블의 셀이나 html등 넣을 위치의 전체 공간을 기준으로 %를 사용할수도 있다. 하지만 제로보드나 여타 게시판을 만약 삽입할 경우 사이즈가 정해진것이 아니어서 집어넣은 웹페이지가 사이즈를 초과할 경우 스크롤바가 나타나거나 짤릴수가 있다.

게다가 파이어폭스는 훨씬 심각하다.
html태그는 표준이 존재하기는 하지만 IE나 firefox, safari, mozilla등 많은 브라우저마다 적용되는 태그가 있고 그렇지 않은 태그가 있다. iframe도 마찬가지인데 .. 파이어폭스의 경우 사이즈를 정해놔도 조그만한 박스로만 나온다.

[CODE html]<iframe src=zero/zboard.php?id=guest name="myframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="no">[/CODE]
[ATTACH]631[/ATTACH]
위소스를 사용하면 파이어폭스에서는 이렇게 나온다

이번에 후미진용 페이지를 만들면서 이리저리 소스를 찾아보다가 발견한 유용한 소스를 하나 소개한다.
자바스크립트를 사용하며, 웹브라우저 정보를 읽어들여 파이어폭스일경우에 별도의 함수를 사용하는듯 하다.

자바스크립트 부분
[CODE js]<script type="text/javascript">
var iframeids=["myframe"]
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=getFFVersion>=0.1? 16 : 20 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>[/CODE]

iframe 삽입 요령
[CODE html]<iframe id="myframe" src="삽입할 웹페이지" width="100%" frameborder="0"scrolling="no"></iframe>[/CODE]
iframe id는 자바스크립트에서 사용되며 반드시 이 둘은 일치해야한다.]]> MintState Mon, 11 Apr 2011 16:13:32 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=183
dtd 환경에서도 잘 작동 됩니다.

[ATTACH]630[/ATTACH]

[CODE html]<style type="text/css">
*{font-family:돋움,Dotum,AppleGothic,sans-serif;font-size:12px;color:#333;}
body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,fieldset,input,blockquote,th,td{margin:0;padding:0;}
ol,ul,dl{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover,a:hover b,a:hover em,a:hover span{color:#06c;text-decoration:underline;}

/*rolling Button*/
div.rollBtn{position:absolute;z-index:3;}
div.rollBtn a.next{background-position:-22px 0px;cursor:hand;}
div.rollBtn a.previous{margin-right:3px;cursor:hand;}
div.rollBtn a span{display:none;}

#bKey{position:relative;margin-top:9px;width:270px;zoom:1;}
#bKey .keyBg{margin:1px 0 0 0;overflow:hidden;height:18px;}
#bKey ul{clear:both;}
#bKey ul li{float:left;height:18px;}
#bKey ul li.x{background:url(http://yesyo.com/mintbbs/style/img/nav_div.gif) 100% 0 no-repeat;margin:0 7px 0 0;padding:0 7px 0 0;}
#bKey ul li a{font-weight:bold;color:#FB6A31;letter-spacing:-1px;}
#bKey .rollBtn{left:203px;top:0;}
#bKey .rollBtn .up{margin-right:3px;}
</style>
<script language="JavaScript">
function scrolling(objId,sec1,sec2,speed,height){
this.objId=objId;
this.sec1=sec1;
this.sec2=sec2;
this.speed=speed;
this.height=height;
this.h=0;
this.div=document.getElementById(this.objId);
this.htmltxt=this.div.innerHTML;
  this.div.innerHTML=this.htmltxt+this.htmltxt;
  this.div.isover=false;
  this.div.onmouseover=function(){this.isover=true;}
  this.div.onmouseout=function(){this.isover=false;}
  var self=this;
  this.div.scrollTop=0;
  window.setTimeout(function(){self.play()},this.sec1);
}
scrolling.prototype={
play:function(){
var self=this;
if(!this.div.isover){
this.div.scrollTop+=this.speed;
if(this.div.scrollTop>this.div.scrollHeight/2){
this.div.scrollTop=0;
}else{
this.h+=this.speed;
if(this.h>=this.height){
if(this.h>this.height|| this.div.scrollTop%this.height !=0){
this.div.scrollTop-=this.h%this.height;
}
this.h=0;
window.setTimeout(function(){self.play()},this.sec1);
return;
}
}
}
window.setTimeout(function(){self.play()},this.sec2);
},
prev:function(){
if(this.div.scrollTop == 0)
this.div.scrollTop = this.div.scrollHeight/2;
this.div.scrollTop -= this.height;
},
next:function(){
if(this.div.scrollTop ==  this.div.scrollHeight/2)
this.div.scrollTop =0;
this.div.scrollTop += this.height;
}
};
</script>
<div id="bKey">
<div id="jFavList" class="keyBg">
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111063">부시 8월 방한</a></li>
 <li><a href="http://c3.paran.com/?l=P111064">우리 구단 가입금</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111065">진보신당 난입 폭행</a></li>
 <li><a href="http://c3.paran.com/?l=P111066">남규리 대시</a></li>
</ul>

<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111067">미국산 쇠고기 판매</a></li>
 <li><a href="http://c3.paran.com/?l=P111068">조중동 다음</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111069">호나우지뉴 방한</a></li>
 <li><a href="http://c3.paran.com/?l=P111070">김구라 사과</a></li>
</ul>
<ul>
 <li class="x"><a href="LPG'>http://c3.paran.com/?l=P111071">LPG가격 인상</a></li>
 <li><a href="http://c3.paran.com/?l=P111072">임창용 19세이브</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111073">한전 납품비리</a></li>
 <li><a href="http://c3.paran.com/?l=P111074">유재석 웨딩사진</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111075">채은정 비키니</a></li>

 <li><a href="PD'>http://c3.paran.com/?l=P111076">PD수첩 압수영장</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111077">신혼부부 주택</a></li>
 <li><a href="http://c3.paran.com/?l=P111078">사제단 시국미사</a></li>
</ul>
</div>
<script type="text/javascript"> var hotKeyword = new scrolling("jFavList",3000,1,1,18); </script>

<div class="rollBtn" onmouseover="hotKeyword.div.isover=true;" onmouseout="hotKeyword.div.isover=false;">
  <a class="previous" onclick="hotKeyword.prev();" title="위로">[↑]</a>
  <a class="next" onclick="hotKeyword.next();" title="아래로">[↓]</a>
</div>
</div>[/CODE]]]> MintState Wed, 06 Apr 2011 11:33:15 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=182
가끔씩 select의 객체를 컨트롤할 경우가 있죠.
아래 예제를 참고 하시면 될것 같습니다.

[CODE html]<html>
<head>
<title> select 객체 예제 </title>
<script language="JavaScript">
var job = new Array("고등학생","대학생","대학원생","회사원","교수","정당인")
function test() {
var str="리스트 원소의 갯수는 "
str += document.myform.job.options.length
str += "\n"
str += "선택한 값은\n"
str += document.myform.job.options.selectedIndex
str += "\n"
str += document.myform.job.value
alert(str)
}
function sAdd(srcList, nTxt, nTxt2) {
if(nTxt != "") {
new_option = new Option(nTxt,nTxt2);
srcList.options.add(new_option,0);
alert(nTxt+"를 추가하였습니다");
}
}

function sDel(srcList){
for( var i =0; i < srcList.options.length ; i++ ) {
if ( srcList.options[i] != null && ( srcList.options[i].selected == true ) ) {
alert(srcList.options[i].text + "를 삭제하였습니다");
srcList.options[i] = null;
}
}
}

function sDel2(srcList){
// Select Box all delete
for( var i = srcList.options.length ; i >= 0; i-- ) {
srcList.options[i] = null;
}
}
</script>
</head>
<body>
당신의 직업을 선택하세요.
<form name="myform">
<select name="job" size=4>
<option value="고등학생" selected> 고등학생
<option value="대학생"> 대학생
<option value="대학원생"> 대학원생
<option value="회사원"> 회사원
<option value="교수"> 교수
<option value="정당인"> 정당인
</select>
<input type="button" value="확인" onClick="test()">
<input type="button" value="삭제" onclick="sDel( this.form.job)">
<input type="button" value="모두삭제" onclick="sDel2( this.form.job)">
<br>
직업 명 : <input type='textbox' name='ntxt' value=''> text <br>
직업 키 : <input type='textbox' name='ntxt2' value=''> value &nbsp;
<input type="button" value="추가" onclick="sAdd(this.form.job, this.form.ntxt.value, this.form.ntxt2.value)">
</form>
</body>
</html>[/CODE]]]> MintState Fri, 23 Jul 2010 11:43:10 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=181
[CODE html]<html>
<head>
<script language="javascript">
function won_format(chknum,hanview) {
val = chknum.value;
re = /^[1-9][0-9]*$/;
var num = val.toString().split(',').join('');
if (!re.test(num)) {
chknum.value = '';
if (hanview) document.getElementById(hanview).innerHTML = '';
} else {
//num = num.split(',').join('');
var arr = num.split('.');
var num = new Array();
for (i = 0; i <= arr[0].length-1; i++) {
num[i] = arr[0].substr(arr[0].length-1-i,1);
if(i%3 == 0 && i != 0) num[i] += ',';
}
num = num.reverse().join('');
if (!arr[1]) chknum.value = num; else chknum.value = num+'.'+arr[1];
if (hanview) num2won(chknum,hanview);
}
}
function num2won(chknum,hanview) {
val = chknum.value;
var won = new Array();
re = /^[1-9][0-9]*$/;
var num = val.toString().split(',').join('');
if (!re.test(num)) {
chknum.value = '';
document.getElementById(hanview).innerHTML = '';
} else {
var price_unit0 = new Array('','일','이','삼','사','오','육','칠','팔','구');
var price_unit1 = new Array('','십','백','천');
var price_unit2 = new Array('','만','억','조','경','해','시','양','구','간','정');
for(i = num.length-1; i >= 0; i--) {
won[i] = price_unit0[num.substr(num.length-1-i,1)];
if(i > 0 && won[i] != '') won[i] += price_unit1[i%4];
if(i % 4 == 0) won[i] += price_unit2[(i/4)];
}
for(i = num.length-1; i >= 0; i--) {
if(won[i].length == 2) won[i-i%4] += '-';
if(won[i].length == 1 && i > 0) won[i] = '';
if(i%4 != 0) won[i] = won[i].replace('일','');
}
won = won.reverse().join('').replace(/-+/g,'');
document.getElementById(hanview).innerHTML = won;
}
}
</script>
</head>
<body>
<input type="text" name="won" style="text-align:right;" onkeyup="won_format(this,'hanview');"> 원 입력 <span id="hanview" style='background-color:#EEEEEE'></span> 원
</body>
</html>[/CODE]

컴마만 붙이고 한글은 표시하지 않을 경우 won_format(this,''); 와 같이 쓰면 됩니다.]]> MintState Wed, 09 Jun 2010 14:20:44 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=180
[CODE js]for(var x in opener) {
alert([x, opener[x]]);
}[/CODE]

속성수가 너무 많아서 alert로 찍으면 힘듭니다. 그냥 innerHtml로 보시길...

하나 찍어보니 속성이 이렇게나 많네요.
useMap
onselect
name
type
defaultChecked
height
checked
indeterminate
size
onload
dataFormatAs
dynsrc
accept
vrml
start
form
width
complete
src
onabort
loop
align
onerror
dataFld
vspace
maxLength
alt
dataSrc
hspace
readOnly
status
value
lowsrc
border
onchange
offsetLeft
aria-multiselectable
aria-activedescendant
innerHTML
onbeforecut
all
aria-describedby
clientLeft
aria-required
ondatasetcomplete
aria-flowto
onresizestart
aria-controls
ondrag
outerHTML
onclick
onmouseleave
tagUrn
onpaste
clientWidth
aria-setsize
clientTop
onmousedown
onerrorupdate
offsetHeight
attributes
onhelp
onlayoutcomplete
aria-valuemin
scrollWidth
runtimeStyle
oncellchange
isDisabled
isTextEdit
outerText
sourceIndex
firstChild
document
contentEditable
onmoveend
aria-valuemax
aria-owns
onmouseout
aria-selected
aria-valuenow
onmovestart
readyState
onkeyup
onmousewheel
nodeValue
onafterupdate
aria-invalid
ondataavailable
ondatasetchanged
children
aria-pressed
aria-labelledby
ondeactivate
parentElement
aria-live
innerText
onlosecapture
aria-relevant
onkeypress
tabIndex
onrowsdelete
ondblclick
ondrop
aria-posinset
offsetParent
ownerDocument
parentTextEdit
disabled
onfilterchange
onfocusout
behaviorUrns
role
title
onmousemove
className
tagName
parentNode
oncut
offsetTop
onmouseover
isMultiLine
onfocusin
onfocus
canHaveChildren
onactivate
aria-secret
lastChild
onrowexit
ondragend
onmove
scrollHeight
onselectstart
oncopy
aria-readonly
aria-checked
isContentEditable
onresize
filters
onmouseenter
onreadystatechange
onbeforeupdate
offsetWidth
scrollTop
language
oncontextmenu
aria-busy
onmouseup
lang
scopeName
onrowsinserted
aria-level
id
ondragenter
onpropertychange
onscroll
ondragstart
nodeType
onkeydown
aria-expanded
dir
onbeforedeactivate
style
clientHeight
hideFocus
onblur
aria-hidden
oncontrolselect
onbeforeeditfocus
scrollLeft
currentStyle
accessKey
onbeforeactivate
nodeName
previousSibling
recordNumber
onpage
aria-disabled
onbeforecopy
ondragover
onbeforepaste
canHaveHTML
ondragleave
childNodes
aria-haspopup
onrowenter
onresizeend
nextSibling]]> MintState Thu, 29 Apr 2010 17:03:08 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=179
윤석규님이 아래 경로로 공개하신 내용입니다.
[URL=http://ysksoft.textcube.com/entry/Javascript-비밀번호-보안레벨-체크]http://ysksoft.textcube.com/entry/Javascript-비밀번호-보안레벨-체크[/URL]

[ATTACH]562[/ATTACH]

몇가지 문자그룹을 만들고 그것에 포함된 그룹갯수를 가지고 체크를 하네요.
한가지 그룹에만 속하면 낮음 세가지 그룹에 속하면 높음
또는 페스워드 문자수를 가지고 체크를 합니다.

위 링크에 가시면 소스가 있습니다.]]> MintState Thu, 29 Apr 2010 16:48:33 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=178
어느사이트에 들어 있는것입니다.. 돌아다니는 것을 구해서 어디껀지는 모르겠지만.
상당히 많은 내용이 있네요..
참고하세요...

파일 첨부합니다.]]> MintState Fri, 16 Apr 2010 10:55:12 +0900 https://go3.co.kr/mintbbs/bbs/board.php?bo_table=javascript&amp;wr_id=175
아주 간단 합니다..

[CODE html]<script type="text/javascript">
function limitMemo(obj,cnt) {
if (obj.value.length>cnt) obj.value = obj.value.substring(0, cnt);
document.getElementById('memoLength').innerHTML = cnt-obj.value.length;
};
</script>
<div id="memoLength">10</div>
<textarea name="memo" onKeyPress="javascript: if (event.keyCode==13) return false;" onKeyUp="javascript: limitMemo(this, 10);"></textarea>[/CODE]]]> MintState Wed, 17 Feb 2010 13:50:01 +0900