box높이를 맞춰주는 자바스크립트에 관한 질문

box높이를 맞춰주는 자바스크립트에 관한 질문

QA

box높이를 맞춰주는 자바스크립트에 관한 질문

본문

heightLine.js 라는 자바스크립트로 각 box의 높이를 맞춰주고 있습니다. 

이 스크립트에서 화면의 가로폭이 몇 이하로 줄어들면(스맛폰사이즈) 실행되지 않도록 하고 싶은데...

어떤 곳에 어떻게 추가로 써 넣어야 될까요?

if문 같은걸로 쓰는게 맞나요?

 

아래는 heightLine.js​ 스크립트 입니다.

 

​
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

다시 이렇게 고쳐 보세요...

 


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);
 
} 

짱짱짱!!! 해결되었네요 !! 멋져브러... ㅎㅎ
근데 이 페이지에서만 적용하고 싶었는데
다른페이지까지 싹다 적용되어서 ㅋㅋ 써먹을 수가 없다는거..ㅡ_ ㅡ;;;;
너무 고생해주셨는데 죄송합니다
무지무지 감사해요!!!

http://blog.webcreativepark.net/2013/10/21-112000.html

여기 쭈욱 보다 보니...

ウィンドウ幅640px以上の場合のみ高さを揃えたい場合はminWidthオプションを指定します。

이런 문장이 있어서요. 

 

잘은 모르겠지만 저 문서 참고해 보시면 어떨까 싶네요.

이미 보셨다면 패스요. 

답변 감사드립니다 ㅠ ㅠ...
배포하는 사이트 (위 말씀하신)에서 반응형 js가 따로 나왔더라구요..
그 js를 깔면, 지금까지 만들었던 게 적용이 안되거나 하는 일이 발생해서 ..
예전 버전으로 이용하고 있거든요...
아무래도 좀 더 연구해봐야 할 것 같네요;ㅠㅠ

checkBoxSize 함수를 아래와 같이 고쳐보세요.

 

잘될지 안될지 장담은 못하겠네요...;;

 


		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;
			}
		} 
답변을 작성하시기 전에 로그인 해주세요.
전체 123,726 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT