[Javascript]버튼클릭시 레이어창 띄우기

버튼클릭시 레이어창 띄우는 팁입니다.

여러가지 방법이 있지만, 그중에 한방법입니다.

 

 

<script type="text/javascript">
var cc=0
function showHide(id) {
    if (cc==0) {
        cc=1
        document.getElementById(id).style.display="block";
    } else {
        cc=0
        document.getElementById(id).style.display="none";
    }
}
</script>

 

클릭할 버튼을 아래와 같이 작성합니다.

 

 

<a href="#layer" onclick="showHide('layer');return false;"><img src="btn_ok.gif" alt="확인"></a>

 

layer 은 클릭시 보여질 id 명 (내용) 입니다.

 

버튼클릭시 보여질 내용은 아래와 같이 작성합니다.

 

<div id="layer">

보여질 내용입니다.

</div>

 

보여질 내용부분에는 ul 이 들어갈수도 있고, table 등이  들어갈수도 있겠군요.

 

마지막으로 스타일을 입혀주시면 됩니다. (외부/내부/인라인 상관없습니다.)

단, 스타일쪽에 display:none; 이 들어가야합니다.

 

#layer {display:none; width:200px; border:1px solid #ccc;}

 

대충 위처럼 꾸미고자 하는 스타일을 주시면 됩니다.

 

기본적으로 레이어창이 보이지 않고 버튼을 클릭할경우 보이기되며, 다시 한번 누르면 레이어창이 닫히게 됩니다. 만약 레이어창안에 닫기 버튼을 만들어서 클릭시 다시 닫히게 하고자 하면 위에 레이어창 띄우는 버튼과 동일하게 닫기 버튼을 만드시면 됩니다.

 

<a href="#layer" onclick="showHide('layer');return false;"><img src="btn_close.gif" alt="닫기"></a>

 

이런식이 되겠습니다.

 

미리보기는 http://web.webmini.net/ 에서 '통합검색' 부분과 '언어' 선택부분을 참고하시면 됩니다.

 

 

다른방법 : http://www.webmini.net/347

[Javascript]자동으로 년도,월,일 나오게하기

2006.3.28 화 오전 12:32 

이런식으로 나타납니다. 아래소스를 원하시는 위치에 삽입하세요.

<div id="divTime">
<script type="text/javascript">
function getFullToday(){
var yIdx='일월화수목금토';
var today = new Date();
var buf = "";
yy=today.getYear();
mm=today.getMonth() + 1;
dd=today.getDate();
h=today.getHours(); if(h>12){h-=12;ap='오후';}else{ap='오전';}
m=today.getMinutes();
yo=yIdx.charAt(today.getDay())+'';
buf=yy+'.'+mm+'.'+dd+' '+yo+' '+ap+' '+h+':'+m+'';
return buf;
}
function putsTime()
{
if ( typeof(document.all.divTime)=="object" ) {
document.all.divTime.innerHTML = "" + getFullToday() + " ";
}
setTimeout("putsTime()", 1000);
}
putsTime();
</script>
</div>

[Javascript]마우스 오버시 레이어창 뜨기(파폭,익스지원)

마우스 오버시 레이어창 띄우는 팁입니다.

 

 

<script type="text/javascript">
function view(opt) {
  if(opt) {
     spec1.style.display = "block";
  }
  else {
     spec1.style.display = "none";
  }
}
</script>

<a href="#" onmouseover="view(true)" onmouseout="view(false)" style="text-decoration:none; ">가나다라마바사</a>

 

오버시 보여질 내용입니다.

<div id="spec1" style="position:relative;display:none;">
마우스 오버해보세요.
</div>

 

여러가지로 응용해보세요.

[Javascript](파폭,익스,오페라) 즐겨찾기추가하기

즐겨찾기(북마크) 추가하는 스크립트 입니다. (파폭,익스,오페라에서 가능)

 

<script type="text/javascript">
function bookmarksite(title,url) {
   if (window.sidebar) // firefox
   window.sidebar.addPanel(title, url, "");
   else if(window.opera && window.print)

   { // opera
      var elem = document.createElement('a');
      elem.setAttribute('href',url);
      elem.setAttribute('title',title);
      elem.setAttribute('rel','sidebar');
      elem.click();
   }

  else if(document.all) // ie
   window.external.AddFavorite(url, title);
}
</script>

