사방 - 제일 위로, 제일 아래로, 뒤로, 앞으로

On/HtmlCss 2010.08.02 13:51
<a href="javascript:window.scrollTo(0,100000);">제일 밑으로</a>
<a href="javascript:window.scrollTo(0,0);">제일 위로</a>
<a href="javascript:history.back()">BACKWARD</a>

<a href="javascript:history.forward()">FORWARD</a>
posted by 大道

Open and Close

On/HtmlCss 2010.07.23 11:36
  • <script type="text/javascript">
    function visible_tf() {
    var btn_open = document.getElementById('opn');
    var btn_close = document.getElementById('clo');
    var obj_sidebar = document.getElementById('opnclo');
    obj_sidebar.style.display = 'none';
    btn_open.onclick= function() {
    obj_sidebar.style.display = 'block';
    btn_close.style.display = 'inline';
    btn_open.style.display = 'none';
    }
    btn_close.onclick=function() {
    obj_sidebar.style.display = 'none';
    btn_close.style.display = 'none';
    btn_open.style.display = 'inline';
    }
    }

    if (typeof window.addEventListener != 'undefined') {
    window.addEventListener("load", visible_tf, false);
    } else if (typeof window.attachEvent != 'undefined') {
    window.attachEvent("onload", visible_tf);
    }
    </script>

    <li id="opn"><a href="#" title="sidebar open">sidebar open</a></li>
    <li id="clo" style="display:none"><a href="#" title="sidebar close">sidebar close</a></li>
    <div id="opnclo" style="display:none">...</div>

    大道 2010.07.23 13:06
  • 1. jogos de mario 에 방문했습니다. 한국어를 못찾아, 댓글을 달아주신 것에 대한 감사하는 마음을 남기지 못했습니다. 감사합니다.
    2. 지금은 open or close 번갈아 표시되는 코드를 사용할 바가 없는지라 실용코드를 자료저장할 여유가 되지 않습니다. 다음 기회에 유용한 코드인지라 알아둘 것입니다.
    3. jogos de mario 의 발전과 번영을 기원합니다.

    Favicon of https://xtime.tistory.com 大道 2011.09.02 02:15 신고
뭐 이제
누르면 나타나는 메뉴는 가능한데
작지만 안되는 부분이

close가 안보인다는 것이다 - 오픈과 클로즈의 교대법?
posted by 大道

clickshow vs showhide

On/HtmlCss 2010.07.08 21:39
  • <a onclick="clickshow(1)" style="cursor:pointer;"/>Open</a>
    <div id="block1" style="display:none"></div>

    <!-- 위대로 하면 된 것을 재확인했음: <div id="sidebar2"><div class="sidebar2" id="block1" style="display:none">에서 지저분한 것을 삭제해도 아무런 이상없이 정상출력되었음!! 이로써 틀림없는 사용법이 바로위임 -->

    大道 2010.07.11 14:02
  • clickshow만 치환자 출력된다는건 순간적 오류였고 showhide도 동일하게 치환자마저 출력합니다. 버그인지 clickshow가 출력안되어 showhide로 대체했더니 잘 됩니다.
    특히, 본문에 내용을 출력하고자 할 때, 다음처럼 사이드바를 코딩해주면 위젯사이드바에 생성됨
    <div id="sidebarCenter">
    <div id="anything" style="display:none">
    <s_sidebar>
    <s_sidebar_element>
    내용
    </s_sidebar_element>
    </s_sidebar>
    </div></div>

    大道 2010.07.11 18:00
  • showhide vs showHide? 함수대로 대소문자 구분안하면 페이지오류!

    大道 2010.07.27 02:48
  • #sidebar h3 a:hover {color:#51BDAD}

    after editing skinhtml/
    <s_sidebar_element><!-- 최근 보관함 모듈 -->
    <h3><a onclick="showHide('archive')" style="text-decoration:none; cursor:pointer;">글 보관함</a></h3>

    처음에는 <a ...><h3>글 보관함</h3></a> 이었던 것을 편집함

    Favicon of https://xtime.tistory.com 大道 2010.12.28 09:11 신고
  • Skin.html 에 먼저 추가해야할 자바 스크립트
    - 스킨 상단의 </head> ~~~ <body> 사이에 복사해 넣습니다.

    <script language="JavaScript">
    function showhide(id) {
    var obj = document.getElementById(id);
    if (obj.style.display == 'none')
    obj.style.display = 'block';
    else
    obj.style.display = 'none';
    }

    function clickshow(num){
    menu = document.getElementById("block"+num);
    if( menu != null && typeof menu != "undefined" )
    {
    if (menu.style.display=="block"){
    menu.style.display="none"; //닫고
    }
    else{
    menu.style.display="block";//하위 메뉴를 펼침
    }
    }
    }
    </script>

    Favicon of https://xtime.tistory.com 大道 2011.01.25 12:20 신고
