viewport.jquery - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #golang #android #rust #linux #docker #awesome #awesome-list #vue #mcp #open-source

viewport.jquery

(★ 149)

viewport.jquery - simple but handy jQuery plugin adding methods and CSS selectors to check if element is in certain viewport

파일 탐색기

최종 버전 다운로드 (.zip)

.gitattributes
.gitignore
CODE_OF_CONDUCT.md
ISSUE_TEMPLATE.md
LICENSE
package-lock.json
package.json
README.md
viewport.jquery.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/xobotyi/viewport.jquery

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd viewport.jquery

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i viewport.jquery

이 명령어를 터미널에 그대로 입력해 실행하세요.

<img src="https://img.shields.io/npm/v/viewport.jquery.svg" alt="NPM version" />

이 명령어를 터미널에 그대로 입력해 실행하세요.

<img src="https://img.shields.io/npm/dm/viewport.jquery.svg" alt="NPM downloads" />

이 명령어를 터미널에 그대로 입력해 실행하세요.

<img src="https://img.shields.io/npm/l/viewport.jquery.svg" alt="License" />

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">viewport.jquery</h1>
<p align="center">
    <a href="https://www.npmjs.com/package/viewport.jquery">
        <img src="https://img.shields.io/npm/v/viewport.jquery.svg" alt="NPM version" />
    </a>
    <a href="https://www.npmjs.com/package/viewport.jquery">
        <img src="https://img.shields.io/npm/dm/viewport.jquery.svg" alt="NPM downloads" />
    </a>
    <a href="https://www.npmjs.com/package/viewport.jquery">
        <img src="https://img.shields.io/npm/l/viewport.jquery.svg" alt="License" />
    </a>
</p>

## About
**viewport** is simple but handy jQuery plugin adding methods and CSS selectors to check if element is in certain viewport.
Furthermore - you will be able to check position relation of two separate elements even if the are not kins.
Plugin uses [getBoundingClientRect()](https://caniuse.com/#search=getBoundingClientRect()) to determine elements positions so be sure it meets your browser support the requirements.
] version 1.x.x uses different detection principe, which will work in almost any browser but works 10-30 times slower

<img src="http://habrastorage.org/files/021/625/7eb/0216257ebf684f2f8d7ada92cda6c3c3.jpg#center"/>