<a href="javascript:bookmarksite('웹미니 - 웹속에 작은 공간', 'http://www.webmini.net')">즐겨찾기 추가<a>

[Javascript]버튼클릭시 레이어창 띄우기

버튼을 클릭시 새로운 레이어창을 띄우는 소스입니다.

<script type="text/javascript">
function ViewLayer(){
        document.getElementById("Pop_c").style.display='inline'
    }
</script>

<!-- 버튼 -->
<a href="javascript:ViewLayer();"><img src="버튼이미지주소" alt=""></a>

<!-- 클릭시 보여질 레이어 -->
<div id="Pop_c" style="position:absolute; left:0; top:704px; z-index:1;display:none; width:950px; height:207px;">
보여질 내용
</div>

스타일은 사이트에 맞게 수정하시면 됩니다.

 

다른방법 : http://www.webmini.net/418

[Javascript]페이지내의 단어검색하기 (파폭지원)

메모장에서 단어찾기와 비슷하다고 보시면 됩니다.

 

<script type="text/javascript">
<!--
var TRange = null;
var dupeRange = null;
var TestRange = null;
var win = null;

var nom = navigator.appName.toLowerCase();
var agt = navigator.userAgent.toLowerCase();
var is_major   = parseInt(navigator.appVersion);
var is_minor   = parseFloat(navigator.appVersion);
var is_ie      = (agt.indexOf("msie") != -1);
var is_ie4up   = (is_ie && (is_major >= 4));
var is_not_moz = (agt.indexOf('netscape')!=-1)
var is_nav     = (nom.indexOf('netscape')!=-1);
var is_nav4    = (is_nav && (is_major == 4));
var is_mac     = (agt.indexOf("mac")!=-1);
var is_gecko   = (agt.indexOf('gecko') != -1);
var is_opera   = (agt.indexOf("opera") != -1);

var is_rev=0
if (is_gecko) {
    temp = agt.split("rv:")
    is_rev = parseFloat(temp[1])
}

var frametosearch = self;

function search(whichform, whichframe) {
    if (is_ie4up && is_mac) return;
    if (is_gecko && (is_rev <1)) return;
    if (is_opera) return;
    if(whichform.findthis.value!=null && whichform.findthis.value!='') {
       str = whichform.findthis.value;
       win = whichframe;
       var frameval=false;
       if(win!=self) {

       frameval=true;  // this will enable Nav7 to search child frame
       win = parent.frames[whichframe];
    }
}

else
return;

var strFound;

if(is_nav4 && (is_minor < 5)) {
    strFound=win.find(str);
}

if (is_gecko && (is_rev >= 1)) {
    if(frameval!=false) win.focus(); // force search in specified child frame
    strFound=win.find(str, false, false, true, false, frameval, false);

    if (is_not_moz)  whichform.findthis.focus();
}

if (is_ie4up) {
  if (TRange!=null) {
     
   TestRange=win.document.body.createTextRange();

     

   if (dupeRange.inRange(TestRange)) {

   TRange.collapse(false);
   strFound=TRange.findText(str);
    if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop;
        TRange.select();
        }
   }
 
   else {

     TRange=win.document.body.createTextRange();
     TRange.collapse(false);
     strFound=TRange.findText(str);
     if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = TRange.offsetTop;
        TRange.select();
        }

   }
  }
 
   if (TRange==null || strFound==0) {
   TRange=win.document.body.createTextRange();
   dupeRange = TRange.duplicate();
   strFound=TRange.findText(str);
    if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = TRange.offsetTop;
        TRange.select();
        }
  
   }

}

  if (!strFound) alert ("찾으시는 '"+str+"' 에 대한 검색결과가 없습니다!") // string not found
       
}
// -->
</script>

<form name="form1" onSubmit="search(document.form1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Find in Page" ACCESSKEY="s"></form>

 

이곳의 글들을 검색합니다.

자료출처 : http://www.blueb.co.kr/bbs.php?table=JS_17&query=view&uid=5&p=

[Javascript]마우스오버시 롤링되는배너 (파폭지원)

 

