http://www.catswhocode.com/blog/10-regular-expressions-for-efficient-web-development?utm_source=twitterfeed&utm_medium=twitter

AJAXIAN.KR 에서 좋은정보가 있네요

http://sandbox.jsninja.kr/

출처 : AJAXIAN.KR

<script type="text/javascript">

 <!--

 //레이어 팝업 열기

 function openLayer(IdName){

  var pop = document.getElementById(IdName);

  pop.style.display = "block";

 }

 //레이어 팝업 닫기

 function closeLayer(IdName){

  var pop = document.getElementById(IdName);

  pop.style.display = "none";

 }

//-->

</script>

<div style="position:relative; width:100%; z-index:99;">

우씨 갑자기 할려니 잊어먹은 ㅡㅡ

// tab
function initTabMenu(tabContainerID) {
var tabContainer = document.getElementById(tabContainerID);
var tabAnchor = tabContainer.getElementsByTagName("a");
var i = 0;

for(i=0; i<tabAnchor.length; i++) {
if (tabAnchor.item(i).className == "tab")
thismenu = tabAnchor.item(i);
else
continue;

thismenu.container = tabContainer;
thismenu.targetEl = document.getElementById(tabAnchor.item(i).href.split("#")[1]);
thismenu.targetEl.style.display = "none";
thismenu.imgEl = thismenu.getElementsByTagName("img").item(0);
thismenu.onclick = function tabMenuClick() {
currentmenu = this.container.current;
if (currentmenu == this)
return false;

if (currentmenu) {
currentmenu.targetEl.style.display = "none";
if (currentmenu.imgEl) {
currentmenu.imgEl.src = currentmenu.imgEl.src.replace("_on.gif", ".gif");
}
else {
currentmenu.className = currentmenu.className.replace(" on", "");
}
}
this.targetEl.style.display = "";
if (this.imgEl) {
this.imgEl.src = this.imgEl.src.replace(".gif", "_on.gif");
}
else {
this.className += " on";
}
this.container.current = this;

return false;
};

if (!thismenu.container.first)
thismenu.container.first = thismenu;
}
if (tabContainer.first)
tabContainer.first.onclick();
}
// tab

<ul id="news_tab" class="news_menu">
  <li><a href="#news1" class="tab"><img src="image/btn_news1.gif" alt="기독교 뉴스" /></a></li> // a태그 #값
  <li><a href="#news2" class="tab"><img src="image/btn_news2.gif" alt="일반 뉴스" /></a></li>
</ul>
<div id="news1"></div>
<div id="news2"></div>

페이지 하단 삽입
<script type="text/javascript">
initTabMenu("news_tab");
</script>

출처 : 네이버 하코사 카페 희야님

사파리 브라우저의 경우 input 텍스트 필드에 포인터가 있을경우 표시를 해준다
이와 비슷한 기능이 필요하고자 하는경우 써보자~

// 공통 input

function replaceText(objValue, srcStr, desStr)
{
 var str = objValue;

 while(str.indexOf(srcStr) != -1)
  str = str.replace(srcStr, desStr);

 return str;
}

function getBrowerType()
{
 if(navigator.appName == "Microsoft Internet Explorer")
  return "IE";
 else if(navigator.appName == "Netscape")
  return "Netscape";
}

function convertSizeWidth(width, size)
{
 if(width)
  return parseInt(width.replace("px", ""), 10);
 else
  return 100;

}

function onFocus(obj)
{
 if(obj.className.indexOf("Off") > 0){
  var objWidth = convertSizeWidth(obj.style.width, obj.size);
  obj.style.width = (objWidth-2) + "px";
  obj.className = replaceText(obj.className, "Off", "On");

 }
}

function onBlur(obj)
{
 if(obj.className.indexOf("On") > 0){
  var objWidth = parseInt(obj.style.width.replace("px", ""), 10);
  obj.style.width = (objWidth+2) + "px";
  obj.className = replaceText(obj.className, "On", "Off");
 }
}

