0

我希望能够根据相邻内容 div 的高度在侧边栏中显示或隐藏内容，但我不确定是否/如何完成。

例如，在我当前项目的博客页面上（http://djryanmcnally.pixelworx.it/?page_id=18），我在侧边栏中有两个小部件（一个用于最新推文，一个用于最新音乐新闻），如您可以在此页面上看到，博客文章的内容（所有测试文章......）比两个小部件的高度长得多，当然，随着更多文章的添加，它们会变得更大。这会在侧边栏中的最后一个小部件下方留下一定量的空白空间，我想根据相邻#contentdiv 的高度来填充这些空白空间。

例如，假设我还想在侧边栏中放入一些其他内容 div，例如,#latest-pics但前提是相邻的内容足够大，可以为它们创造空间，我该怎么做？#latest-mixes#latest-events

我考虑过对变量使用内联样式，例如：（伪代码）

$i = #content(height);

if $i > 500px { $display1 = 'inline' } 
    else { $display1 = 'none' }

elseif $i > 1000px { $display2 = 'inline' } 
    else { $display2 = 'none' }

elseif $i > 1500px { $display3 = 'inline' }
    else { $display3 = 'none' }

.......

endif;

并使用<div id="latest-pics" style="display:<?php $display1 ?>;">等...

但是，我非常怀疑这是否会接近于做我想做的事情，但是，你知道，思考过程等等！哈哈！

我当然可以使用一个浮动侧边栏，它会随着使用滚动而向下移动，但是能够以某种方式做到这一点将是一个不错的选择！

有什么想法吗？

ps - 请原谅粗略的代码示例，我正在匆忙输入，因为我必须去上班！

提前致谢！:D

4

3 回答 3

1

这对我来说也很麻烦；）这就是为什么我创建了一个简单的 java 脚本插件，它从侧边栏中删除最后一个或多个小部件，直到侧边栏高度等于内容高度。

通过这种方式，您可以根据需要添加任意数量的小部件，如果内容不够高，它们将被删除。

默认情况下，它适用于二十三主题，但您可以使用插件设置将其应用于任何主题。它被称为 sidebarAutomizer，可以在 wp 存储库中找到 -http://wordpress.org/plugins/sidebarautomizer/

于 2014-08-13T11:25:31.880 回答
0

我打算做一些评论以征求建议；然而，经过一番思考，我决定去答案区。

我认为这是完全可以实现的。（伪代码）

  1. 使用带有 div 的固定侧边栏项目设置侧边栏区域，并为其他隐藏内容定义空的侧边栏 div。（隐藏内容的空 div：...）
  2. 循环开始：通过 jQuery ($(window).scrollTop() + $(window).height()) 获取总的 scrolled_height。
  3. 获取 used_space_height 包括标题和侧边栏高度
  4. 通过 (scrolled_height - used_space_height) 计算 available_height
  5. 看看下一个侧边栏的 div 高度是否适合avaiable_height：4.1。如果是，加载下一个侧边栏 div => 转到步骤 5。 4.2。如果不。=> 转到第 6 步。结束
  6. 使用 ajax 调用加载下一个侧边栏 div 以返回内容 => 回到步骤 1。
  7. 循环结束。

通过检测用户停止滚动，在 javascript/jQuery 中执行上述步骤。

希望这可以帮助。

于 2013-07-31T15:40:49.573 回答
0

绝对看起来像一个javascript有点东西。您想要一个垂直响应的布局，这对于纯 php 几乎是不可能的。网络服务器首先加载 php 代码，然后运行 ​​javascript；这意味着你不能用你的 php.ini 引用 javascript 变量。

看起来您的主题已经安装了 jquery，所以您不妨使用它。

在我看来，我会将所有的 div 放在侧边栏上，但要确保它们都是隐藏的（style="display:none"）。加载页面并且内容 div 位于文档上后，您可以获取左侧主要内容 div 的高度

var h = $('#main').height();

现在棘手的部分是知道如何填充每个侧边栏小部件中的内容。您可能希望对此进行一些限制以使事情变得更容易，否则您将需要更多的后期处理。

一旦您知道如何处理各个小部件的高度，以及您希望它们显示在什么层模式中，您就可以将它们简单地显示为

$('#widgetId').show();

'#widgetId' 将是您最初设置为显示的 div 上的 id="" 属性：无。

所以它最终会像

if(h > 100) $('#widget1').show();
if(h > 300) $('#widget2').show();
...

等

如果某些小部件太高（比如 widget2 通常为 500px），那么您可以使用 javascript 设置小部件的高度并根据需要处理溢出。您可以使用overflow-y:scroll，但这看起来很丑陋，可能只是overflow:hidden，并确保高度始终处于小部件的美观位置。

于 2013-08-02T00:48:53.913 回答