小编sou*_*ste的帖子

我有一个包含4个选项的选择框,选择每个选项将导致删除所有当前的.itemdiv并加载新的.items然后使用同位素重新排列它们.

$('.menu-select').change(function(){
    var selected=$('.menu-select-option:selected').html().toLowerCase();
        if(selected=='all')
            {
                loadContent('mixed_home_all.html');
            }
        if(selected=='recommended')
            {
                loadContent('mixed_home_reco.html');
            }
        if(selected=='popular')
            {
                loadContent('mixed_home_pop.html');
            }
});

loadContent函数如下所示:

    function loadContent(filename){
        var $item=$('.item');
        $container.isotope('remove', $item);
        $container.load(filename, function(){
            $container.imagesLoaded(function(){
                $container.isotope('reLayout');
            });
        });
    }

有些原因,reLayout是行不通的.该课程isotope-item也没有被添加到单个项目中.这是控制台日志中没有错误.

我正在使用twitter bootstrap将2个div并排放置.每个div中都有中大图像,使用jquery 同位素排列.问题是当div中没有​​足够的图像时,div宽度保持不变,并留下很多额外的空间.像这样 :

我希望div在中央对齐,并且还要减小宽度以适应其中的图像.像这样:

我的HTML代码是这样的:

<div id="container" class="container-fluid">
    <div class="row-fluid">
        <div class="legend span8">Section1</div>
        <div class="legend span4">Section2</div>
    </div>
    <div class="row-fluid">
        <div id="section1" class="span8">
            <div class="small"><img src="images/1.jpg" /></div>
            <div class="small"><img src="images/2.jpg" /></div>
            <div class="big"><img src="images/3.jpg" /></div>
        </div>
        <div id="section2" class="span4">
            <div class="small"><img src="images/1.jpg" /></div>
            <div class="small"><img src="images/2.jpg" /></div>
            <div class="big"><img src="images/3.jpg" /></div>
        </div>
    </div>
</div>

我的CSS看起来像这样:

#section1 .small{
    width:150px;
    height:200px;
    overflow:hidden;
}
#section1 .big{
    width:320px;
    height:420px;
    overflow:hidden;
}
#section2 .small{
    width:80px;
    height:100px;
    overflow:hidden;
}
#section2 .big{
    width:170px;
    height:220px;
    overflow:hidden;
} …

我有以下html树:

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">
</div>

我使用ajax将以下内容加载到#content-wrap1:

<div id="content">
    <a href="whoweare.php">Who we are</a>
    <a href="whatwedo.php">Our team</a>
    <p>ABOUT US : Dance is a type of art</p>
</div>

哪个成功发生,结果HTML如下所示:

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">.
        <div id="content">
        <a href="whoweare.php">Who we are</a>
        <a href="whatwedo.php">Our team</a>
        <p>ABOUT US : Dance is a type of art</p>
    </div>
</div>

现在我想点击动态加载的链接来加载以下内容:

<div id="content">
    <a href="whoweare.php">Who we are</a>
    <a href="whatwedo.php">Our team</a>
    <p>Hi there! How are you?</p>
</div>

所以最终的HTML看起来像这样:

<div class="section yellow" id="section1"> …

我正在使用load()函数通过单击菜单中的按钮从不同页面动态获取详细信息.其中一个按钮指向使用自己的jquery效果的图像库.但那些脚本没有运行.我尝试使用getscript()显式加载它们,但这也不起作用.这是代码:

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if((hash==href.substr(0,href.length-4))&&(hash!='')){
        var toLoad = hash+'.php #content';
        $('#content').load(toLoad);
    }                                           
});

$('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide();   
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
    $('#content').load(toLoad,showNewContent());
    function showNewContent() {
        $('#content').fadeIn(1000);
        $.getScript("gallery.js");
    }

    return false;

});

});

这是我的gallery.js文件的内容.确切的效果可能无关紧要,我已粘贴下面的代码来显示我的警报框的位置:

$(document).ready(function(){
//perform actions when DOM is ready
  var z = 0; //for setting the initial z-index's
  var inAnimation = false; //flag for testing if we are in a animation
  alert("1"); …

我有一个页面,我发出ajax请求并在用户按下按钮后的前6秒显示加载标志:

<button onclick="runLoader();"></button>

<script>
    var startTime=(new Date).getTime();
    function runLoader(){
        runAjax();
        var i=0;
        var timer = setInterval(function(e){
            i++;
            //code for loading sign
            if(i==3)
                clearInterval(timer);
        } ,2000);
    }

    function runAjax(){
        $.ajax({
            //
        }).done(function(){
            var timer2 = setInterval(function(){
                var d = new Date();
                var t = d.getTime();
                if(t-startTime>=6000){
                    clearInterval(timer2);
                    // do X
                }
            },500);
        }
    }
</script>

我想在两次运行6秒之后才进行动作XrunLoader()并且runAjax()导致响应,并且不久之后.

就像,如果runAjax()在2秒内响应,我还是要继续显示6秒加载标志,然后执行X.如果加载符号显示6秒,我想等待runAjax()返回,只要它需要.

但使用该Date()方法会产生不准确的结果.例如:即使仅过了2秒,它也会显示7.765秒.我读了一些我应该使用的地方以console.log(time)获得更好的准确性,但它在<= IE9中不起作用.

有没有更好的方法来解决这个问题？

注意:我正在使用setInterval()而不是setTimeout()因为加载涉及循环通过3个元素的数组,"Fetching","Processing"和"Loading"每个显示2秒:)