FBML, видимый для соединения, еще, дополнительный пробел - PullRequest
1 голос
/ 01 декабря 2010

На Facebook, используя надстройку FBML box, вы можете создать вкладку, содержащую пользовательский код. Одна из вещей, которую вы можете сделать, это скрыть контент от людей, которые вам не «нравятся», и сразу же открывать контент, когда они нажимают кнопку «Мне нравится». Это делается с помощью этого кода:

<fb:visible-to-connection>
  <div class="fan">Content for fans</div>
<fb:else>
  <div class="no-fan">Content for non-fans</div>
</fb:else>
</fb:visible-to-connection>

Проблема в том, что Facebook применяет видимость: скрытый для скрытого контента, что означает, что контент ушел, но пробел остается. Вы можете установить margin-top .no-fan в отрицательное значение, которое будет перемещаться вверх по контенту, поэтому скрывая пробел. Это обычно работает довольно хорошо. Это на самом деле работает безупречно , если высота содержимого .fan равна .no-fan. В моем случае это не так. У меня содержание .fan длиннее, и поэтому, когда они нам «нравятся», нижнее изображение обрезается (на .fan). Похоже, что это эквивалентно переполнению: скрытый, принимая высоту содержимого .no-fan. Когда я устанавливаю высоту содержимого .fan, все раскрывается, но тогда, когда вы не фанат, над содержимым .no-fan появляется пробел. Я пробовал различные комбинации применения отступов, форсирования высоты, но всегда есть несоответствие.

У кого-нибудь была эта проблема? Что вы сделали, чтобы решить это? Даже если вы никогда не работали с FBML, каким был бы другой логический подход?

Спасибо, Ryan

Ответы [ 3 ]

1 голос
/ 07 марта 2011

Вы должны добавить этот код сверху:

<style>
#wrapper {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}
</style>
0 голосов
/ 02 декабря 2010

Хорошо, после еще одного часа игры с этим я понял, в чем проблема.

Допустим, мой фанатский контент имеет высоту 100px, а мой не фанатский контент - 75px.Когда Facebook загружает контент, не относящийся к фанатам, он размещает вокруг него весь промежуток, при этом overflow: hidden является одним из атрибутов встроенного стиля.Когда вам «нравится» страница, она переключается на содержимое вентилятора, но высота элемента div, содержащего overflow: hidden, не обновляется, что означает, что 25px содержимого моего вентилятора отключается.

Решениебыло сделано так, чтобы содержимое, не относящееся к фанатам, имело высоту 100 пикселей, поэтому во время перехода к фанату все содержимое вентилятора должно иметь место для отображения.Недостатком является то, что под не фанатским контентом есть дополнительное пространство, но оно выходит за рамки контента, который я хочу, чтобы посетители видели.По крайней мере, над моим контентом нет пробелов, и весь мой контент виден в 100% случаев.

Это решение, которое я нашел, если у кого-то есть рекомендации или что-то, что я могу попробовать, я был бы признателен за обратную связь.

-Райан

0 голосов
/ 01 декабря 2010

У меня была такая же проблема с пустым пространством в окне, похожем на Facebook, но она была решена путем определения высоты.ты пробовал это?

...