HOHO 테마 사용중 하단이 중첩되는 문제로 문의 드립니다.
본문
안녕하세요.
제가 얼마전에 https://theme.sir.kr/gnuboard54/demo/hoho 테마를 적용 시켰는데,
가끔씩 하단 부분이 중첩되는 문제가 있어, 문의를 드립니다.
[적용한 사이트]
[데모 사이트]
하단의 회사소개 | 이용약관 | 개인정보처리방침 부분까지 침범하여 게시물이 생성됩니다.
그러나, 새로 고침하면 정상적으로 나오다가, 다시 또 하단부분을 침범하는 일이
반복적으로 일어납니다. 동일한 문제를 해결하신 분은 해결방법을 나누어주셨으면 합니다.
정말 좋은 테마로 꼭 적용을 해보고 싶습니다. 도와주세요.
감사합니다.
좋은 하루되세요.
답변 3
dom이 완전히 로딩되기 전에 스크립트가 적용되어서 그렇습니다.
| $('.latest_wr').show().waterfall({ | |
| // top offset | |
| top : false, | |
| // the container witdh | |
| w : false, | |
| // the amount of columns | |
| col : false, | |
| // the space bewteen boxes | |
| gap : 10, | |
| // breakpoints in px | |
| // 0-400: 1 column | |
| // 400-600: 2 columns | |
| // 600-800: 3 columns | |
| // 800-1000: 4 columns | |
| gridWidth : [0,600,790,970,], | |
| // the interval to check the screen | |
| refresh: 0, | |
| timer : false, | |
| // execute a function as the page is scrolled to the bottom | |
| scrollbottom : false | |
| }); |
이 부분 찾아보시고
setTimeout(function(){
//여기에 위 함수를 옮겨보세요.
}, 100);
아니면
| refresh: 0, | |
|
timer : false,
|
|
위 두개 옵션값을 조절해 보세요.
정말 감사합니다. 알려주신 setTimeout 로 해결을 했습니다.
제가 운영 중인 www.uknara.com 에서 아주 잘 작동됩니다.
다시 한번 감사드립니다.
인터넷 속도가 느린 경우에는 해결이 안되는 증상이 발견되어, 그냥 body 에 onload 이벤트 발생시
처리하는 것으로 로직을 수정하여 개선을 하였습니다.
참고하여 주세요.
$('.latest_wr').show().waterfall({
// top offset
top : false,
// the container witdh
w : false,
// the amount of columns
col : false,
// the space bewteen boxes
gap : 10,
// breakpoints in px
// 0-400: 1 column
// 400-600: 2 columns
// 600-800: 3 columns
// 800-1000: 4 columns
gridWidth : [0,600,790,970,], //3열 배치
//gridWidth : [0,690,970,], // 2열 배치로 수정
// the interval to check the screen
refresh: 0,
timer : false,
// execute a function as the page is scrolled to the bottom
scrollbottom : false
});
이 부분을 $(window).load(function() { } 로 감싸면 됩니다.
그러면 이렇게 됩니다.
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('.latest_wr').show().waterfall({
// top offset
top : false,
// the container witdh
w : false,
// the amount of columns
col : false,
// the space bewteen boxes
gap : 10,
// breakpoints in px
// 0-400: 1 column
// 400-600: 2 columns
// 600-800: 3 columns
// 800-1000: 4 columns
gridWidth : [0,600,790,970,], //3열 배치
//gridWidth : [0,690,970,], // 2열 배치로 수정
// the interval to check the screen
refresh: 0,
timer : false,
// execute a function as the page is scrolled to the bottom
scrollbottom : false
});
});
</script>
body onload 이벤트에 거는 것 보다 더 효율적인 것 같아서 약간 변형해 보았습니다.