## Requirements
* [jQuery](https://jquery.com) 3+ (written and tested with 3.3.1)

## Installation
Download it from [GitHub](https://github.com/xobotyi/viewport.jquery/releases/latest), or install via NPM:
```bash
npm i viewport.jquery
```

Include it in your JS code or link it in html page
```html
[script src="viewport.jquery.js" type="text/javascript"][/script]
```

Now you able to
```javascript
$(".myAwesomeElement:in-viewport").yaay();
// or
$(".myAwesomeElement").viewport().inViewport(); // true if in viewport
```

## Usage
viewport.jquery provides you two different way of relation detection: [CSS pseudo-selectors](#css-pseudo-selectors) and [jQuery methods](#jquery-methods)

### CSS pseudo-selectors
All following selectors can be used _without_ parameters and bracket.

**_threshold_** parameter must be an integer, it extends (if it positive) or reduces (if it negative) viewport sizes, but only in calculations.  
<img src="http://habrastorage.org/files/6d3/76b/c65/6d376bc6567f4496a0a79e84c99e7c68.jpg#center"/>

**_viewportSelector_** parameter must be a string, determines the selector of element that will be treated like a viewport, if more than one element corresponds given selector - the first one of them will be used. 
Otherwise viewport will be found in element's parents, it will be first element that has scroll or the BODY element of none.

#### General
```css
:hasScroll
:hasScrollVertical
:hasScrollHorizontal
```
It will filter element if it has a scroll possibility, in meaning that element contents has bigger sizes than it's own.

```css
:inViewport([ int threshold = 0 [, string viewportSelector ]])
```
It will filter the element if each it's border is within or equal viewport's borders.

#### Any side of element exceeds viewport's borders
```css
:aboveTheViewport([ int threshold = 0 [, string viewportSelector ]])
:belowTheViewport([ int threshold = 0 [, string viewportSelector ]])
:leftOfViewport([ int threshold = 0 [, string viewportSelector ]])
:rightOfViewport([ int threshold = 0 [, string viewportSelector ]])
```

#### Any side of element is within viewport's borders
```css
:aboveTheViewportPartly([ int threshold = 0 [, string viewportSelector ]])
:belowTheViewportPartly([ int threshold = 0 [, string viewportSelector ]])
:leftOfViewportPartly([ int threshold = 0 [, string viewportSelector ]])
:rightOfViewportPartly([ int threshold = 0 [, string viewportSelector ]])
```

#### Element exceeds viewport size and cant fit it
```css
:exceedsViewport([ int threshold = 0 [, string viewportSelector ]])
:exceedsViewportVertical([ int threshold = 0 [, string viewportSelector ]])
:exceedsViewportHorizontal([ int threshold = 0 [, string viewportSelector ]])
```

### jQuery methods
```javascript
$('').viewport().hasScroll();
```
**Return:** `boolean`, representing if element has scroll;

```javascript
$('').viewport().scrollableParent();
```
**Return:**  
`HTMLElement`, representing first parent element that has scroll or BODY element oif none;

```javascript
$('').viewport().relativePosition([ viewport = undefined ]);
```
_**viewport**_ can be both `HTMLElement` or `jQuery object`, meaning as for CSS selectors;

**Return:**
`object`:  
&nbsp;&nbsp;&nbsp;&nbsp;`viewport` - reference to viewport element relations was calculated    
&nbsp;&nbsp;&nbsp;&nbsp;`viewportWidth` - viewport's width in pixels on calculation moment  
&nbsp;&nbsp;&nbsp;&nbsp;`viewportHeight` - viewport's height in pixels on calculation moment  
&nbsp;&nbsp;&nbsp;&nbsp;`element` - reference to element relations was calculated for  
&nbsp;&nbsp;&nbsp;&nbsp;`elementWidth` - element's width in pixels on calculation moment  
&nbsp;&nbsp;&nbsp;&nbsp;`elementHeight` - element's height in pixels on calculation moment  
&nbsp;&nbsp;&nbsp;&nbsp;`top` - distance in pixels from top border of element to top border of viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`bottom` - distance in pixels from bottom border of element to bottom border of viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`left` - distance in pixels from left border of element to left border of viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`right` - distance in pixels from right border of element to right border of viewport

```javascript
$('').viewport().inViewport([ threshold = 0 [, viewport = undefined ]]);
```
_**threshold**_ must be an integer, meaning as for CSS selectors;  
_**viewport**_ can be both `HTMLElement` or `jQuery object`, meaning as for CSS selectors;

```javascript
$('').viewport().getState([ threshold = 0 [, allowPartly = false [, viewport = undefined ]]]);
```
_**threshold**_ must be an integer, meaning as for CSS selectors;  
_**allowPartly**_ must be a boolean, allow 'partly' states. Extra calculations will be made if `true`   
_**viewport**_ can be both `HTMLElement` or `jQuery object`, meaning as for CSS selectors;

**Return:**  
`object`:  
&nbsp;&nbsp;&nbsp;&nbsp;`inViewport` - boolean, is element fully fits viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`vertical` - string, element's state along vertical axis relatively to viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`horizontal` - string, element's state along horizontal axis relatively to viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`viewport` - reference to viewport element relations was calculated    
&nbsp;&nbsp;&nbsp;&nbsp;`viewportWidth` - viewport's width in pixels on calculation moment  
&nbsp;&nbsp;&nbsp;&nbsp;`viewportHeight` - viewport's height in pixels on calculation moment  
&nbsp;&nbsp;&nbsp;&nbsp;`element` - reference to element relations was calculated for  
&nbsp;&nbsp;&nbsp;&nbsp;`elementWidth` - element's width in pixels on calculation moment  
&nbsp;&nbsp;&nbsp;&nbsp;`elementHeight` - element's height in pixels on calculation moment  
&nbsp;&nbsp;&nbsp;&nbsp;`top` - distance in pixels from top border of element to top border of viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`bottom` - distance in pixels from bottom border of element to bottom border of viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`left` - distance in pixels from left border of element to left border of viewport  
&nbsp;&nbsp;&nbsp;&nbsp;`right` - distance in pixels from right border of element to right border of viewport

_vertical_ field can be: `inside`, `exceeds`, `top`, `partly-top`, `below`, `partly-below`
_horizontal_ field can be: `inside`, `exceeds`, `left`, `partly-left`, `right`, `partly-right`