diff --git a/README.textile b/README.textile index 2c36685..3d60f02 100644 --- a/README.textile +++ b/README.textile @@ -87,6 +87,28 @@ bc.. $(someMyOneDiv).bind('inview', function(e, isInView, visiblePartX, visibleP } }); +h2. Using offset + +If you use this code for lazy loading images, sometimes you are interested to preload the image when it's getting close to the view port. So you can add a offset to the target element. + +Add offset from 300px to all sites from the view port. Example: Your view port is 600x800 px, so the new one will be 1200x1400. All images in this area will be preloaded. + +```html + +``` + +Add offset from 300px to top and bottom of view port. Example: Your view port is 600x800 px, so the new one will be 600x1400. + +```html + +``` + +Add offset from 300px to left and right of the view port. Example: Your view port is 600x800 px, the new will be 1200x1400px. + +```html + +``` + h2. How it works An interval in the background checks the position of the elements against the viewport dimensions and the scroll position. @@ -120,4 +142,4 @@ h4. The Test Suite succeeds in the following browsers that were tested: h4. The Test Suite doesn't completely succeed but the demos in this repository work without problems in the following browsers: * Mobile WebKit on Android 2.2 -* Mobile WebKit on Palm Pre 1 \ No newline at end of file +* Mobile WebKit on Palm Pre 1 diff --git a/jquery.inview.js b/jquery.inview.js index 56815f0..d1a4606 100644 --- a/jquery.inview.js +++ b/jquery.inview.js @@ -89,10 +89,22 @@ elementSize = { height: $element.height(), width: $element.width() }, elementOffset = $element.offset(), inView = $element.data('inview'), + offset = 0, + offsetLeft = 0, + offsetTop = 0, visiblePartX, visiblePartY, visiblePartsMerged; + if (offset = $element.data('offset')) { + offsetLeft = offset; + offsetTop = offset; + } else if (offset = $element.data('offset-top')) { + offsetTop = offset; + } else if (offset = $element.data('offset-left')) { + offsetLeft = offset; + } + // Don't ask me why because I haven't figured out yet: // viewportOffset and viewportSize are sometimes suddenly null in Firefox 5. // Even though it sounds weird: @@ -102,10 +114,10 @@ return; } - if (elementOffset.top + elementSize.height > viewportOffset.top && - elementOffset.top < viewportOffset.top + viewportSize.height && - elementOffset.left + elementSize.width > viewportOffset.left && - elementOffset.left < viewportOffset.left + viewportSize.width) { + if (elementOffset.top + elementSize.height > viewportOffset.top - offsetTop && + elementOffset.top < viewportOffset.top + viewportSize.height + offsetTop && + elementOffset.left + elementSize.width > viewportOffset.left - offsetLeft && + elementOffset.left < viewportOffset.left + viewportSize.width + offsetLeft) { visiblePartX = (viewportOffset.left > elementOffset.left ? 'right' : (viewportOffset.left + viewportSize.width) < (elementOffset.left + elementSize.width) ? 'left' : 'both'); diff --git a/test/index.html b/test/index.html index 58f5689..eaf2f61 100644 --- a/test/index.html +++ b/test/index.html @@ -5,40 +5,46 @@ QUnit Test Suite - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + + + + + + + + + + + -

QUnit Test Suite

-

-
-

