IE11 브라우저 실행 문제 채택완료
뒷고기잘구움
5년 전
조회 3,435
안녕하세요.. 현재 http://minho.dothome.co.kr/nlobby_home/">http://minho.dothome.co.kr/nlobby_home/ 홈페이지 작업중인데
크롬, 파이어폭스, 엣지에서는 잘 돌아가지만..
익스나 사파리에서는 스크립트가 문제가 있는지 무한 로딩이 뜨더군요..
소스를 쭉 파악해봤는데 46번째 줄 메뉴 관련스크립트더군요
var {}형식으로 선언되어서 그런가 익스에서는 오류문법으로 인식해서
{}를 제거를 하니까 문법 문제라고 발생하더군요.. 하..
해결이 안되면 다른 네비게이션 슬라이드 롤링 스크립트를 대체해야될 것 같은데...
저 문법을 해결할 방법이 있을까요?.. 고수님들 답변 부탁드립니다..
</p>
<p> $(window).load(function(){
$("#loading").fadeOut();
});</p>
<p> $(document).ready(function(){
$('div.scroll_img a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top -100}, 1000);
return false;
});
function move_gnd(){
$('div.scroll_img a').animate({ 'top' : '0px' }, 1200)
$('div.scroll_img a').animate({ 'top' : '10px' }, 1200, null, move_gnd )}
move_gnd();
var scrollUpDelay = 1;
var scrollUpSpeed = 30;
function scrollUp(){
if(document.body.scrollTop<1){
return;
}
document.body.scrollTop=document.body.scrollTop-scrollUpSpeed;
setTimeout('scrollUp()',scrollUpDelay);
}</p>
<p> $(window).scroll(function() {
if($(document).scrollTop() > 300) {
$('#top_btn').fadeIn();
} else {
$('#top_btn').fadeOut();
};
});</p>
<p>
$("#top_btn").on("click", function() {
$("html, body").animate({scrollTop:0}, 1000);
return false;
});</p>
<p> function isElementUnderBottom(elem, triggerDiff) {
var { top } = elem.getBoundingClientRect();
var { innerHeight } = window;
return top > innerHeight + (triggerDiff || 0);
}</p>
<p> function handleScroll() {
var elems = document.querySelectorAll('.fade-in');
elems.forEach(elem => {
if (isElementUnderBottom(elem, -20)) {
elem.style.opacity = "0";
elem.style.transform = 'translateY(70px)';
} else {
elem.style.opacity = "1";
elem.style.transform = 'translateY(0px)';
}
})
}</p>
<p> window.addEventListener('scroll', handleScroll);
var header = $("#header");
var windowWidth = $(window).width();</p>
<p> $(".btn-gnb-open").on("click",function () {
m_gnb_open ();
});
$(".btn-gnb-close").on("click",function () {
m_gnb_close ();
});</p>
<p>
$(".depth1 > li").on("mouseover", function () {
depth2_open(this);
});</p>
<p> $(".navBox").mouseleave(function () {
depth2_close(this);
});</p>
<p>
$(".depth1 li > a").on("click",function () {
m_depth2_open(this);
});</p>
<p> m_mode();</p>
<p>
$(window).resize(function () {
if($(window).width() >= 1040 && $("#header").hasClass("m-gnb-open")) {
m_gnb_close();
}
m_mode()
if (windowWidth >= 1040) {
$(".navBox").on("mouseleave", function () {
depth2_close(this);
});
}
});</p>
<p>
function m_gnb_open() {
windowHeight = $(window).height();
winWidth = $(window).width();</p>
<p> $("#header").addClass("m-gnb-open");
$("body").addClass("openGnb-mode");
$(".navi").append("<div class='gnb-bg' />");
$(".gnb-bg").css({'width':winWidth,'height':windowHeight});</p>
<p> $(window).resize(function () {
m_mode();
windowHeight = $(window).height();
winWidth = $(window).width();
$(".gnb-bg").css({'width':winWidth,'height':windowHeight});
});
}</p>
<p> function m_gnb_close() {
$("body").removeClass("openGnb-mode");
$("#header").removeClass("m-gnb-open");</p>
<p> m_depth2_close();
$(".gnb-bg").remove(); </p>
<p> $(window).resize(function () {
$(".gnb-bg").removeAttr("style");
});
}</p>
<p> function m_depth2_open (el) {
if($("#header").hasClass("m-gnb-open")) {
if (!$(el).parent("li").hasClass("on")) {
$(el).parent("li").addClass("on").siblings("li").removeClass("on");
$(el).parent("li").siblings("li").children(".depth2").slideUp(200);
$(el).siblings(".depth2").slideDown(200);
} else {
$(el).parent("li").removeClass("on");
$(el).siblings(".depth2").slideUp(200);
}
}
}
function m_depth2_close () {
$(".depth1 li").removeClass("on");
$(".depth2").slideUp(200).removeAttr("style");
}</p>
<p> function depth2_open (el) {
if(!$("#header").hasClass("m-gnb-open")) {
$(el).closest("#header").addClass("gnb-open");
}
}
function depth2_close (el) {
$(el).closest("#header").removeClass("gnb-open");
}</p>
<p> function m_mode(){
var windowWidth = $(window).width();
var body = $("body");
if (windowWidth <= 1040) {
body.addClass("m-mode")
} else if (windowWidth > 1040) {
body.removeClass("m-mode")
}
}
});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
5년 전
처음보는 선언형태인데
느낌상으론 전역변수로 바꿔주는 그런 기능인가보군요
현재 제 시점에선 처음보는 기술이 IE에서 지원을 안하기때문에
불가능하다고밖에 생각이 안드네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
뒷고기잘구움
5년 전
감사합니다.. 호환되는 소스로 바꾸거나 IE, 사파리를 포기해야겠네요..
댓글을 작성하려면 로그인이 필요합니다.
5년 전
var top = elem.getBoundingClientRect().top;
var innerHeight = window.innerHeight;
return top > innerHeight + (triggerDiff || 0);
형태로 바꾸면 IE에서도 동작할거라 보입니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
뒷고기잘구움
5년 전
답글달아주셔서 감사합니다!
하지만 역시 브라우저가 너무 시대에 뒤쳐져서 그런가 안먹히네요..ㅠ
그래도 도움주셔서 정말 감사합니다!
하지만 역시 브라우저가 너무 시대에 뒤쳐져서 그런가 안먹히네요..ㅠ
그래도 도움주셔서 정말 감사합니다!
댓글을 작성하려면 로그인이 필요합니다.
5년 전
내년 굿바이
호환 안되는것이 많아졌습니다..
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인