XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

관리자페이지에서 위젯 코드를 생성해서 레이아웃 스킨이나 보드스킨 등에 넣다보면 위젯스킨이나 스타일 적용이 어려워 그냥 html로 디자인을 구성하는 경우가 많습니다.

 

제가 소개한 인기글 위젯을 게시판 상단에 출력하는 경우도 그렇죠. 이 경우 게시물 작성이 많지 않은 곳에서는 위젯출력이 되지 않아 디자인으로 꾸며놓은 상단의 디자인만 노출이 되는 경우가 있어 보기 싫다고 생각하실 수 도 있습니다.

https://www.xetown.com/lakepark/39662

 

이 경우를 대비해 디자인할때 사용한 div 자체를 보이지 않게 처리할 수 있습니다.

참고로 이 스크립트는 @날아라님이 제 질문에 답을 주셨던 스크립트 입니다.

 

우선 필요한 코드를 div로 감싸주세요. 그리고 그냥 처음부터 가려줍니다.

 

<div id="name" style="display:none;">

코드

</div>

 

위 코드가 정상적으로 노출이 될때 뭐가 출력되는지 살펴본 후 적당한 것을 골라 스크립트에 조건을 걸어 감춘것을 풀어주면 됩니다.

 

인기글 위젯에 사용한 위젯의 경우 li가 사용되어 저희는 li가 보이면 저 감춘것을 풀어주게 했습니다.

 

 

<script type="text/javascript">
if( jQuery('#name').find('li').size() >0 ){
  jQuery('#name').css('display','block');
}
</script>

 

이렇게 해주면 name 안에 li 요소가 있다면 dilsplay:block 이 적용되어 정상적으로 출력이 됩니다. 만약 게시글 작성이 뜸해서 조건에 맞는것이 없다면 div가 원래 display:none 이었기에 안보입니다.

 

 

2번째 타입은 가릴곳과 찾을곳이 다른 2군데를 고려한 경우 입니다.

이 예제는 구글맞춤검색에서 제공하는 인기검색어를 레이아웃등에 출력을 해줄때 인기검색어 조건에 맞는게 하나도 없어 출력이 되지 않는 경우 때문에 위의 내용을 동일하게 적용한 저희가 실제사용하는 것 입니다.

 

 

<script type="text/javascript">
if( jQuery('#queries').find('a').size() >0 ){
  jQuery('#pop_keyword').css('display','block');
}
</script>

 

#queries 라는 아이디를 가진 곳에서 a 라는 요소가 출력이 되고 있다면 전체를 감싸고 있는 #pop_keyword div에 display:none -> dispay:block 으로 바꿔라 하는 스크립트입니다.

 

 

sample.jpg

 

 

 

 

스크립트는 사이트에서 마지막에 출력될 수 있는 위치에 넣으셔야 적용이 됩니다. 스크립트가 먼저 실행되면 바꿔치기가 되지 않습니다.

 

글쓴이 웹지기

profile

Atachment
첨부 1

List of Articles
번호 분류 제목 글쓴이 날짜
4925 질문/답변 네이버블로그에서 링크해석 문제 재질문 3 웹지기 2017.03.19
4924 질문/답변 섬네일 생성시 timeout 걸리는 문제 데히히이이 2017.03.19
4923 질문/답변 XE 가입폼 컬럼 위치 C0D3&2D 2017.03.19
4922 질문/답변 위젯페이지에서 msg_is_not_administrator 란 문구가 뜹니다. 5 file 세이나 2017.03.19
4921 질문/답변 레이아웃 저작권관련하여... 7 햄토리 2017.03.19
4920 질문/답변 확장변수를 이렇게 다중검색 할 수 있을까요? 6 file 햄토리 2017.03.19
4919 질문/답변 ck 에디터 기본 글꼴 기본 폰트 설정하기 2 file 데히히이이 2017.03.19
4918 질문/답변 photoswipe애드온 사용시 링크 걸린 이미지 클릭시 링크로 안넘어가게 하기 데히히이이 2017.03.19
4917 질문/답변 본문영역 내의 이미지 max width 를 100%로 만들기 4 데히히이이 2017.03.19
4916 질문/답변 게시물 이전 후 첨부파일이 본문에 안 떠요. 이온디 2017.03.19
4915 질문/답변 ckeditor 기본 정렬을 중앙으로 Jack 2017.03.18
4914 질문/답변 회원가입 질문드립니다. 2 임시크 2017.03.18
4913 XE 사용팁 XE사이트에 구글맞춤검색 적용하기 두페이지 혼용 2 file 웹지기 2017.03.18
4912 XE 사용팁 사이트의 색상을 반전시키는 법 3 ExtendKR 2017.03.18
4911 질문/답변 Mixed Content 에러 문의드립니다. 4 펭펭구 2017.03.18
4910 질문/답변 [해결][누리고쇼핑몰][플레인스킨] 상품진열위젯 할인금액 오류 이온디 2017.03.18
4909 질문/답변 라이믹스에서 recaptcha 관련 질문 드립니다. 2 WishCert 2017.03.18
4908 질문/답변 로고 사이즈는 몇이 적당한가요? 5 file enroot 2017.03.18
4907 질문/답변 스케치북5 설정에서 글쓰기 및 댓글쓰기 설정 관련 문의 드립니다. 4 xe왕초보 2017.03.18
4906 질문/답변 [해결] nproduct > plain 스킨 > problems while loading image 에러 1 이온디 2017.03.18
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 252 Next
/ 252
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...