1

販促広告を掲載できるように、カスタム サイドバーを備えたワードプレス サイトを持っています。同じレイアウトが 10 の異なるページで実行されています。サイドバーの左側は「メイン コンテンツ」エリアです。

サイドバー エリアは、それぞれ画像とテキストで構成される要素 (約 25 個) の順序付けられていないリストを含む別の sidebar.php ファイルから取得します。毎回異なるプロモーションを表示するために、shuffle.js 関数の実行をオンロードします。

これが私が現在持っているスクリプトです。

<script type='text/javascript'>//<![CDATA[ 
$(function(){
var li = $('ul li');
var len =li.length;
while($('#shuffleunorderedlist li:visible').length > 28) {
li.eq(parseInt(len * Math.random(), 10)).hide();
}
);//]]>  
</script>

<!--JS shuffle scripts I added at launch-->
<script language="javascript" type="text/javascript"       src="http://orlandovisitornetwork.com/wp-content/themes/Paradise/js/jquery.shuffle.js">       </script>
<script type="text/javascript">jQuery(function($){window.onload = function(){
$('#shufflemultidivcontainer, #shuffleunorderedlist, #shufflemultidivcontainerhotels').shuffle();
};
});
</script>
<!--END shuffle JS Scripts-->​

問題は、クライアントが各ページの列を均等にし、同じプロモーションのプールから引き出してランダムに表示することです。残念ながら、すべてのリーの高さが異なります。

現在、プロモーションを追加または削除し、「メイン コンテンツ」と「サイドバー」の高さが均等にならないようにする li を非表示にするときに、各ページのコードにアクセスする必要があります。もちろん、これはそれらを均一にするわけではありませんが、それに非常に近いものです。

これを自動化するために、プロモーション リストをシャッフルする方法を見つけようとしています。「メイン コンテンツ」の高さを見て、シャッフルからできるだけ多くのプロモーションを表示して、「サイドバー」が同じかそれよりわずかに小さくなるようにします。 'メインコンテンツ'。私はそれを行う方法のアイデアを持っていますが、メインコンテンツが常に同じ高さであるとは限らず、リーの高さが異なることは私をうんざりさせています.

WP プラグインと jQuery で役立つものを探しましたが、何も見つかりませんでした。

これを明確にしたことを願っています。提案と回答に感謝します。ありがとう

ここで私がこれまでに持っているもののjsfiddleを見ることができます.... http://jsfiddle.net/2cPMm/

4

2 に答える 2

0

うーん、li要素を繰り返し処理して、それらの位置が対象のdivの位置より下にあるかどうかを確認できると思います。もしそうなら、それらを非表示にします。

foreach(li in whateverElement)    
    if(li.pos.y > div.pos.y)
        li.hide();
于 2012-12-07T19:33:37.470 に答える
0

これが実際に私のためにこれを機能させたコードです。（もちろん、私はスタック上の全員の助けを借りてここに着きました。

jQuery(function($)
{
    // Shuffle 
$('ul').shuffle();

// Watch Columns 
var mainHeight = $('#main').outerHeight();
var sidebarHeight = $('#sidebar').outerHeight();

// Compare and hide li 
if (mainHeight < sidebarHeight) { // You are hiding things from the sidebar correct?      Strictly speaking, this check isn't necessary, but it prevents us from looping when we don't   need to. 
 $('div#sidebar li').each(function() {  // I removed reverse as it gave me a reference  error. If it is defined for you, feel free to use it. 
    if (sidebarHeight > mainHeight) {  
        $(this).hide();  // hide only the current element
        sidebarHeight = $("#sidebar").outerHeight(); // update sidebarHeight 
    }
});
}
  });
于 2012-12-27T20:58:49.997 に答える