Skip to content

Commit d882532

Browse files
fiegfieg
authored
Merge pull request #418 from fieg/overflow-example
Added overflow example
2 parents 7512e46 + c2fe8f1 commit d882532

File tree

13 files changed

+244
-15
lines changed

13 files changed

+244
-15
lines changed

‎Makefile‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,16 @@ BUILD_DIR = .build
22
TEST_DIR = .
33
SEMVER=prerelease --preid=beta
44

5+
EXAMPLES=$(dir $(wildcard examples/*/package.json))
6+
57
install:
68
npm install
79
npm run build
8-
cd examples/articles && npm install && npm link && npm run build;
9-
cd examples/blocks && npm install && npm link && npm run build;
10-
cd examples/masonry && npm install && npm link && npm run build;
10+
$(foreach ex,$(EXAMPLES),(cd $(ex) && npm install && npm run link && npm run build) || exit $$?;)
1111
.PHONY: install
1212

1313
update:
14-
cd examples/articles && npm update;
15-
cd examples/blocks && npm update;
16-
cd examples/masonry && npm update;
14+
$(foreach ex,$(EXAMPLES),(cd $(ex) && npm update) || exit $$?;)
1715
.PHONY: update
1816

1917
up:

‎docs/advanced/history.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
## Updating url and title
44

5-
When users are scrolling through pages we can update the browser url and page title. This allows the current page to be shared or bookmarked.
6-
5+
When users are scrolling through pages we can update the browser url and page title. This allows the current page to be shared or bookmarked.
6+
77
We can achieve this by listening for the [`page`](events.md#page) event. The page event contains the `url` and `title` of the current page in view.
88

99
The [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) can be used to update the url.
@@ -19,7 +19,7 @@ ias.on('page', (event) => {
1919
});
2020
```
2121

22-
[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)
22+
[View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/articles/)
2323

2424
## Loading previous pages
2525

‎docs/advanced/last-page-message.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,4 @@ ias.on('last', function() {
2828
})
2929
```
3030

31-
[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)
31+
[View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/articles/)

‎docs/advanced/overflow.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
# Overflow
22

3-
{% hint style='working' %}
4-
This feature is still work in progress
5-
{% endhint %}
6-
73
It is possible to have infinite scrolling pages inside an overflow element.
84

95
First define a container element.
@@ -32,3 +28,5 @@ let ias = new InfiniteAjaxScroll('#scroller', {
3228
scrollContainer: '#scroller'
3329
});
3430
```
31+
32+
[View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/overflow/)

‎docs/events.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,4 +147,4 @@ ias.on('page', (event) => {
147147
})
148148
```
149149

150-
[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)
150+
[View this behaviour in a live demo](https://infiniteajaxscroll.com/examples/articles/)

‎examples/overflow/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
dist
3+
.cache
4+
package-lock.json
5+
.npmrc

‎examples/overflow/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
7+
<title>Overflow</title>
8+
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10+
<link rel="stylesheet" href="./style.css"/>
11+
12+
</head>
13+
<body>
14+
15+
<div class="surface-container">
16+
<nav>
17+
<div class="nav nav-tabs" id="nav-tab" role="tablist">
18+
<a class="nav-item nav-link active" id="nav-overflow1-tab" data-toggle="tab" href="#nav-overflow1" role="tab" aria-controls="nav-overflow1" aria-selected="true">Overflow 1</a>
19+
<a class="nav-item nav-link" id="nav-overflow2-tab" data-toggle="tab" href="#nav-overflow2" role="tab" aria-controls="nav-overflow2" aria-selected="false">Overflow 2</a>
20+
</div>
21+
</nav>
22+
23+
<div class="tab-content" id="nav-tabContent">
24+
<div class="tab-pane fade show active" id="nav-overflow1" role="tabpanel" aria-labelledby="nav-overflow1-tab">
25+
<div class="overflow-container" id="overflow1">
26+
<div class="pager">
27+
<a href="page1.html" class="pager__next">Next &rightarrow;</a>
28+
</div>
29+
</div>
30+
</div>
31+
<div class="tab-pane fade" id="nav-overflow2" role="tabpanel" aria-labelledby="nav-overflow2-tab">
32+
<div class="overflow-container" id="overflow2">
33+
<div class="pager">
34+
<a href="page1.html" class="pager__next">Next &rightarrow;</a>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
42+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
43+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
44+
<script src="./index.js"></script>
45+
</body>
46+
</html>

‎examples/overflow/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
2+
3+
window.ias1 = new InfiniteAjaxScroll('#overflow1', {
4+
scrollContainer: '#overflow1',
5+
item: '.item',
6+
next: '.pager__next',
7+
pagination: '#overflow1 .pager',
8+
});
9+
10+
window.ias2 = new InfiniteAjaxScroll('#overflow2', {
11+
scrollContainer: '#overflow2',
12+
item: '.item',
13+
next: '.pager__next',
14+
pagination: '#overflow2 .pager',
15+
});

‎examples/overflow/package.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "infinite-ajax-scroll-overflow",
3+
"description": "An example of infinite scroll with overflow",
4+
"version": "1.0.0",
5+
"homepage": "https://infiniteajaxscroll.com",
6+
"repository": "github:webcreate/infinite-ajax-scroll",
7+
"bugs": "https://github.com/webcreate/infinite-ajax-scroll/issues",
8+
"author": {
9+
"company": "Webcreate",
10+
"name": "Jeroen Fiege",
11+
"web": "https://webcreate.nl"
12+
},
13+
"private": true,
14+
"scripts": {
15+
"build": "parcel build *.html --public-url ./",
16+
"watch": "parcel watch * --public-url ./",
17+
"link": "npm link ../../"
18+
},
19+
"keywords": [
20+
"infinite-ajax-scroll",
21+
"infinite-scroll",
22+
"infinite",
23+
"endless",
24+
"scroll",
25+
"scrolling",
26+
"ajax",
27+
"pagination",
28+
"ias",
29+
"jquery-ias"
30+
],
31+
"dependencies": {
32+
"@webcreate/infinite-ajax-scroll": "^3.0.0-beta.4"
33+
},
34+
"devDependencies": {
35+
"parcel-bundler": "^1.12.4"
36+
}
37+
}

‎examples/overflow/page1.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
7+
<title>Overflow Page 1</title>
8+
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10+
<link rel="stylesheet" href="./style.css"/>
11+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<div class="item">1</div>
16+
<div class="item">2</div>
17+
<div class="item">3</div>
18+
<div class="item">4</div>
19+
<div class="item">5</div>
20+
<div class="item">6</div>
21+
<div class="item">7</div>
22+
<div class="item">8</div>
23+
<div class="item">9</div>
24+
<div class="item">10</div>
25+
26+
<div class="pager">
27+
<a href="page2.html" class="pager__next">Next &rightarrow;</a>
28+
</div>
29+
</div>
30+
31+
</body>

0 commit comments

Comments
 (0)