<script type="text/javascript">
 var sRepeat=null;
 function doScrollerIE(dir, src, amount) {
  if (amount==null) amount=20; //속도
  if (dir=="left")
   document.all[src].scrollLeft-=amount;
  else
   document.all[src].scrollLeft+=amount;
  if (sRepeat==null)
   sRepeat = setInterval("doScrollerIE('" + dir + "','" + src + "'," + amount + ")",100);
  return false }
  window.document.onmouseout = new Function("clearInterval(sRepeat);sRepeat=null");
  window.document.ondragstart = new Function("return false");
</script>

 

다음은 왼쪽으로 가는 버튼소스입니다.

<img src="기본으로보여질버튼" id="goright01" name="arrow01" OnMouseOver="document.arrow01.src='오버했을때 보여질버튼'; return doScrollerIE('left','rolling_table',10)" OnMouseOut="document.arrow01.src='마우스아웃했을때 보여질버튼'; clearInterval(sRepeat)" style='cursor:pointer;' alt="이전" >

다음은 오른쪽으로 가는 버튼소스입니다.

<img src="기본으로보여질버튼" alt="다음" id="goright02" name="arrow02" OnMouseOver="document.arrow02.src='오버했을때 보여질버튼'; return doScrollerIE('right','rolling_table',10)" OnMouseOut="document.arrow02.src='마우스아웃했을때 보여질버튼'; clearInterval(sRepeat)" style='cursor:pointer;'>

롤링되는 내용은 다음과 같습니다.

 

<div id="rolling_table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>롤릴될 내용</td>
</tr>
</table>
</div>

해당 css 에 #rolling_table {overflow:hidden; width:730px;} 이런식으로 삽입합니다.
가로사이즈가 730px 이후부터는 보여지지않게 되며, 버튼 오버시 롤링되게 됩니다.

버튼위치와 내용은 디자인에 맞게 맞추시면 됩니다.

[Javascript]글자위에 마우스 오버시 툴팁띄우기

 

 

 

 

 

 

 

 

