小编use*_*796的帖子

我有一些问题要在我的iPhone上启动一个keyup事件,我的代码如下:

        var passwordArray = ["word", "test", "hello", "another", "here"];

        var test = document.getElementById('enter-password');
        test.addEventListener('keyup', function(e) {

            if (jQuery.inArray(this.value, passwordArray) != -1) {
                alert("THIS IS WORKING");
            } else {}

        });

这个想法是,当用户输入#enter-password字段时,当他们匹配passwordArray警报中的单词时,将触发.这适用于桌面,例如,一旦你输入word该功能,一旦你输入该功能就会立即开火d.反正有没有让它适用于移动设备？

我有一个hashchange函数设置来显示/隐藏about页面的不同部分,而没有7个单独的页面.这一切工作正常,伟大的逸岸,但只是一个小东西,困扰着我,当屏幕上显示的相关内容,例如:#about01如果你点击菜单按钮,再浏览器跳转到这个div的顶部,我不我不想发生.
这是我的jQuery:

jQuery(document).ready(function(){

    jQuery(window).on('hashchange', function(){
        var hashFound = determineContent();
        if(hashFound) return false;
    });

    function determineContent(){

        var hash = window.location.hash;
        jQuery('.about').hide();

        jQuery('.sub-menu').each(function(){

             if (jQuery(this).attr('hook') === hash.replace('#about', '')) {
               jQuery('#about'+jQuery(this).attr('hook')).fadeIn();
                 return true;
             }
        });

        jQuery('html, body').animate({scrollTop:0}, 'slow');
        return false;
    }

    determineContent();
});

HTML:

<div id="sub-menu">
        <li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">TEST</a></li>
        <li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">TEST</a></li>
        <li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">TEST</a></li>
        <li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">TEST</a></li>
        <li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">TEST</a></li>
        <li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">TEST</a></li>
        <li id="sub-menu-07" class="sub-menu" hook="07"><a href="#about07">TEST</a></li> …

我正在设置一个流体同位素网格有一些麻烦,一个简单的4列网格,每个网格.grid-block宽度为24%,留下1%的容差.
问题是,当页面加载时,它显示为3列网格,直到调整浏览器窗口大小并将其捕捉到4列.
这是一个jsfiddle演示:http ://jsfiddle.net/BVzTV/4/jQuery
:

$(document).ready(function() {
var $container = $('#main-grid');

$container.isotope({
    itemSelector: '.grid-block',
    animationEngine: 'best-available',
    resizable: false,
    masonry: { columnWidth: $container.width() / 4 }
    });

    $(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 4 }
  });
    });
});

I can't figure out why this is happening/how to fix it, its simple really I'm just trying to achieve a simple 4 column grid when the page loads, and …

我有一个100%宽度的容器div,.block里面有2个div,宽度均为50%,显示内联块并向左浮动.在这些div之间是否可以拥有一致的20px排水沟？
我尝试了一种简单的方法,将宽度设置为49%,左边的边距为2%,但理想情况下,如果可能的话,我希望在这两个div之间保持一致的20px排水沟.
jsFiddle演示:http ://jsfiddle.net/D6U3t/

HTML:

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS:

.container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 300px;
    background-color: silver;
}

.block {
    position: relative;
    width: 50%; height: 200px;
    background-color: red;
    display: inline-block;
    float: left;
}

任何建议将不胜感激!

好的，所以我知道这会引起每个人的问题，并且也会引起我的问​​题。我在客户端站点上使用无限滚动插件，并与同位素插件结合使用，以按顺序加载其产品，但问题是，由于他们有1000多种产品，因此任何人浏览该站点然后单击某个产品，当他们单击后退按钮，它们将返回顶部（或恰好在第一页的折叠上方），这会引起很多问题。

我的标记如下：

$(window).load(function () {

    var $container = $('.products-grid-wrap');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.products-grid-block',
            filter: '*:not(.hidden), .products-grid-block',
            animationEngine: 'best-available',
            layoutMode: "perfectMasonry",
            perfectMasonry: {
              columnWidth: 280,
              rowHeight: 310
            }
        });         

        $container.infinitescroll({
            navSelector: '#page_nav', // selector for the paged navigation 
            nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
            itemSelector: '.regular-product-block, .products-grid-block', // selector for all items you'll retrieve
            pixelsFromNavToBottom: Math.round($(window).height() * 1.5),
            bufferPx: Math.round($(window).height() * 1.5),
            loading: {
                finishedMsg: 'No more products to load.',
                img: 'http://www.by-form.net/wp-content/uploads/2014/11/ajax-loader-big.gif'
            } …

我试图弄清楚它是否可能具有流体同位素布局的方形div.我有一个4列网格,每个div是容器的24%宽度,但我希望这些div是完美的正方形,我无法弄清楚如何实现这一点.
这是一个有效的jsfiddle演示:http ://jsfiddle.net/RJZu6/8/
jQuery:

var $container = $("#main-grid");

var size = function () {
    $container.isotope({
        masonry: {
            columnWidth: $container.width() / 4
        }
    });
}

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: ".grid-block",
        animationEngine: "jquery",
        sortBy: "random",
        resizable: false,
        masonry: {
            columnWidth: $container.width() / 4
        }
    });

    size();
});

$(window).smartresize(size);

CSS:

