heightLine.js 라는 자바스크립트로 각 box의 높이를 맞춰주고 있습니다.
이 스크립트에서 화면의 가로폭이 몇 이하로 줄어들면(스맛폰사이즈) 실행되지 않도록 하고 싶은데...
어떤 곳에 어떻게 추가로 써 넣어야 될까요?
if문 같은걸로 쓰는게 맞나요?
아래는 heightLine.js 스크립트 입니다.
Copy
new function(){ function heightLine(){ this.className="heightLine"; this.parentClassName="heightLineParent" reg = new RegExp(this.className+"-([a-zA-Z0-9-_]+)", "i"); objCN =new Array(); var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; for(var i = 0; i < objAll.length; i++) { var eltClass = objAll[i].className.split(/\s+/); for(var j = 0; j < eltClass.length; j++) { if(eltClass[j] == this.className) { if(!objCN["main CN"]) objCN["main CN"] = new Array(); objCN["main CN"].push(objAll[i]); break; }else if(eltClass[j] == this.parentClassName){ if(!objCN["parent CN"]) objCN["parent CN"] = new Array(); objCN["parent CN"].push(objAll[i]); break; }else if(eltClass[j].match(reg)){ var OCN = eltClass[j].match(reg) if(!objCN[OCN]) objCN[OCN]=new Array(); objCN[OCN].push(objAll[i]); break; } } } //check font size var e = document.createElement("div"); var s = document.createTextNode("S"); e.appendChild(s); e.style.visibility="hidden" e.style.position="absolute" e.style.top="0" document.body.appendChild(e); var defHeight = e.offsetHeight; changeBoxSize = function(){ for(var key in objCN){ if (objCN.hasOwnProperty(key)) { //parent type if(key == "parent CN"){ for(var i=0 ; i<objCN[key].length ; i++){ var max_height=0; var CCN = objCN[key][i].childNodes; for(var j=0 ; j<CCN.length ; j++){ if(CCN[j] && CCN[j].nodeType == 1){ CCN[j].style.height="auto"; max_height = max_height>CCN[j].offsetHeight?max_height:CCN[j].offsetHeight; } } for(var j=0 ; j<CCN.length ; j++){ if(CCN[j].style){ var stylea = CCN[j].currentStyle || document.defaultView.getComputedStyle(CCN[j], ''); var newheight = max_height; if(stylea.paddingTop)newheight -= stylea.paddingTop.replace("px",""); if(stylea.paddingBottom)newheight -= stylea.paddingBottom.replace("px",""); if(stylea.borderTopWidth && stylea.borderTopWidth != "medium")newheight-= stylea.borderTopWidth.replace("px",""); if(stylea.borderBottomWidth && stylea.borderBottomWidth != "medium")newheight-= stylea.borderBottomWidth.replace("px",""); CCN[j].style.height =newheight+"px"; } } } }else{ var max_height=0; for(var i=0 ; i<objCN[key].length ; i++){ objCN[key][i].style.height="auto"; max_height = max_height>objCN[key][i].offsetHeight?max_height:objCN[key][i].offsetHeight; } for(var i=0 ; i<objCN[key].length ; i++){ if(objCN[key][i].style){ var stylea = objCN[key][i].currentStyle || document.defaultView.getComputedStyle(objCN[key][i], ''); var newheight = max_height; if(stylea.paddingTop)newheight-= stylea.paddingTop.replace("px",""); if(stylea.paddingBottom)newheight-= stylea.paddingBottom.replace("px",""); if(stylea.borderTopWidth && stylea.borderTopWidth != "medium")newheight-= stylea.borderTopWidth.replace("px","") if(stylea.borderBottomWidth && stylea.borderBottomWidth != "medium")newheight-= stylea.borderBottomWidth.replace("px",""); objCN[key][i].style.height =newheight+"px"; } } } } } } checkBoxSize = function(){ if(defHeight != e.offsetHeight){ changeBoxSize(); defHeight= e.offsetHeight; } } changeBoxSize(); setInterval(checkBoxSize,1000) window.onresize=changeBoxSize; } function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } addEvent(window,"load",heightLine);}
답변 3개 / 댓글 6개
채택된 답변
+20 포인트
thisgun다시 이렇게 고쳐 보세요...
Copy
new function(){ function heightLine(){ this.className="heightLine"; this.parentClassName="heightLineParent" reg = new RegExp(this.className+"-([a-zA-Z0-9-_]+)", "i"); objCN =new Array(); var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; for(var i = 0; i < objAll.length; i++) { var eltClass = objAll[i].className.split(/\s+/); for(var j = 0; j < eltClass.length; j++) { if(eltClass[j] == this.className) { if(!objCN["main CN"]) objCN["main CN"] = new Array(); objCN["main CN"].push(objAll[i]); break; }else if(eltClass[j] == this.parentClassName){ if(!objCN["parent CN"]) objCN["parent CN"] = new Array(); objCN["parent CN"].push(objAll[i]); break; }else if(eltClass[j].match(reg)){ var OCN = eltClass[j].match(reg) if(!objCN[OCN]) objCN[OCN]=new Array(); objCN[OCN].push(objAll[i]); break; } } } //check font size var e = document.createElement("div"); var s = document.createTextNode("S"); var sw = false; e.appendChild(s); e.style.visibility="hidden" e.style.position="absolute" e.style.top="0" document.body.appendChild(e); var defHeight = e.offsetHeight; changeBoxSize = function(){ var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth; if ( x < 400 ){ // x는 width sw = true; return; } else { sw = false; } for(var key in objCN){ if (objCN.hasOwnProperty(key)) { //parent type if(key == "parent CN"){ for(var i=0 ; i<objCN[key].length ; i++){ var max_height=0; var CCN = objCN[key][i].childNodes; for(var j=0 ; j<CCN.length ; j++){ if(CCN[j] && CCN[j].nodeType == 1){ CCN[j].style.height="auto"; max_height = max_height>CCN[j].offsetHeight?max_height:CCN[j].offsetHeight; } } for(var j=0 ; j<CCN.length ; j++){ if(CCN[j].style){ var stylea = CCN[j].currentStyle || document.defaultView.getComputedStyle(CCN[j], ''); var newheight = max_height; if(stylea.paddingTop)newheight -= stylea.paddingTop.replace("px",""); if(stylea.paddingBottom)newheight -= stylea.paddingBottom.replace("px",""); if(stylea.borderTopWidth && stylea.borderTopWidth != "medium")newheight-= stylea.borderTopWidth.replace("px",""); if(stylea.borderBottomWidth && stylea.borderBottomWidth != "medium")newheight-= stylea.borderBottomWidth.replace("px",""); CCN[j].style.height =newheight+"px"; } } } }else{ var max_height=0; for(var i=0 ; i<objCN[key].length ; i++){ objCN[key][i].style.height="auto"; max_height = max_height>objCN[key][i].offsetHeight?max_height:objCN[key][i].offsetHeight; } for(var i=0 ; i<objCN[key].length ; i++){ if(objCN[key][i].style){ var stylea = objCN[key][i].currentStyle || document.defaultView.getComputedStyle(objCN[key][i], ''); var newheight = max_height; if(stylea.paddingTop)newheight-= stylea.paddingTop.replace("px",""); if(stylea.paddingBottom)newheight-= stylea.paddingBottom.replace("px",""); if(stylea.borderTopWidth && stylea.borderTopWidth != "medium")newheight-= stylea.borderTopWidth.replace("px","") if(stylea.borderBottomWidth && stylea.borderBottomWidth != "medium")newheight-= stylea.borderBottomWidth.replace("px",""); objCN[key][i].style.height =newheight+"px"; } } } } } } checkBoxSize = function(){ if(defHeight != e.offsetHeight && !sw){ changeBoxSize(); defHeight= e.offsetHeight; } } changeBoxSize(); setInterval(checkBoxSize,1000) window.onresize=changeBoxSize;} function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); }}addEvent(window,"load",heightLine); }답변에 대한 댓글 2개
nanati
2014-12-19 (금) 15:05:13
thisguncheckBoxSize 함수를 아래와 같이 고쳐보세요.
잘될지 안될지 장담은 못하겠네요...;;
Copy
checkBoxSize = function(){ var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth; if ( x < 400 ){ // x는 width return; } if(defHeight != e.offsetHeight){ changeBoxSize(); defHeight= e.offsetHeight; } }답변에 대한 댓글 3개
2014-12-19 (금) 11:33:16
http://blog.webcreativepark.net/2013/10/21-112000.html
여기 쭈욱 보다 보니...
ウィンドウ幅640px以上の場合のみ高さを揃えたい場合はminWidthオプションを指定します。
이런 문장이 있어서요.
잘은 모르겠지만 저 문서 참고해 보시면 어떨까 싶네요.
이미 보셨다면 패스요.
답변에 대한 댓글 1개
nanati
2014-12-19 (금) 11:37:52
답변 감사드립니다 ㅠ ㅠ...
배포하는 사이트 (위 말씀하신)에서 반응형 js가 따로 나왔더라구요..
그 js를 깔면, 지금까지 만들었던 게 적용이 안되거나 하는 일이 발생해서 ..
예전 버전으로 이용하고 있거든요...
아무래도 좀 더 연구해봐야 할 것 같네요;ㅠㅠ
배포하는 사이트 (위 말씀하신)에서 반응형 js가 따로 나왔더라구요..
그 js를 깔면, 지금까지 만들었던 게 적용이 안되거나 하는 일이 발생해서 ..
예전 버전으로 이용하고 있거든요...
아무래도 좀 더 연구해봐야 할 것 같네요;ㅠㅠ
답변을 작성하려면 로그인이 필요합니다.
근데 이 페이지에서만 적용하고 싶었는데
다른페이지까지 싹다 적용되어서 ㅋㅋ 써먹을 수가 없다는거..ㅡ_ ㅡ;;;;
너무 고생해주셨는데 죄송합니다
무지무지 감사해요!!!