// css
.inputOn {height:16px; border-top:2px solid #cc9e7f; border-right:2px solid #e9ba9a; border-bottom:2px solid #e9ba9a; border-left:2px solid #e9ba9a; background:#fffdfc; line-height:16px;}
.inputOff {height:18px; border-top:1px solid #666; border-right:1px solid #bbb; border-bottom:1px solid #bbb; border-left:1px solid #666; line-height:18px;}

적용
<input type="text" name="" value" style="width:214px;" onfocus="onFocus(this)" onblur="onBlur(this)" class="inputOff" />

인라인으로 사이즈를 주면 사이즈별 클래스를 만들지 않아도 된다

/* 플래시 무비 */
function flashWrite2(url, w, h, vars, win, alt)
{

var id = url.split("/")[url.split("/").length-1].split(".")[0];
if(vars == null) vars='';
if(win == null) win='opaque';

var objStr = "     <object ";

if(navigator.appName.match("Internet Explorer")){
objStr += "classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'";
} else {
objStr += "type='application/x-shockwave-flash' data='"+url+"' ";
}
objStr +="     id='"+id+"' style='width:"+w+"px; height:"+h+"px;'>";
objStr +="    <param name='base' value='.' />";
objStr+= "    <param name='showLiveConnect' value='true' />";
objStr +="    <param name='allowScriptAccess' value='always' />";
objStr +="    <param name='movie' value='"+url+"' />";
objStr +="    <param name='FlashVars' value='"+vars+"' />";
objStr +="    <param name='wmode' value='"+win+"' />";
objStr +="    <param name='menu' value='false' />";
objStr +="    <param name='quality' value='high' />";
objStr +="    <p>"+alt+"</p>";
objStr +="  </object>";

return objStr;
}

window.onload = function()
{
 document.getElementById("gnb").innerHTML = flashWrite2('/flash/gnb.swf','1000','116','','window','jobfair, 행사안내, 구인구직, 이벤트, 취업자료실, 커뮤니티');
}
/* 플래시 무비 */

<div id="gnb"></div>

/* 텍스트 사이즈 조절 */
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function font_getCookie( name )
{
var nameOfCookie = name + "=";
var x = 0;
cookieFlg = document.cookie.indexOf(nameOfCookie);
if (cookieFlg != -1) {

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 "";
}
else{
return 15;
}
}

function getCookie() {
var cookie = font_getCookie("getSize");
if ( cookie == null )
return 15;
if ( cookie.length )
return cookie;
else
return 15;
}

function chgFont(gb) {
var content, lh;

content = document.getElementById("news_content");

if (gb > 0) {
if (contentsize <= 18) {
contentsize = contentsize + gb;
lh = contentsize+Math.round(1.1*contentsize);

news_content.style.fontSize = contentsize + "px";
}
} else {
if (contentsize > 12) {
contentsize = contentsize + gb;
lh = contentsize+Math.round(1.1*contentsize);

news_content.style.fontSize = contentsize + "px";
}
}
var getDate = new Date;
getDate.setDate(getDate.getDate()+1000);

setCookie("getSize", contentsize, 1)//fontDate);
}
var contentsize = parseInt(getCookie
());
/* 텍스트 사이즈 조절 */

<p class="txt_size">뉴스글자크기 <span>|</span> <a href="javascript:chgFont(1)"><img src="/image/pds/btn_txt_big.gif" alt="크게" class="vm" /></a> <span>|</span> <a href="javascript:chgFont(-1)"><img src="/image/pds/btn_txt_small.gif" alt="작게" class="vm" /></a></p>

<script>
       var i=1; // i값은 본래 1이다.

       for(i=1;i<4;i++){ // i는 1보다 같거나 크고 4보다 작다.

        function order(i){ // 버튼 클릭시 함수
        
         if (document.getElementById('order_view0'+i).style.display=="none"){ //눌린 버튼에 해당하는 id의 디스플레이 상태가 none이라면
          document.getElementById('order_view0'+i).style.display=""; // 보이도록 설정한다.
         };
       
         for(k=1;k<4;k++){ // k는 1보다 크거나 같고 4보다 작다
         
          if(k!=i){
        document.getElementById('order_view0'+k).style.display="none"; //i값과 틀린 id는 디스플레이를 none;으로 설정한다.
          };
         
         };
        
        };

       };

   </script>

<div class="info_p c_54">
  <table width="580">
  <tr>
    <td class="info_view">결제방법</td>
    <td>
      <input type="radio" class="radio" name="order" value="1" onclick="javascript:order(1);" checked>계좌이체 &nbsp; &nbsp;
      <input type="radio" class="radio" name="order" value="2" onclick="javascript:order(2);">신용카드 &nbsp; &nbsp;
      <input type="radio" class="radio" name="order" value="3" onclick="javascript:order(3);">무통장입금
    </td>
  </tr>
  <tr><td colspan="2"><hr class="dotted"></td></tr>
  </table>

  <div id="order_view01" style="display:block;">
    <table>
    <tr>
      <td class="info_view2">계좌이체 <br />지불정보</td>
      <td colspan="3">

        <table>
        <tr>
          <td class="info_view3">금액 :</td>
          <td class="c_00 pdnt2"><span class="b txt03">60,500</span> 원</td>
        </tr>
        <tr>
          <td class="info_view3">은행 :</td>
          <td class="c_00">
            <select>
            <option>선택하세요</option>
            <option>------------</option>
            <option>아무은행1</option>
            <option>아무은행2</option>
            <option>아무은행3</option>
            </select>
          </td>
        </tr>
        </table>
        <table>
        <tr>
          <td class="info_view3">현금영수증 발급 :</td>
          <td>
            <input type="radio" class="radio" name="sign">예 &nbsp; &nbsp;
            <input type="radio" class="radio" name="sign">아니오 &nbsp; &nbsp;
            <select>
            <option>소득공제용</option>
            <option>증빙</option>
            </select>
          </td>
        </tr>
        </table>
        <table>
        <tr>
          <td class="info_view3" colspan="1">
            주민등록번호 :
            <input type="text" size="20"> <span style="color:#848484;">(“-” 없이 13자리 입력)</span>
          </td>
        </tr>
        </table>

      </td>
    </tr>
    <tr><td colspan="4"><hr class="dotted"></hr></td></tr>
    <tr>
      <td class="info_view2">계좌이체<br />주의사항</td>
      <td colspan="3">
        <div class="info_view4">우리은행, 신한은행(구 조흥은행 포함), 외환은행, 국민은행, 농협, 기업은행, 우체국, 제일은행<br /> 계좌를 보유하고 있어야 합니다.</div>
      </td>
    </tr>
    <tr>
      <td class="info_view2">계좌이체<br />이용방법</td>
      <td colspan="3">
        <div class="info_view4">아래 정보(은행, 비밀번호)를 입력하신 후 주문완료를 누르면 주문완료 페이지로 넘어갑니다.</div>
      </td>
    </tr>
    </table>
  </div>

  <div id="order_view02" style="display:none;">
    <table>
    <tr>
      <td class="info_view2">신용카드 결제 <br />지불정보</td>
      <td colspan="3">

        <table>
        <tr>
          <td class="info_view3">금액 :</td>
          <td class="c_00 pdnt2"><span class="b txt03">60,500</span> 원</td>
        </tr>
        <tr>
          <td class="info_view3">카드종류 :</td>
          <td class="c_00">
            <select>
            <option>선택하세요</option>
            <option>------------</option>
            <option>아무카드1</option>
            <option>아무카드2</option>
            <option>아무카드3</option>
            </select>
          </td>
        </tr>
        </table>

      </td>
    </tr>
    <tr><td colspan="4"><hr class="dotted"></hr></td></tr>
    <tr>
      <td class="info_view2">신용카드 결제<br />주의사항</td>
      <td colspan="3">
        <div class="info_view4">해외에서 발급된 카드는 사용하실 수 없습니다.</div>
      </td>
    </tr>
    </table>
  </div>

  <div id="order_view03" style="display:none;">
    <table>
    <tr>
      <td class="info_view2">무통장입금<br />지불정보</td>
      <td colspan="3">

        <table>
        <tr>
          <td class="info_view3">금액 :</td>
          <td class="c_00 pdnt2"><span class="b txt03">60,500</span> 원</td>
        </tr>
        <tr>
          <td class="info_view3">입금자명 :</td>
          <td class="c_00"><input type="text" size="15"></td>
        </tr>
        <tr>
          <td class="info_view3">무통장 입금 계좌 : </td>
          <td class="c_00">예금주 - 개똥이네</td>
        </tr>
        <tr>
          <td class="info_view3">입금은행 :</td>
          <td class="c_00">
            <select>
            <option>선택하세요</option>
            <option>------------</option>
            <option>아무은행1</option>
            <option>아무은행2</option>
            <option>아무은행3</option>
            </select>
          </td>
        </tr>
        </table>

      </td>
    </tr>
    <tr><td colspan="4"><hr class="dotted"></hr></td></tr>
    <tr>
      <td class="info_view2">무통장입금<br />주의사항</td>
      <td colspan="3">
        <div class="info_view4">모든 상품의 배송은 입금 확인후 이루어집니다!! <br />(회원님이 입금을 빨리 하실수록 상품을 빨리 받아보실 수 있습니다.)</div>
        <div class="info_view4">주문에 한정수량으로 판매하는 제품이 한가지라도 포함된 경우에는 주문된 다음날<br />(토요일, 공휴일 제외) 오후 3시까지 입금을 안 하시면 본 주문은 자동 취소됩니다.</div>
        <div class="info_view4">일반적인 무통장입금 주문의 경우는 주문일 기준 2일 경과(토요일, 공휴일 제외)할 때까지 입금을 안 하시면 자동 취소됩니다.</div>
      </td>
    </tr>
    </table>
  </div>

메뉴단 구성시에 많이 쓰이는 형태인 background-image스타일 요소에 hover시켜 마우스 오버시 효과를 주는 메뉴형식이 많이 쓰이게 됩니다.

헌데 이럴경우 해당 메뉴부분 hover작동시 번쩍거리는 현상이 IE6에서 발생하게 되는데, 특히 IE6에서 도구->인터넷옵션->임시인터넷 파일설정->저장된 페이지의 새버전 확인->"페이지를 열때마다" 를 선택한 경우이면 확실한 번쩍거림을 볼수 있습니다.

그렇게 번쩍거리는 것은 서버로 이미지요청을 계속 하게되서 보이는 효과로, 결국 대역폭(Bandwidth)이 늘어나고 서버에도 부담을 주게 되고 사용자 환경도 느리게 할수도 있습니다. 반드시 수정해야 한다는!!

관련 내용을 검색 하면서 몇가지 해결책을 찾아 정리해봤습니다. 검색해보니 3가지 정도의 해결법이 있네요. 우선

아파치서버의 경우 아래 코드를 httpd.conf파일에 추가하면 됩니다.

#this stops screen flicker in IE
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

그러고 난후 아파치에서 mod_expires모듈을 설정 하면 문제가 해결 됩니다.

또는.htaccess파일에 아래 코드를 넣어도 됩니다.

ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

IIS 서버의 경우는 여기 를 방문해보시면 될것 같습니다.

CSS를 이용한 방법도 소개되고 있어 살펴보니 Background 프로퍼티에 따라서 깜빡거리는 현상이 발생한다고 합니다.

background style에

background-color에 특정색이 설정되는 경우
background-repeat 시키지 않는경우
background-position을 설정하는 경우
와 같이 background요소가 설정되는 경우 flick거리게 됩니다. 또 background요소로 깔리는 이미지 영역이 2500픽셀 미만이 되면 역시 flick하게 됩니다. 가령 아래와 같은 경우는 해당 영역의 총 넓이 값이 2450픽셀로 2500픽셀 미만이므로 깜빡거리게 됩니다.

a { width: 49px; height: 50px; }

이 외에도 설정하려는 이미지가 투명이미지인 경우도 그렇습니다.

마지막으로 스크립트를 이용한 방법도 있습니다.

<script type="text/javascript">
(function(){
/*Use Object Detection to detect IE6*/
var m = document.uniqueID /*IE*/
document.compatMode /*>=IE6*/
!window.XMLHttpRequest /*<=IE6*/
document.execCommand ;
try{
if(!!m){
m("BackgroundImageCache", false, true) /* = IE6 only */
}
}catch(oh){};
})();
</script>

그냥 실행되고록 해놓은 코드로 삽입하면 됩니다. flicker현상을 위한 코드는 아닌데 부수적으로 flicker 효과를 없애는 역활까지 해주는거 같네요. IE6 에서만 문제되는 현상이기 때문에 해당 코드 삽입 형식에 제일 편하지 않을까 합니다

참고사이트.
http://www.hedgerwow.com/360/bugs/dom-fix-ie6-background-image-flicker.html
http://www.fivesevensix.com/studies/ie6flicker/
http://dean.edwards.name/my/flicker.html

출처 : 네이버 웹표준 블로그

<script type="text/javascript">

/*faq Answer 보이기 */
function faqShow(n){

 var p = "a"+n; //선택한 물음의 답변 아이디 <--- 이 부분은 강좌 보기 버튼 클릭시 보여줄 내용 id로
 var i = "i"+n; //선택한 물음의 선택상태 이미지 아이디<--- 이 부분은 강좌 보기, 감추기 토글 버튼 id로

 if ( document.getElementById(p).style.display == "none" )
 {
  document.getElementById(p).style.display = "block";
  document.getElementById(i).src = "/images/shop/cs/faq/ic_up.gif";
 }
 else
 {
  document.getElementById(p).style.display = "none";
  document.getElementById(i).src = "/images/shop/cs/faq/ic_down.gif";
 }
}
</script>

<div class="faq">
 <!--faq 1-->
 <div id="q1">
  <a href="#" onClick="faqShow('1')"><img src="/images/shop/cs/faq/ic_down.gif" border="0" id="i1"></a>
 </div>

 <div id="a1" style="display:none;">
  여기에 버튼 클릭시 보여줄 내용을
 </div>

 <div id="q2">
  <a href="#" onClick="faqShow('2')"><img src="/images/shop/cs/faq/ic_down.gif" border="0" id="i2"></a>
 </div>

 <div id="a2" style="display:none;">
  여기에 버튼 클릭시 보여줄 내용을
 </div>
</div>

제로보드 게시판 등을 아이프레임으로 불러들이면서 세로 스크롤바가 생기지 않게 하여, 원프레임 페이지처럼 보이게 할때 유용하게 사용됩니다



아이프레임이 로딩완료되는 순간 화면이 문서의 내용에따라 일순간 길어지는 단점이 있습니다.



------------------------ 적용될 자바스크립트 시작 ------------------------------------------------------------------------

<script>  
function doResize()  
{  
container.height = myframe.document.body.scrollHeight;  
container.width = myframe.document.body.scrollWidth;  
}  
</script>  


------------------------ 적용될 자바스크립트 끝 --------------------------------------------------------------------------



------------------------ 이벤트발생 시작 --------------------------------------------------------------------------------


<table border="0" cellpadding="0" cellspacing="0">  
<tr>  
<td id="container"><iframe src="sample.html" name="myframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="no" onload="doResize()"></iframe></td>  
</tr>  
</table>

* 새창에서 부모창에 링크 후 새창닫기

▶ 아래소스를 부모창의 <HEAD>에 넣습니다.
<SCRIPT language="JavaScript">
function SetCookie(sName, sValue)
{
  document.cookie = sName + "=" + escape(sValue) ;
}
//function inplnetPopup()  {
    var strReturn;
     strReturn = GetCookie('PopCheck');
     if(strReturn == null || strReturn == '0' ) {
         //SetCookie('PopCheck','1');
         StartPop();
     }
//}
function GetCookie(sName)
{
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0])
      return unescape(aCrumb[1]);
  }
  return null;
}
function StartPop()  {
    popWindow =  window.open('불러올 새창URL','popup', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no, resizable=no,copyhistory=no ,width=270, height=300, left=650,top=5');
    }
</SCRIPT>


▶ 아래소스는 띄운 새창의 불러올 링크 부분에 넣습니다.
<a href="javascript:window.close();opener.location.href='부모창에 나타낼 페이지의 URL">링크</a>

위의 소스가 모두입니다.
그대로 적용만 하면 됩니다.
한가지더...
위에 쓰인 새창띄우기는 홈페이지에 들어갈때 자동으로 뜨는 창입니다.
참고하세요...