<style type="text/css">
div.mouseView { padding:10px; width:300px; position:absolute; border:2px solid #ccc; font-size:12px; background-color:#fafafa; } /* 스타일은 자신에 맞게 수정 */
</style>

 

<script type="text/javascript">
<!--
var preview="";
var gobj="";
function attachEvent_(obj, evt, fuc, useCapture) {
  if(!useCapture) useCapture=false;
  if(obj.addEventListener) { // W3C DOM 지원 브라우저
    return obj.addEventListener(evt,fuc,useCapture);
  } else if(obj.attachEvent) { // MSDOM 지원 브라우저
    return obj.attachEvent("on"+evt, fuc);
  } else { // NN4 나 IE5mac 등 비 호환 브라우저
    MyAttachEvent(obj, evt, fuc);
    obj['on'+evt]=function() { MyFireEvent(obj,evt) };
  }
}

function detachEvent_(obj, evt, fuc, useCapture) {
  if(!useCapture) useCapture=false;
  if(obj.removeEventListener) {
    return obj.removeEventListener(evt,fuc,useCapture);
  } else if(obj.detachEvent) {
    return obj.detachEvent("on"+evt, fuc);
  } else {
    MyDetachEvent(obj, evt, fuc);
    obj['on'+evt]=function() { MyFireEvent(obj,evt) };
  }
}

function MyAttachEvent(obj, evt, fuc) {
  if(!obj.myEvents) obj.myEvents= {};
  if(!obj.myEvents[evt]) obj.myEvents[evt]=[];
  var evts = obj.myEvents[evt];
  evts[evts.length]=fuc;
}

function MyFireEvent(obj, evt) {
  if(!obj.myEvents || !obj.myEvents[evt]) return;
  var evts = obj.myEvents[evt];
  for (var i=0;i<len;i++) {
    len=evts.length;
    evts[i]();
  }
}

function previewShow(e, obj, pv) {
  preview=pv;
  gobj=obj;
  attachEvent_(obj, "mousemove", previewMove, false);
  attachEvent_(obj, "mouseout", previewHide, false);
}

function previewMove(e) {
  var hb = document.getElementById(preview);
  if(hb.parentElement) hb.parentElement.style.display="";
  else hb.parentNode.style.display="";
  var evt = e ? e : window.event;
  var posx=0;
  var posy=0;

  if (evt.pageX || evt.pageY) { // pageX/Y 표준 검사
    posx = evt.pageX +8;
    posy = evt.pageY +16;
  } else if (evt.clientX || evt.clientY) { //clientX/Y 표준 검사 Opera
    posx = evt.clientX +10;
    posy = evt.clientY +20;
    if (window.event) { // IE 여부 검사
      posx += document.body.scrollLeft;
      posy += document.body.scrollTop;
     }
  }

  hb.style.left = posx + "px";
  hb.style.top = posy + "px";
}

function previewHide() {
  var hb = document.getElementById(preview);
  if(hb.parentElement) hb.parentElement.style.display="none";
  else hb.parentNode.style.display="none";

  detachEvent_(gobj,"mousemove", previewMove, false);
}
-->
</script>

 

 

<a href="#" onmouseover="previewShow(event,this,'t_tip1');">마우스를 올려보세요. 파폭 익스 지원</a>
<span style="display:none;"><div id="t_tip1" class="mouseView">이곳은 박스안에 있는 설명이 들어가는 부분입니다.</div></span>
<br><br>
<a href="#" onmouseover="previewShow(event,this,'t_tip2');">마우스를 올려보세요. 두번째 박스</a>
<span style="display:none;"><div id="t_tip2" class="mouseView">박스모양은 스타일시트로 간단히 수정</div></span>

첨부파일 확인해보세요.

 

tooltip.html

 

[Javascript]onfocus="this.blur()" 익스,파이어폭스에도 적용

링크점선을 싫어하시는 분들께 필요한 팁입니다.

 

 

<script type="text/javascript">
function allblur() {
  for (i = 0; i < document.links.length; i++) {
    var obj = document.links[i];
    if(obj.addEventListener) obj.addEventListener("focus", oneblur, false);
    else if(obj.attachEvent) obj.attachEvent("onfocus", oneblur);
  }
}

function oneblur(e) {
  var evt = e ? e : window.event;

  if(evt.target) evt.target.blur();
  else if(evt.srcElement) evt.srcElement.blur();
}
</script>

<body onLoad="allblur()">

 

왠만하면 링크점선은 놔두시는게 좋다고 개인적으로 생각하고있습니다.

[Javascript]png 으로 저장시 IE6에서 투명안될때

png으로 저장시 IE7과 FF에서는 png 지원이 되지만, IE6에서는 투명으로 빠지지 않습니다.
그럴때 아래와 같이 하시면 됩니다.

 

스타일시트 정의

 

<style type="text/css">
<!--
.png24 {
  tmp:expression(setPng24(this));
}
-->
</style>

 

 

javascript 정의

<script type="text/javascript">
<!--
function setPng24(obj) {
  obj.width=obj.height=1;
  obj.className=obj.className.replace(/\bpng24\b/i,'');
  obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
  obj.src='';  
  return '';
}
-->
</script>

 

 

해당 png 이미지에 class 추가

 

<img src="이미지경로" alt="" class="png24">

단 css 백그라운드시 적용이 되지 않으며, 이미지맵또한 지원이 안됩니다.

[Javascript]메뉴클릭시 하위내용보이기

좁은공간에 여러가지 최근게시물을 멀티탭기능으로 보여주는 방식이나 FAQ 메뉴등에서 질문을 클릭시 내용이 보이게 하는.. 그런곳에 많이 사용됩니다.

 

 

<script type="text/javascript">
var old_menu = '';
function menuclick( submenu )
{
        if( old_menu != submenu ) {
                if( old_menu != '' ) {
                        old_menu.style.display = 'none';
                } else {
                        submenu0.style.display = 'none';
                }
                submenu.style.display = 'block';
                old_menu = submenu;
        } else {
                submenu.style.display = 'block';
                old_menu = submenu;
        }
}
</script>

그후에 클릭했을시 보여질 메뉴텍스트나 이미지에 아래소스 삽입

 

style="cursor:pointer;" onClick="menuclick(submenu3);"

 

 

마지막으로 클릭시 보여질 곳에 아래소스 삽입

 

<span id="submenu0" style="display:block;">맨처음보일내용</span>

 

그밑으로 이름만 바꾸면서 계속 추가해줍니다.

 

<span id="submenu1" style="display:none;">submenu1을 클릭해서 보일내용</span>

만약 마우스 클릭시가 아닌 마우스 오버했을때로 바꾸실려면 onMouseOver 로 바꾸시면 됩니다.