Mad House™ Blog

2 Articles, Search Results for '보이기'

2007/01/19 [팁+펌] 사이드바 숨기기/보이기 - 파이어 폭스 지원 by Mad House
2006/12/02 사이드바,레이어, 테이블등등 - Show/Hide by Mad House

[팁+펌] 사이드바 숨기기/보이기 - 파이어 폭스 지원

2007/01/19 22:48 / Maniac/web_tip

사이드바에 적용하기 위해서는 사이드바의 구조를 알고 있으셔야 합니다.

간단하게 큰레이어안에 공지사항모듈이며 카테고리등의 레이어가 들어가있습니다.

레이어를 숨기기위해서는 사이드바의 전체 레이어를 숨겨야합니다.

번번히 적는거는지 저는 개뿔도 모르는 상태에서 이리저리 적용해서

사용하기때문에 제 방법이 100% 맞지는 안습니다만.. 그래도 성공했으니..

다시 설정으로 넘어가서...

<script type="text/javascript" language="JavaScript">
function layer_toggle(obj) {
if (obj.style.display == 'none') obj.style.display = 'block';
else if (obj.style.display == 'block') obj.style.display = 'none';
}
</script>

위의 소스를 사이드바 <div>~</div>안에 넣어줍니다.

아까 설명드린 <div id="sidebar"> 위에 아래의 소스를 넣습니다.

<div id=morea style=display:block>
</div>
<div id=moreb style=display:none>

그리고 사이드바 맨 아랫부분인

</s_sidebar_element>
</s_sidebar>
</div>


아래에 </div>를 하나 추가해주어서 <div id=moreb style=display:none>와 연결해줍니다.

이제 버튼만 만들면 됩니다만 저는 이부분에서 상당히 해맸습니다..

하여튼 버튼은 아래와 같이 블로그의 메뉴에 삽입해줍니다. 해당 스킨에 따라 틀리므로

이미지를 만드셔서 추가해주시거나 텍스트에 링크를 하셔도 됩니다.

<a href=# onclick="layer_toggle(document.getElementById('morea')); layer_toggle(document.getElementById('moreb'));return false;"></a> <a href=# onclick="layer_toggle(document.getElementById('morea')); layer_toggle(document.getElementById('moreb'));return false;">sidebar on/off</a>

저는 위와같이 버튼을 만들어서 사용했습니다. 뭐 생각해보자면 위의 소스만으로

레이어를 숨길수있습니다만

<script type="text/javascript" language="JavaScript">
function layer_toggle(obj) {
if (obj.style.display == 'none') obj.style.display = 'block';
else if (obj.style.display == 'block') obj.style.display = 'none';
}
</script>

위의 스크립을 넣어서 숨기고/보이는 순서를 바꿀수있습니다.

흠 다음에는 쿠키가 먹는 방법을 알고 싶은데.. 영 안보이네요..

사이드바를 숨기니 전보다 빨라진듯 싶었는데 다른분은 모르겠네요..

덧,아... 인터넷에서 찾아서 참쉽게 찾았지만..
불과 몇일전에 해놓고서는 적용방법을 까먹다니....
하여튼 지금은 기억났으니..다행인건가..
전에 사용했던 소스는 조민님께서 올리신 팁이었지만..
이번에는 정확히 잘기억이 안난다.. 최근 파이어폭스를 설치해보고
사이드바를 클릭해봤지만 나타나지 않아서 여기저기 찾아봤서 겨우찾앗었다..

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

"web_tip" 카테고리의 다른 글

활용도 높은 Menu 소스 (투명, 필터, 그림넣기가능) (댓글 0개 / 트랙백 0개) 2006/12/04
썸네일 링크 (댓글 6개 / 트랙백 3개) 2006/11/11
사이드바,레이어, 테이블등등 - Show/Hide (댓글 0개 / 트랙백 0개) 2006/12/02
익스에서 할수있는 재미있는 놀이.. (댓글 0개 / 트랙백 0개) 2007/02/22
[행복한 고니님의 팁] 제목을 이미지로~ (댓글 0개 / 트랙백 0개) 2007/08/30

Posted by Mad House.

TAGS 레이어, 보이기, 사이드바, 숨기기

No Trackback , No Comment

Leave your greetings here.

사이드바,레이어, 테이블등등 - Show/Hide

2006/12/02 23:13 / Maniac/web_tip

아 난 왜 이 팁을 못찾았을까.. 답답하다 사이드바를 손쉽게 숨길수있음에도 불구하고 게다가 간단하기 까지하다..

쩌ㅃ~

<input onclick='menu()' type=checkbox name=chk value='yes' onfocus='this.blur()'> 보이기/감추기
<script language="javascript">
function menu(){
if (ch.style.display == 'none') {
ch.style.display = '';
}
else {
ch.style.display = 'none';
}
}
</script>

<div id=ch style="display:none">
// 출력할 내용이 들어갈 부분 //
</div>

이것은 팁코리아의 조민님께서 올리신 팁이다. 붉게 된곳은 제어하는 소스고 하늘색은 스크립, 녹색은 저위와

마찬가지로 출력될곳을 나타낸다

태터툴즈도 기본은 태그이기때문에 잘적용된다.

먼저 위의

<input onclick='menu()' type=checkbox name=chk value='yes' onfocus='this.blur()'> 보이기/감추기

이부분을 보면 체크박스로 되어 있어 미관상 안좋게 보인다. 그러므로 약간 바꿔줘야겠다.

<img src="그림 주소" onclick='menu()'> 이렇게 포인트를 주거나

<a href="#" onclick='menu()' title="SHOW/Hide">사이드바</a>이런식으로 해주자

두번째로 위의 소스 즉,

<script language="javascript">
function menu(){
if (ch.style.display == 'none') {
ch.style.display = '';
}
else {
ch.style.display = 'none';
}
}
</script>

이것을 <body>안에 아무데나 짱박아 놓기로 하자

그리고 숨겨질 부분을 묶어 줘야 하는데 본인처럼 사이드바를 묶어도 되고 내 블로그의 상단이나 글목록등

아무데나 적용이 가능하다.

사이드바를 예를 등면 사이드바 시작부분인...

<div id="sidebar">
<s_sidebar>

<s_sidebar_element>
...............................에서


여기까지 <div id="sidebar">위에 <div id=ch style="display:none">을 추가 시켜주고

 여기 바로 아래에 </div>를 하나 더 줘서 구분을 지어준다.

한마디로 묶어 버리고 저장후 블로그에 있는 버튼을 클릭하면 사라지거나 나타나게 된다...

덧. 참고로 난 이소스를 찾기 위해 몇시간을 찾아해맸다 포기하던참에 오늘 가장 많이 들린..

팁코리아에서 찾게 되어서 참 남감했다... 하여튼 본 블로그의 메뉴 주변이나 ect안에 소스를

적용해놨다.. 쳇 이렇게 간단한걸 ㅠ.ㅠ 아그리고 사이드바를 숨겨놓고 블로그를 리로드하니

전보다 빨라진듯 싶다. 그리고 역시 나도 초보인지라... 이것도 팁이냐 라고 하실분이 계실지

모르겠지만도.. 나같은 극초보에게는 한줄기 단비같은 소스이다. ㅋ