5

PHPを介してFacebookのようなボタンを動的に作成するサイトに取り組んでいます。ただし、<div>ボタンが含まれているには、CSSプロパティが必要overflow: hidden; です。これは、両方の列を最も長い列の長さに拡張する2列形式を作成するために機能する唯一の方法です。この方法の唯一の問題は、コンテナの下部近くに配置されたFacebookのようなボタンが、誰かがクリックして展開したときにクリップされることです。

これが私がこの問題を解決しようとした方法です：

  1. jQueryを使用して、ページ上のすべてのFacebookのようなボタンをループし、offset()メソッドを使用してドキュメントのオフセットを計算します。

  2. 次に、各ボタンに加えて、jQueryのメソッドclone()を使用して絶対位置と計算されたオフセットを指定します。css()複製された各ボタンが、ドキュメントに追加したときに複製されたボタンと同じ位置に配置されることを願っています。

  3. 最後に、Facebookのような古いボタンのcssをに変更して、ボタンを非表示にしますvisibility: hidden;が、それでも以前はページ上にあったスペースを占有します。overflow: hidden;関数を使用して、プロパティなしでfacebookのようなボタンのクローンをdivに追加しappendTo()ます。

このプロセスのコード全体は次のとおりです。

// Replaces functional facebook recommend buttons with identical ones
// in a div where they won't get clipped when they expand.
// Hides the old buttons so space is still left for new ones
$(window).load(function(){
    $(".fb-recommend").each(function(){ // cycle through each recommend button
        var offset = $(this).offset(); // calculate offset of each button
        var newButton = $(this).clone(); // clone the button
        newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top});
        $(this).css("visibility","hidden"); // hide the old button
        newButton.appendTo("#wrapper"); // put the new button in the wrapper where it won't get clipped
    });
});

このすべての終わりに、古いボタンがあった場所にあるが異なる場所に各ボタンのクローンを配置することを期待しています<div>。複製されたFacebookのようなボタンが、複製元のボタンとはわずかに異なる位置に表示されることを除いて、プロセス全体が機能します（PitaJが指摘しているように、垂直方向のオフセットの倍数が約39pxずれているようです）。あなたはここで問題を見ることができます：

テストWebサイトへのリンク

ご覧のとおり、最初のボタンは正しい場所（非表示のクローンで埋められた空のスペース）に配置されていますが、他のオフセットは正しく計算されていません。

何かアイデアや助けを提供していただければ幸いです。もっと詳しく説明したいのか、もっとコードを投稿したいのか教えてください！

編集： FacebookのようなボタンのCSSをここに投稿すると思いました（変更しているのはマージンだけですが）：

#content .fb-recommend {
    margin: 15px 0 5px 0;
}

編集2： UnLocoの提案に従って、fb-reccommend CSSにmin-heightプロパティを追加し、古いボタンを隠していたコード行をコメントアウトして、問題を見つけやすくしました（これはまだありますが、わずかに少なくなっています） 。CSSは次のようになります。

#content .fb-recommend {
    margin: 15px 0 5px 0;
    min-height: 39px;
}

編集3：この問題は、CSSを次のように変更することでIE以外のすべてのブラウザで解決されたようです。

.fb-recommend {
    min-height: 24px;  // I used 24 because the fb-buttons are 24px in height
}

最終編集？これは、IEを含む私の側のすべてのブラウザで機能するようです。

.fb-recommend {
    min-height: 39px;
}

私は今、39が古いfbボタンの15pxのマージン+その24pxの高さから来たのではないかと考えています。高さを39pxに設定し、余白をなくすだけで回避できると思います。

4

2 に答える 2

6

これは、fbiframeが実際に読み込まれる前にオフセットを取得しているためです。このようなcssルールを追加するだけです
div.fb-recommend{min-height:39px}

于 2012-08-19T04:34:22.020 に答える
3

あなたが問題にしているのは、奇妙なjQueryの奇妙さだと思います。

これを修正するには、コードを次のように変更するだけです。

$(window).load(function(){
    $(".fb-recommend").each(function(index){ // cycle through each recommend button
        var offset = $(this).offset(); // calculate offset of each button
        var newButton = $(this).clone(); // clone the button
        newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top + (39*index)});
        $(this).css("visibility","hidden"); // hide the old button
        newButton.appendTo("#wrapper"); // put the new button in the wrapper where it won't get clipped
    });
});

これは奇妙なオフセットの問題を説明します。

于 2012-08-18T22:13:41.483 に答える