質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • JavaScript

    15898questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6530questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

heightLine.jsとタブ切替を一緒に使いたい

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 691

gasuko

score 21

2つのテーブルをフロートさせていて高さが同じにならないので、heightLine.jsを使用して高さを合わせていたのですが、それらをタブ切り替えにて表示させようとしたところ切替の際に高さが揃わなくなってしまいました。

原因を調べているとどうやら表示されていない時はheightLine側で高さを取得できないようで、作者の方のサイトにも同様のコメントがありました。

お世話になっています。
あまり詳しくないので当方に間違いのある質問だったらすみません。
例えば2カラム(仮にA、Bとします)タイプのページを作った場合に双方の高さを揃えたいとします。
Bのカラム内に、クリックするとdisplay:block;になったりdisplay:none;になったりするブロック要素があり、Bカラムの長さが変化するのですが、長くなった場合にAカラムが一緒に伸びません。よろしくお願いいたします。

投稿者:かけだし | 2007122016:41
>かけだしさん

その状況はheightLine.jsの想定しない動作ですのでうまく動きません。

heightLine.js内のchangeBoxSize()をdisplay変更時にも呼び出すように修正すれば動作すると思います。

がんばってみてください。

投稿者:西畑一馬 | 2007122301:32

しかしながらchangeBoxSize()という記述は2013年バージョンにはなく、2007年バージョンにありました。

実際のコードを記載します。

【HTML】

<!--heightLine-->
<script>

    $(".doren table td").heightLine();

</script>

【CSS】

/*--タブ切り替え--*/

.tab{overflow:hidden;}
.tab li{background:#ccc; padding:5px 25px; float:left; margin-right:1px;}
.tab li.select{background:#eee;}
.content li{background:#eee; padding:20px;}



.hide{display:none;}

【↓heightLine.js 2007↓】

/*--------------------------------------------------------------------------*
 *  
 *  heightLine JavaScript Library beta4
 *  
 *  MIT-style license. 
 *  
 *  2007 Kazuma Nishihata 
 *  http://www.webcreativepark.net
 *  
 *--------------------------------------------------------------------------*/
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);
}

changeBoxSize();という関数を色々なところに入れて試しましたがうまくいきませんでした。
また、こちらのバージョンはレスポンシブ対応ではないとのことなので出来れば2013年版を使用したいです。

【↓heightLine.js 2013↓】

/*!--------------------------------------------------------------------------*
 *  
 *  jquery.heightLine.js
 *  
 *  MIT-style license. 
 *  
 *  2013 Kazuma Nishihata 
 *  http://www.to-r.net
 *  
 *--------------------------------------------------------------------------*/
;(function($){
    $.fn.heightLine = function(){
        var target = this,fontSizeChangeTimer,windowResizeId= Math.random();
        var heightLineObj = {
            op : {
                "maxWidth" : 10000,
                "minWidth" : 0,
                "fontSizeCheck" : false
            },
            setOption : function(op){
                this.op = $.extend(this.op,op);
            },
            destroy : function(){
                target.css("height","");
            },
            create : function(op){
                var self = this,
                    maxHeight = 0,
                    windowWidth = $(window).width();
                self.setOption(op);
                if( windowWidth<=self.op.maxWidth && windowWidth>=self.op.minWidth ){
                    target.each(function(){
                        if($(this).outerHeight()>maxHeight){
                            maxHeight = $(this).outerHeight();
                        }
                    }).each(function(){
                        var height = maxHeight
                                   - parseInt($(this).css("padding-top"))
                                   - parseInt($(this).css("padding-bottom"));
                        $(this).height(height);
                    });
                }
            },
            refresh : function(op){
                this.destroy();
                this.create(op);
            },
            removeEvent :function(){
                $(window).off("resize."+windowResizeId);
                target.off("destroy refresh");
                clearInterval(fontSizeChangeTimer);
            }
        }
        if(typeof arguments[0] === "string" && arguments[0] === "destroy"){
            target.trigger("destroy");
        }else if(typeof arguments[0] === "string" && arguments[0] === "refresh"){
            target.trigger("refresh");
        }else{
            heightLineObj["create"](arguments[0]);

            $(window).on("resize."+windowResizeId,function(){
                heightLineObj["refresh"]();
            });

            target.on("destroy",function(){
                heightLineObj["removeEvent"]();
                heightLineObj["destroy"]();
            }).on("refresh",function(){
                heightLineObj["refresh"]();
            });

            if(heightLineObj.op.fontSizeCheck){

                if($("#fontSizeChange").length<=0){
                    var fontSizeChange = $("<span id='fontSizeChange'></span>").css({
                        width:0,
                        height:"1em",
                        position:"absolute",
                        left:0,
                        top:0
                    }).appendTo("body");
                }
                var defaultFontSize = $("#fontSizeChange").height();
                fontSizeChangeTimer = setInterval(function(){
                    if(defaultFontSize != $("#fontSizeChange").height()){
                        heightLineObj["refresh"]();
                    }
                },100);
            }
        }
        return target;
    }
})(jQuery);

2013年版のheightLine.jsに、displayやhideなど関係がありそうなところを探してみたのですが、該当箇所が分からずお手上げ状態になってしまいました。

詳しい方おられましたらご教示いただけますと幸いです。
よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

レスポンシブWebデザインに対応した「jquery.heightLine.js」
http://blog.webcreativepark.net/2013/10/21-112000.html

こちらに書かれているrefreshメソッドを使用したらうまく動かないでしょうか。

$(".box").heightLine("refresh");

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/18 17:05

    コメントありがとうございます。
    試しましたが駄目でした・・・。

    キャンセル

  • 2017/01/18 17:12

    ダメでしたか。
    プラグイン作者のブログっぽいのでこれでいけそうだと思ったのですが・・・。
    頑張ってください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15898questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6530questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。