У меня проблема с сценарием равной высоты, который делает мои 4 divs в строке равными высотами. В одном div у меня есть neosmart-stream, который загружает мой последний пост в facebook внутри div. Другой div должен соответствовать этому по высоте, проблема заключается в том, что высоты div соответствуют самому высокому div, который загружает первый, тот, в котором находится изображение каталога.
Я хочу иметь возможность запускать скрипт с равными высотами после загрузки моего сообщения в facebook. Вот ссылка на сайт: http://www.guitarworldcityarcade.com.au/ Это относится к 4 темно-серым ящикам под вращающимся баннером.
Извините, моя большая ошибка за не предоставление кода. Вот код для равных высот:
<script>
equalheight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).load(function() {
equalheight('.module');
});
$(window).resize(function(){
equalheight('.module');
});
</script>
И вот код для сообщений в facebook:
<div class="module">
<h1>News</h1>
<script type='text/javascript' src='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-includes/jquery.js'></script>
<script type='text/javascript' src='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-core/jquery.neosmart.stream.js'></script>
<link href='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-core/core.css' type='text/css' rel='stylesheet' />
<link href='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-content/themes/base/style.css' type='text/css' rel='stylesheet' />
<script type='text/javascript'>(function(window){window.onload=function(){jQuery(function(){jQuery('#nss').neosmartStream({introFadeIn:695,masonry:false,cache_time:60,theme:'base',path:'http://www.guitarworldcityarcade.com.au/neosmart-stream/',channel_group:'all',auto_refresh:true,auto_refresh_time:60})})}})(window);</script>
Это только часть скрипта, сообщения facebook - это плагин. Четыре div имеют класс.module
У одного есть window.load(function()) и другое window.onload = function(), будут ли они противоречивыми? Есть ли способ, по которому я могу установить один так много миллисекунд за другим?
Я немного обманул этого. сценарий изменения размера активируется при загрузке страницы и изменении размера. Поэтому я добавил другого слушателя событий, чтобы скрипт активировался, когда пользователь прокручивается вниз. Это работает, поскольку коробки, которые изменяют размер, все под слоем на всех экранах и устройствах в любом случае (за исключением исключительно длинных экранов, но как часто вы сталкиваетесь с ними?) Мне нужно будет правильно разобраться, но это работает пока.
Если вы используете jQuery, вы можете наполнить свой скрипт resizer внутри события $(window).load
, например:
$(window).load(function(){
// Your resize code
});
Таким образом, браузер ждет загрузки всей страницы (графики, изображений и фреймов) до того, как она запустит скрипт resizer.
Это означает, что если что-нибудь когда-либо повесится - скажем, пользователь находится в сети 2G или внешний ресурс не загружается - тогда ваши поля никогда не будут изменять размер. Однако я использовал его раньше, и это легко, быстро исправить, если вы знаете риски.
Если вы используете Javascript SDK для Facebook, вы должны иметь возможность использовать асинхронный код и назначать функции высоты для работы в функции window.fbAsyncInit. Тем не менее, вам все равно придется ждать, пока CSS и стили будут применяться до того, как вы узнаете истинную высоту, с которой вы столкнулись.
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
Я не знаю, каков ваш текущий код, потому что вы не публиковали какие-либо фрагменты, но вы можете просто попробовать классическую таблицу. В качестве альтернативы вы можете попробовать настроить каждый контейнер на 100% высоту (css) и позволить им плавать рядом друг с другом. Если это не решит вашу проблему, вы можете улучшить свой вопрос с помощью некоторых фрагментов кода, а не позволить нам выполнять всю работу.
load
для прослушивания, а затем запустить скрипт, но я бы посоветовал вам опубликовать, как загружается пост в Facebook, чтобы мы могли увидеть, какие могут быть варианты.