0

クライアント企業の Web サイトのホームページで、会社の Facebook タイムラインの更新を、スクロールバーのない固定サイズのコンテナー (CSS overflow-y: hidden) で表示しています。クライアント企業は、コンテナを埋める FB の更新を表示したいと考えていました。コンテナの高さを超えてメッセージを視覚的に非表示にしていても、非表示のテキスト/画像の一部が表示されるのを避けたい場合があります。下の図を参照してください。

スクリーンショットの例 (jpg):

上の写真のように、部分的に表示されている (強調表示されている) ものから、によって書かれたすべての非表示のテキスト ブロックまで、すべてのものを完全に削除したいと思いますStringBuilder。ただし、各メッセージには画像や長いテキスト コンテンツが含まれている可能性があるため、5 つのテキスト ブロックを固定して表示することはできません。コンテンツをコンテナーの高さに視覚的に合わせます。

データを取得してフィルター処理する方法: Facebook JSON ( http://graph.facebook.com/USERID/feed?&limit=20) を取得し、JSON.net ライブラリーで逆シリアル化しています。いくつかの条件で無効なメッセージをフィルタリングした後、有効なメッセージを表示しています。それでもメッセージが多すぎる。

上記の URL のように、クエリ文字列を制限することで、コンテナーの高さに収まるメッセージを制限できます。しかし、「無効なメッセージ」フィルターが原因で、表示されるメッセージが非常に少ないか、まったく表示されない可能性があります。

コンテナーの高さ内にテキスト ブロックを動的に書き込むように stringbuilder を制限するのを手伝ってください。非表示の DOM 要素はありません。

4

1 に答える 1

0

現在、クライアント側のソリューションを見つけました。

jquery を使用して、不要なブロックを固定コンテナの高さを超えて隠しています。以下のコードは、オーバーフローしたコンテンツ ブロックがまったく表示されないようにします。

$('#fbtl').children(".fbpost").each(function () {
 if (($(this).position().top + $(this).height() + parseInt($(this).css('padding-bottom'), 10) - 93) > $('#fbtl').height()) {
 $(this).hide();
});

乾杯、

シャントッシュ・クリシュナクマール

于 2013-06-24T02:26:07.233 に答える