scroll to bottom

In this example, a Single HTML source is used for various injections.

- Place "Rilke" in frame 1 after 2 seconds `<a href="demo/inject-sources.html#pos-1" class="pat-inject">`
- Place "Wilde" in frame 2 `<a href="demo/inject-sources.html#pos-2" class="pat-inject">`
- Place "Cocteau" in frame 3 `<a href="demo/inject-sources.html#pos-3" class="pat-inject">`
- Place "Cocteau" in frame 1, "Rilke" in frame 2 and "Wilde" in frame 3 `<a href="demo/inject-sources.html" data-pat-inject="#pos-3 #pos-1 &&#pos-1 #pos-2 &&#pos-2 #pos-3" class="pat-inject">`
- Place "Cocteau" in all frames `<a href="demo/inject-sources.html#pos-3" data-pat-inject="source: #pos-3; target: .item article" class="pat-inject">Place "Cocteau" in all frames</a>`
- Autoloads "Wilde" in frame 3 after 2 seconds Load `<a href="demo/inject-sources.html#pos-2" data-pat-inject="source: #pos-2; target: #pos-3; trigger: autload; delay: 2000" class="pat-inject">Autoloads "Wilde" in frame 3 after a 2 second delay</a>` Click quickly to prevent Wilde and load Rilke instead
- Autoloads "Wilde" in frame 1 after you are idle for 2 seconds Load `<a href="demo/inject-sources.html#pos-2" data-pat-inject="source: #pos-2; target: #pos-4; trigger: autload; delay: 2000" class="pat-inject">Autoloads "Wilde" in frame 4 after a 2 second delay</a>`
- Place "Wilde" in frame 2 on push (push_marker: content-updated) `<a href="demo/inject-sources.html#pos-2" class="pat-inject" data-pat-inject="push-marker: content-updated">`
- Trigger an inject that fails. (Puts an error message in a data attribute on the body tag) `<a href="page-that-doesnt-exist" class="pat-inject">`
- Place "Wilde in column 2 when
  I am visible now

?

?

?

## Inject and scroll demos

- 1) Re-inject this entire page and scroll to the history example `<a href="index.html" class="pat-inject" data-pat-inject="scroll:#demo-history">`
- 2) Re-inject this entire page and scroll to the top `<a href="index.html" class="pat-inject" data-pat-inject="scroll:top">`
- 3) Load text into body and scoll to #scroll-target `<a href="demo/inject-text.html" class="pat-inject" data-pat-inject="scroll:#scroll-target">`
- 4) Scroll to the target defined in the URL part as anchor-reference `<a href="demo/inject-text.html#pos-4" class="pat-inject" data-pat-inject="scroll:target">`
- 5) "scroll:none" Do not scroll (default behavior) `<a href="demo/inject-text.html" class="pat-inject" data-pat-inject="scroll:none">`
- 6) Inject 'Cocteau' in the frame below and scroll to the first paragraph. `<a href="demo/inject-sources.html#pos-3" class="pat-inject" data-pat-inject="target:#pos-4; scroll: #dieu-nu-p-1">`
- 7) Inject all content from source in the frame below and scroll to the second article. `<a href="demo/inject-sources.html" class="pat-inject" data-pat-inject="target:#pos-4; scroll: #pos-2">`

?

?

- Place "Wilde in the frame above when this link appears in view.
- Place "Cocteau" in the second frame on this page and scroll towards it.

### Shows a fallback message on error

Show me some error!

### Inject and fix URLs of options

injection happens here! Call for help
Liked

### Can replace itself

Like

### Can replace itself when a button in a form

### Inject history example

Inject some text and record the history

here goes the injection

### Inject history example 2

Go to the second inject-history example on a dedicated page

### Inject autosubmit with form using GET and POST

here goes the injection

### Call something without injecting anything

You need to open your network inspector to actually validate that the request is sent. It works if you see a call to demo/backend-action.html in the list of requested items.

Trigger something, but don't inject results

### Inject nothing into the target, effectively destroying whatever is in there.

The source is nothing and the target is given, so when triggering the injection, the target is removed.

I will be killed once you click the link below

Do something, but don't replace any content, just kill the target.
scroll to top