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オプションを指定します。
이런 문장이 있어서요.
잘은 모르겠지만 저 문서 참고해 보시면 어떨까 싶네요.
이미 보셨다면 패스요.
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;
}
}
답변을 작성하시기 전에 로그인 해주세요.