#main-grid { 
    position: absolute;
    width: 100%;
}

.grid-block { 
    width: 24%; height: 50px; 
    margin-left: 0.25%; margin-right: 0.25%; 
    margin-bottom: 5px; 
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: …

我设置了一个jQuery函数,当某个div进入视图时会改变身体背景颜色,例如,身体背景颜色为黑色,当#block-three(包含黑色文本)时,身体背景颜色变为白色,并在此时更改回来走出视野.这很好用,但它非常突然,我正在寻找背景颜色之间更平滑的过渡,滚动时颜色之间的渐变(如果可能的话).
jsFiddle演示:http ://jsfiddle.net/neal_fletcher/TB53d/

HTML:

<div id="block-one" class="block">
    <div class="inner-block">Test</div>
    <div class="inner-block"></div>
    <div class="inner-block"></div>
</div>
<div id="block-two" class="block">
    <div class="inner-block">Test</div>
</div>
<div id="block-three" class="block">
    <div class="inner-block">Test</div>
    <div class="inner-block"></div>
</div>
<div id="block-four" class="block">
    <div class="inner-block">Test</div>
    <div class="inner-block"></div>
    <div class="inner-block"></div>
</div>
<div id="block-five" class="block">
    <div class="inner-block">Test</div>
    <div class="inner-block"></div>
    <div class="inner-block"></div>
</div>

jQuery的:

var blockHeight = [];
$(".block").each(function () {
    blockHeight.push($(this).height());
});

function hoverCurrentItem() {
    var sIndex = 0;
    var totalHeight = 0;
    var scrolled = $(window).scrollTop();
    for (var i …

我试图点击iframe中的元素点击事件,但它似乎没有工作.我目前的设置:
jsFiddle:http ://jsfiddle.net/q4aa3/jQuery
:

$(document).ready(function () {
    $('#this-iframe').load(function () {
        $('#this-iframe').contents().find('img').live({
            click: function () {
                alert('clicked img');
            }
        });
    });
});

单击iframe内的图像不会触发警报,我不知道为什么,或者是否有更好的方法来实现此目的？任何建议将不胜感激!

我想在继续之前尝试检查url中的哈希值是否包含某个值,我有一个功能如下:

$(window).load(function () {
    var hash = window.location.hash,
        number = $(hash).index(),
        width = 403,
        final = width * number;
        setTimeout(function () {
        $('.news-inner-wrap').animate({
            'marginLeft': "-=" + final + "px"
        });
        }, 1000);
});

因此,如果哈希是www.website.com/#news-item-03它将用户水平滑动到第3个新闻故事,这非常有用!我只希望这个函数触发,但是如果哈希news-item显然包含每个都会改变后的数字,但是如果哈希开始于news-item那时我想要触发上面的函数,我甚至不确定它是否可能,任何建议将不胜感激!

我正在寻找div的实例编号,例如我有4个div实例.test,并且.length只使用生成4.但是我想在每个div中放置实例编号,例如div的第3个实例中.test有一个3,依此类推.

jsFiddle演示:http ://jsfiddle.net/neal_fletcher/YrtjF/

HTML:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

jQuery的:

$(document).ready(function () {

    var n = $(".test").length;

    $('.test').html(n);

});

如果这是可能的？任何建议将不胜感激!

我.slider-wrap在100%宽度上有一个父div，.slider-slide-wrap里面有 3个子 div，每个在680px宽度上。您可以在.slider-wrapdiv内水平滚动。

我还创建了 2 个.slider-navdiv，#slider-left坐在左边，#slider-right坐在右边，这个想法是，您可以使用滚动条随意滚动，但是如果您#slider-right随时单击该div，它就会将您滑到下一个.slider-slide-wrapdiv实例。因此，2 个.slider-navdiv 将带您左右移动到.slider-slide-wrapdiv的下一个/上一个实例。

jsFiddle 演示：http : //jsfiddle.net/neal_fletcher/rAb3V/

HTML：

<div class="slider-wrap">
    <div class="slide-wrap">
        <div class="slider-slide-wrap"></div>
        <div class="slider-slide-wrap"></div>
        <div class="slider-slide-wrap"></div>
    </div>
</div>

<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>

jQuery：

$(document).ready(function () {

    var n = $(".slider-slide-wrap").length,
        width = 680,
        newwidth = width * n;

    $('.slide-wrap').css({
        'width': newwidth
    });

});


$(document).ready(function () { …

我不确定为什么，但是由于某种原因event.preventDefault()，Firefox中的电话无法正常工作。我使用它来阻止点击a将您重定向到的链接href，而是运行点击功能。标记如下：

jQuery的：

$('.sub-list-click a').click(function() {
    event.preventDefault();

    var sub = $(this).parent("li").next(".sub, .homepage-sub");

    if (sub.css('display') == 'none') {

        $(".sub, .homepage-sub").slideUp();
        $(".sub, .homepage-sub").children("li").animate({
            opacity: "0"
        }, 10);               

        setTimeout(function() { 
            sub.slideDown();                  
        }, 200);
        setTimeout(function() {
            sub.children("li").animate({
                opacity: "1"
            }, 200); 
        }, 500);   

    } else {
        sub.slideUp();
    }      

    return false;
});

它可以在我测试过的所有其他浏览器中使用，只是Firefox似乎有一些问题。