# jquery.hookto

> Move an HTML element on breakpoint screen size with dynamic back-in-place.

Latest version **1.0.0** (published 2019-07-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install jquery.hookto
pnpm add jquery.hookto
yarn add jquery.hookto
bun add jquery.hookto
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-07-26 |
| First published | 2019-07-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sade |
| Maintainers | sade_ |
| Keywords | jQuery, hook, breakpoints, responsive, move |

## Links

- npm: https://www.npmjs.com/package/jquery.hookto
- Repository: https://github.com/Sade/jquery.hookTo
- Homepage: https://sade.github.io/jquery.hookTo/
- Issues: https://github.com/Sade/jquery.hookTo/issues
- npm.io page: https://npm.io/package/jquery.hookto

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-07-26

## README

# jQuery.HookTo

Hook To - jQuery plugin

Move an HTML element on breakpoint screen size with dynamic back-in-place.

## Install
First, you have to add jquery before with plugin on your page.
``<script src="jquery.min.js"></script>``

After, you can call the plugin. Download this repository and call the js file.
``<script src="jquery.hookto.js"></script>``


## How to
To move and element on breakpoint screen size :
* Add ``data-hook-to=""`` attribute to your element.
* Create HTML element called 'hook'. This hook is the destination element on breakpoint screen size.

Example :
```HTMl
<div class="my-element-to-move-on-breakpoint-screen-size" data-hook-to="#where-my-element-will-be-hooked"></div>
<div class="toto">
    <meta id="where-my-element-will-be-hooked"/>
</div>
```
In this case, my HTML element ``class="my-element-to-move-on-breakpoint-screen-size"`` will be insert just after the HTML element ``<meta id="where-my-element-will-be-hooked">``.

See result when screen size pass through the breakpoint.
```HTMl
<div class="toto">
    <meta id="where-my-element-will-be-hooked"/>
    <div class="my-element-to-move-on-breakpoint-screen-size" data-hook-to="#where-my-element-will-be-hooked"></div>
</div>
```
My element had been moved ! It will return at his original place when the screen size pass through the breakpoint again.



### Settings

#### HTML attributes method

```HTMl
<div 
  data-hook-to-mobile-first="true"
  data-hook-to="#hook-destination" 
  data-hook-to-position="after" 
  data-hook-to-return="768"
  data-hook-to-origin-prefix="hookto-orig"></div>
```

#### jQuery method
You can overwrite default values with javascript :
```javascript
$('.my-element').hookTo(destinationHook, options);
```

```js
var options = {
  'hookOriginPrefix': 'hookto-orig',
  'position': 'after',
  'returnAt': '768',
  'mobileFirst': true
}
```

#### Callback methods
In jQuery, you can add some actions using this callbacks methods.
```js
$('.my-element').hookTo(destinationHook, {
   'onInit': function () {},
   'onHook': function () {},
   'onUnhook': function () {}
});
```

### All attributes
 
 Propriety | Type | Default | Description
 --------- | ---- | ------- | -----------  
 data-hook-to-mobile-first | Boolean | true | The element will be move if screen size is > of the breakpoint. ( false, < of the breakpoint )
 data-hook-to | HTML element | - | An HTML element. Put ``#`` if is an ID, ``.`` if is a class.
 data-hook-to-position | String | after | Put the element just after. ( you can use "before", or "inside" instead)
 data-hook-to-return | Number | 768 | Breakpoint. Move the element only after with window size
 data-hook-to-origin-prefix | String | hookto-orig | Breakpoint. Move the element only after with window size.

---
_Source: https://npm.io/package/jquery.hookto · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._