diff options
| author |   Fulup Ar Foll <fulup@iot.bzh> | 2016-01-28 16:30:12 +0100 |
|---|---|---|
| committer | Fulup Ar Foll <fulup@iot.bzh> | 2016-01-28 16:30:12 +0100 |
| commit | be83a8f382cf2fea98161bfd6d51719aacbf9aa9 (patch) | |
| tree | 3fb02337f8d7d308ef7ca7818ecc3d3a6ee05d88 /afm-client/bower_components/tether/examples/content-visible | |
| parent | 1a4ed39bf86b2115eb0f1387d1e988462b492776 (diff) | |
Update JSON API
Diffstat (limited to 'afm-client/bower_components/tether/examples/content-visible')
| -rw-r--r-- | afm-client/bower_components/tether/examples/content-visible/index.html | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/afm-client/bower_components/tether/examples/content-visible/index.html b/afm-client/bower_components/tether/examples/content-visible/index.html new file mode 100644 index 0000000..94e2176 --- /dev/null +++ b/afm-client/bower_components/tether/examples/content-visible/index.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="stylesheet" href="../resources/css/base.css" /> + </head> + <body> + + <div class="instructions">Scroll the page</div> + + <style> + .instructions { + width: 100%; + text-align: center; + font-size: 24px; + padding: 15px; + background-color: rgba(210, 180, 140, 0.4); + } + + * { + box-sizing: border-box; + } + body { + min-height: 1200vh; + height: 100%; + } + + .content-box { + width: 600px; + border: 10px solid #999; + height: 600vh; + background-color: #439CCC; + margin: 200vh auto; + } + .element { + border: 10px solid #999; + background-color: #FFDC00; + width: 300px; + height: 200px; + padding: 0 15px; + font-size: 20px; + font-weight: bold; + } + </style> + + <div class="content-box"> + <div class="element"> + <p>This is some sort of crazy dialog.</p> + + <p>It's setup to align with the center of the visible part of the blue area.</p> + </div> + </div> + + <script src="../../tether.js"></script> + <script> + new Tether({ + element: '.element', + target: '.content-box', + attachment: 'middle center', + targetAttachment: 'middle center', + targetModifier: 'visible' + }); + </script> + </body> +</html> |