<a onclick="X('Y')" style="cursor:hand;">무엇이라도</a>
<div id="Y" style="display:none">반드시 찍힙니다</div>
X - clickshow, showHide
Y - anything, blockN

<s_sidebar_element>
<!-- 링크 모듈 -->
      <h3 onclick="clickshow(2)" style="cursor:hand;">링크(클릭!!)</h3>
<div class="link" id="block2" style="display:none;">
      <ul>
       <s_link_rep>
        <li>
<a href="" onclick="window.open(this.href); return false"> .</a>
        </li>       </s_link_rep>
      </ul>
     </div>
    </s_sidebar_element>

<s_sidebar_element>
<a onclick="showHide('what')">any</a>
<div id="what" style="display:none">무조건 찍힌다.</div>
</s_sidebar_element>
posted by 大道

스크롤 페이징

On/HtmlCss 2010.07.08 14:49

<script type="text/javascript">

<!--
if (screen.width==1280) {stmnLEFT = 1132;}  else {stmnLEFT = 1005;}
 var stmnGAP1 = 150; // 위쪽 여백 (메뉴가 위에서 10픽셀 떨어진 곳에 보여집니다)
 var stmnGAP2 = 150; // 스크롤시 브라우저 위쪽과 떨어지는 거리
 var stmnBASE = 150; // 스크롤 시작위치
 var stmnActivateSpeed = 0;
 var stmnScrollSpeed = 0;
 var stmnTimer;
 
 function RefreshStaticMenu() {
  var stmnStartPoint, stmnEndPoint;
  stmnStartPoint = parseInt(document.getElementById('STATICMENU').style.top, 10);
  stmnEndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + stmnGAP2;
  if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
  if (stmnStartPoint != stmnEndPoint) {
   stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
   document.getElementById('STATICMENU').style.top = parseInt(document.getElementById('STATICMENU').style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
   stmnRefreshTimer = stmnScrollSpeed;
   }
  stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed);
  }
 function InitializeStaticMenu() {
  document.getElementById('STATICMENU').style.left = stmnLEFT + 'px';
  document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px';
  RefreshStaticMenu();
  }
//--> </script>


<body onload="InitializeStaticMenu();">


</s_t3>

<div id="STATICMENU" style="padding:0; margin:0; position:absolute; z-index:1;">

    <div class="paging">
     <a [##_prev_page_##] class="[##_no_more_prev_##]"><img src="./images/bt_pass_left_r.gif" style="filter:alpha(opacity=25);"></a><br/>
     <a [##_next_page_##] class="[##_no_more_next_##]"><img src="./images/bt_pass_right_r.gif" style="filter:alpha(opacity=25);"></a>
    </div>
               
</div>

</body>
</html>

posted by 大道

메뉴 2단 성공후기

On/HtmlCss 2010.06.29 06:49

3-1. 우선 첨부된 자바.화일을 업로드후
다음 스크립트를 스킨에 삽입함

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
var timeout         = 500;
var closetimer  = 0;
var ddmenuitem      = 0;

function jsddm_open()
{ jsddm_canceltimer();
 jsddm_close();
 ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
 { window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
 $('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>

3-2. (블로그)메뉴를 다음처럼 스킨 구성함

<ul id="jsddm">

<li><a href="[##_blog_link_##]">home</a>
     <ul>
     <li><a href="[##_taglog_link_##]">tag</a></li>
     <li><a href="[##_blog_link_##]media">media log</a></li>
     <li><a href="[##_localog_link_##]">location log</a></li>
     <li><a href="[##_guestbook_link_##]">guestbook</a></li>
     </ul>
</li>

<li><a href="[##_owner_url_##]">admin</a>
     <ul>
     <li><a href="[##_owner_url_##]/entry/post">write</a></li>
     </ul>
</li>

</ul>

3-3. 해당 id style - 메뉴1단 스타일 쪼금만 건드린 후, 부메뉴용 스타일 추가함

#jsddm {
margin: 0;
overflow: hidden;
padding: 0;
height: 25px;
list-style: none;
background: #5c7e9e;
}

#jsddm li {
float: left;
height: 12px;
padding: 6px 22px 7px;
color: #8f8f8f;
font: 12px Malgun Gothic, Dotum;
}

#jsddm li a {
display: block;
color: #fff;
}

#jsddm li.tab_home {
background: none;
}

#jsddm li ul {
margin: 5px 0 0 0;
padding: 0 ;
position: absolute;
visibility: hidden;
}

#jsddm li ul li {
float:none;
display: inline;
}

#jsddm li ul li a {
width: 100px;
padding: 5px 0 5px 10px;
background: #A9C251;
color: #FFFFFF;
}

#jsddm li ul li a:hover {
background: #8EA344;
}

posted by 大道