-
    +
    - \ No newline at end of file + diff --git a/test/test.js b/test/test.js index 598034d..8a219c3 100644 --- a/test/test.js +++ b/test/test.js @@ -1,11 +1,11 @@ QUnit.config.reorder = false; -window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7', 'jQuery 1.8'], function(i, version) { +window['jQuery 1.11'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7', 'jQuery 1.8', 'jQuery 1.9', 'jQuery 1.10', 'jQuery 1.11'], function(i, version) { var jQuery = window[version], $ = jQuery; - module('jquery.inview - ' + version, { - setup: function() { + QUnit.module('jquery.inview - ' + version + ' (' + $.fn.jquery + ')', { + beforeEach: function() { $(window).scrollTop(0).scrollLeft(0); this.size = 20000; @@ -26,17 +26,19 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 this.element2 = this.element.clone(); }, - teardown: function() { + afterEach: function() { $(window).scrollTop(0).scrollLeft(0); this.container.remove(); this.element.remove(); + this.element2.remove(); } }); - asyncTest('Check vertical scrolling', function() { - expect(5); + QUnit.test('Check vertical scrolling', function(assert) { + var done = assert.async(); + assert.expect(5); var element = this.element, firstCall, @@ -50,7 +52,7 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 setTimeout(function() { $(window).scrollTop(0).scrollLeft(0); - ok(!firstCall, 'inview shouldn\'t be triggered initially when the element isn\'t in the viewport'); + assert.ok(!firstCall, 'inview shouldn\'t be triggered initially when the element isn\'t in the viewport'); element.unbind('inview.firstCall'); element.bind('inview.secondCall', function(event, inViewParam) { secondCall = true; @@ -61,8 +63,8 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 setTimeout(function() { - ok(secondCall, 'Triggered handler after element appeared in viewport'); - ok(inView, 'Parameter, indicating whether the element is in the viewport, is set to "true"'); + assert.ok(secondCall, 'Triggered handler after element appeared in viewport'); + assert.ok(inView, 'Parameter, indicating whether the element is in the viewport, is set to "true"'); element.unbind('inview.secondCall'); element.bind('inview.thirdCall', function(event, inViewParam) { thirdCall = true; @@ -72,9 +74,9 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 $(window).scrollTop(0).scrollLeft(0); setTimeout(function() { - ok(thirdCall, 'Triggered handler after element disappeared in viewport'); - strictEqual(inView, false, 'Parameter, indicating whether the element is in the viewport, is set to "false"'); - start(); + assert.ok(thirdCall, 'Triggered handler after element disappeared in viewport'); + assert.strictEqual(inView, false, 'Parameter, indicating whether the element is in the viewport, is set to "false"'); + done(); }, 1000); }, 1000); @@ -83,8 +85,9 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }); - asyncTest('Check horizontal scrolling', function() { - expect(5); + QUnit.test('Check horizontal scrolling', function(assert) { + var done = assert.async(); + assert.expect(5); var element = this.element, firstCall, @@ -99,7 +102,7 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 setTimeout(function() { $(window).scrollTop(0).scrollLeft(0); - ok(!firstCall, 'inview shouldn\'t be triggered initially when the element isn\'t in the viewport'); + assert.ok(!firstCall, 'inview shouldn\'t be triggered initially when the element isn\'t in the viewport'); element.unbind('inview.firstCall'); element.bind('inview.secondCall', function(event, inViewParam) { secondCall = true; @@ -110,8 +113,8 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 setTimeout(function() { - ok(secondCall, 'Triggered handler after element appeared in viewport'); - ok(inView, 'Parameter, indicating whether the element is in the viewport, is set to "true"'); + assert.ok(secondCall, 'Triggered handler after element appeared in viewport'); + assert.ok(inView, 'Parameter, indicating whether the element is in the viewport, is set to "true"'); element.unbind('inview.secondCall'); element.bind('inview.thirdCall', function(event, inViewParam) { thirdCall = true; @@ -121,9 +124,9 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 $(window).scrollTop(0).scrollLeft(0); setTimeout(function() { - ok(thirdCall, 'Triggered handler after element disappeared in viewport'); - strictEqual(inView, false, 'Parameter, indicating whether the element is in the viewport, is set to "false"'); - start(); + assert.ok(thirdCall, 'Triggered handler after element disappeared in viewport'); + assert.strictEqual(inView, false, 'Parameter, indicating whether the element is in the viewport, is set to "false"'); + done(); }, 1000); }, 1000); @@ -132,8 +135,9 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }); - asyncTest('Move element into viewport without scrolling', function() { - expect(3); + QUnit.test('Move element into viewport without scrolling', function(assert) { + var done = assert.async(); + assert.expect(3); var element = this.element, calls = 0; @@ -144,18 +148,18 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 setTimeout(function() { - equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); element.css({ left: 0 }); setTimeout(function() { - equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); element.css({ left: '10000px' }); setTimeout(function() { - equal(calls, 2, 'Callback has been fired after the element disappeared from viewport'); - start(); + assert.equal(calls, 2, 'Callback has been fired after the element disappeared from viewport'); + done(); }, 1000); @@ -165,24 +169,26 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }); - asyncTest('Check whether element which isn\'t in the dom tree triggers the callback', function() { - expect(0); + QUnit.test('Check whether element which isn\'t in the dom tree triggers the callback', function(assert) { + var done = assert.async(); + assert.expect(0); this.element.bind('inview', function(event, isInView) { - ok(false, 'Callback shouldn\'t be fired since the element isn\'t even in the dom tree'); - start(); + assert.ok(false, 'Callback shouldn\'t be fired since the element isn\'t even in the dom tree'); + done(); }); - setTimeout(function() { start(); }, 1000); + setTimeout(function() { done(); }, 1000); }); - asyncTest('Check whether element which is on the top outside of viewport is not firing the event', function() { - expect(0); + QUnit.test('Check whether element which is on the top outside of viewport is not firing the event', function(assert) { + var done = assert.async(); + assert.expect(0); this.element.bind('inview', function(event, isInView) { - ok(false, 'Callback shouldn\'t be fired since the element is outside of viewport'); - start(); + assert.ok(false, 'Callback shouldn\'t be fired since the element is outside of viewport'); + done(); }); this.element.css({ @@ -190,16 +196,17 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 left: '50px' }).appendTo('body'); - setTimeout(function() { start(); }, 1000); + setTimeout(function() { done(); }, 1000); }); - asyncTest('Check whether element which is on the left outside of viewport is not firing the event', function() { - expect(0); + QUnit.test('Check whether element which is on the left outside of viewport is not firing the event', function(assert) { + var done = assert.async(); + assert.expect(0); this.element.bind('inview', function(event, isInView) { - ok(false, 'Callback shouldn\'t be fired since the element is outside of viewport'); - start(); + assert.ok(false, 'Callback shouldn\'t be fired since the element is outside of viewport'); + done(); }); this.element.css({ @@ -207,12 +214,414 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 left: '-50px' }).appendTo('body'); - setTimeout(function() { start(); }, 1000); + setTimeout(function() { done(); }, 1000); }); + // tests for offset + QUnit.test('Check whether element which is on the top outside of viewport and has offset is firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); - asyncTest('Check visiblePartX & visiblePartY parameters #1', function() { - expect(2); + var element = this.element, + calls = 0; + + element.css({ + top: '-200px', + left: '0' + }).data('offset', '150') + .appendTo('body') + .bind('inview', function(event) { calls++; }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ top: '-49px' }); + + setTimeout(function () { + + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the bottom outside of viewport and has offset is firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: this.size + 'px', + left: '0' + }) + .data('offset', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ top: window.innerHeight + 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the left outside of viewport and has offset is firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: 0, + left: window.innerWidth + 150 + 'px' + }) + .data('offset', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ left: window.innerWidth + 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the right outside of viewport and has offset is firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: 0, + left: -element.width() - 150 + 'px' + }) + .data('offset', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ left: -element.width() - 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + // tests for offset-top + QUnit.test('Check whether element which is on the top outside of viewport and has offset-top is firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: '-200px', + left: '0' + }).data('offset-top', '150') + .appendTo('body') + .bind('inview', function(event) { calls++; }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ top: '-49px' }); + + setTimeout(function () { + + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the bottom outside of viewport and has offset-top is firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: this.size + 'px', + left: '0' + }) + .data('offset-top', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ top: window.innerHeight + 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the left outside of viewport and has offset-top is not firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: 0, + left: window.innerWidth + 150 + 'px' + }) + .data('offset-top', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ left: window.innerWidth + 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the right outside of viewport and has offset-top is not firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: 0, + left: -element.width() - 150 + 'px' + }) + .data('offset-top', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ left: -element.width() - 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + // tests for offset-left + QUnit.test('Check whether element which is on the top outside of viewport and has offset-left is not firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: '-200px', + left: '0' + }).data('offset-left', '150') + .appendTo('body') + .bind('inview', function(event) { calls++; }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ top: '-51px' }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\t been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the bottom outside of viewport and has offset-left is not firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: this.size + 'px', + left: '0' + }) + .data('offset-left', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ top: window.innerHeight + 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the left outside of viewport and has offset-left is firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: 0, + left: window.innerWidth + 150 + 'px' + }) + .data('offset-left', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ left: window.innerWidth + 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check whether element which is on the right outside of viewport and has offset-left is firing the event', function (assert) { + var done = assert.async(); + assert.expect(2); + + var element = this.element, + calls = 0; + + element.css({ + top: 0, + left: -element.width() - 150 + 'px' + }) + .data('offset-left', 150) + .appendTo('body') + .bind('inview', function() { + calls++; + }); + + setTimeout(function () { + + assert.equal(calls, 0, 'Callback hasn\'t been fired since the element isn\'t in the viewport'); + element.css({ left: -element.width() - 149 + 'px' }); + + setTimeout(function () { + + assert.equal(calls, 1, 'Callback has been fired after the element appeared in the viewport'); + done(); + + }, 1000); + + }, 1000); + + }); + + + QUnit.test('Check visiblePartX & visiblePartY parameters #1', function(assert) { + var done = assert.async(); + assert.expect(2); this.element.css({ top: '-25px', @@ -220,15 +629,16 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }).appendTo('body'); this.element.bind('inview', function(event, isInView, visiblePartX, visiblePartY) { - equal(visiblePartX, 'right', 'visiblePartX has correct value'); - equal(visiblePartY, 'bottom', 'visiblePartY has correct value'); - start(); + assert.equal(visiblePartX, 'right', 'visiblePartX has correct value'); + assert.equal(visiblePartY, 'bottom', 'visiblePartY has correct value'); + done(); }); }); - asyncTest('Check visiblePartX & visiblePartY parameters #2', function() { - expect(2); + QUnit.test('Check visiblePartX & visiblePartY parameters #2', function(assert) { + var done = assert.async(); + assert.expect(2); this.element.css({ top: '0', @@ -236,15 +646,16 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }).appendTo('body'); this.element.bind('inview', function(event, isInView, visiblePartX, visiblePartY) { - equal(visiblePartX, 'right', 'visiblePartX has correct value'); - equal(visiblePartY, 'both', 'visiblePartY has correct value'); - start(); + assert.equal(visiblePartX, 'right', 'visiblePartX has correct value'); + assert.equal(visiblePartY, 'both', 'visiblePartY has correct value'); + done(); }); }); - asyncTest('Check visiblePartX & visiblePartY parameters #3', function() { - expect(2); + QUnit.test('Check visiblePartX & visiblePartY parameters #3', function(assert) { + var done = assert.async(); + assert.expect(2); this.element.css({ top: '0', @@ -252,42 +663,70 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }).appendTo('body'); this.element.bind('inview', function(event, isInView, visiblePartX, visiblePartY) { - equal(visiblePartX, 'both', 'visiblePartX has correct value'); - equal(visiblePartY, 'both', 'visiblePartY has correct value'); - start(); + assert.equal(visiblePartX, 'both', 'visiblePartX has correct value'); + assert.equal(visiblePartY, 'both', 'visiblePartY has correct value'); + done(); }); }); - asyncTest('Check "live" events', function() { - expect(3); - - var that = this, - elems = $("body .test-container > div.test-element"); - elems.live("inview", function(event) { - elems.die("inview"); - ok(true, "Live event correctly fired"); - equal(event.currentTarget, that.element[0], "event.currentTarget correctly set"); - equal(this, that.element[0], "Handler bound to target element"); - start(); + // the live event was removed in jQuery version 1.9 + if (window['jQuery 1.11'].versioncompare('1.9', $.fn.jquery) > 0) { + QUnit.test('Check "live" events', function (assert) { + var done = assert.async(); + assert.expect(3); + + var that = this, + elems = $("body .test-container > div.test-element"); + elems.live("inview", function (event) { + elems.die("inview"); + assert.ok(true, "Live event correctly fired"); + assert.equal(event.currentTarget, that.element[0], "event.currentTarget correctly set"); + assert.equal(this, that.element[0], "Handler bound to target element"); + done(); + }); + + this.element.css({ + top: '0', + left: '0' + }).appendTo(this.container); }); + } - this.element.css({ - top: '0', - left: '0' - }).appendTo(this.container); - }); + // the one event was introduced in jQuery version 1.7 + if (window['jQuery 1.11'].versioncompare('1.7', $.fn.jquery) <= 0) { + QUnit.test('Check "one" events', function (assert) { + var done = assert.async(); + assert.expect(3); - asyncTest('Check "delegate" events', function() { - expect(3); + var that = this, + elems = $("body .test-container > div.test-element"); + this.element.one("inview", elems, function (event) { + assert.ok(true, "Live event correctly fired"); + assert.equal(event.currentTarget, that.element[0], "event.currentTarget correctly set"); + assert.equal(this, that.element[0], "Handler bound to target element"); + done(); + }); + + this.element.css({ + top: '0', + left: '0' + }).appendTo(this.container); + }); + } + + + QUnit.test('Check "delegate" events', function(assert) { + var done = assert.async(); + assert.expect(3); var that = this; this.container.delegate(".test-element", "inview", function(event) { - ok(true, "Delegated event correctly fired"); - equal(event.currentTarget, that.element[0], "event.currentTarget correctly set"); - equal(this, that.element[0], "Handler bound to target element"); - start(); + assert.ok(true, "Delegated event correctly fired"); + assert.equal(event.currentTarget, that.element[0], "event.currentTarget correctly set"); + assert.equal(this, that.element[0], "Handler bound to target element"); + done(); }); this.element.css({ @@ -297,12 +736,13 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }); - asyncTest('Check namespaced "delegate" events', function() { - expect(1); + QUnit.test('Check namespaced "delegate" events', function(assert) { + var done = assert.async(); + assert.expect(1); this.container.delegate(".test-element", "inview.foo", function(event) { - ok(true, "Delegated event correctly fired"); - start(); + assert.ok(true, "Delegated event correctly fired"); + done(); }); this.element.css({ @@ -312,8 +752,9 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }); - asyncTest('Check multiple elements', function() { - expect(2); + QUnit.test('Check multiple elements', function(assert) { + var done = assert.async(); + assert.expect(2); var i = 0; @@ -323,18 +764,19 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }).appendTo(this.container); $('.test-element').bind('inview', function() { - ok(true); + assert.ok(true); if (++i == 2) { - start(); + done(); } }); }); - + + if (!("ontouchstart" in window)) { - asyncTest('Scroll to element via focus()', function() { + QUnit.test('Scroll to element via focus()', function(assert) { // This test will fail on iOS - - expect(1); + var done = assert.async(); + assert.expect(1); var $input = $("").css({ position: "absolute", @@ -343,9 +785,9 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7 }).appendTo(this.container); $input.bind('inview', function() { - ok(true); + assert.ok(true); $input.remove(); - start(); + done(); }); setTimeout(function() {