SHOW:
|
|
- or go back to the newest paste.
| 1 | ---unit tag--- | |
| 2 | ||
| 3 | <amp-state id="tsvisibilityState"> | |
| 4 | <script type="application/json"> | |
| 5 | {
| |
| 6 | "clhideTs": false | |
| 7 | } | |
| 8 | </script> | |
| 9 | </amp-state> | |
| 10 | <div style="height:100px"> | |
| 11 | - | <amp-list id="clickio-ts-list" layout="fill" data-block-on-consent src="https://cns.clickiocdn.com/amp_360?source_url=SOURCE_URL&canon=CANONICAL_URL&counter=COUNTER&document_referrer=DOCUMENT_REFERRER&viewer=VIEWER&scr_w=AVAILABLE_SCREEN_WIDTH&scr_h=AVAILABLE_SCREEN_HEIGHT&sid=232899&said=722995&btype=hsticky |
| 11 | + | <amp-list id="clickio-ts-list" layout="fill" data-block-on-consent src="https://cns.clickiocdn.com/amp_360?source_url=SOURCE_URL&canon=CANONICAL_URL&counter=COUNTER&document_referrer=DOCUMENT_REFERRER&viewer=VIEWER&scr_w=AVAILABLE_SCREEN_WIDTH&scr_h=AVAILABLE_SCREEN_HEIGHT&sid=232893&said=722989&btype=hsticky |
| 12 | "> | |
| 13 | <template type="amp-mustache"> | |
| 14 | <div id="cl-top-sticky" class="cl-ts-visible" [class]="tsvisibilityState.clhideTs ? 'cl-ts-hidden' : 'cl-ts-visible' " > | |
| 15 | <amp-iframe data-block-on-consent resizable | |
| 16 | id="clickio-ts-creative" | |
| 17 | height="100" | |
| 18 | layout="fixed-height" | |
| 19 | frameborder="0" | |
| 20 | sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation" | |
| 21 | src="{{_frame_src}}"
| |
| 22 | on="message:AMP.setState({tsvisibilityState: {clhideTs: true}})">
| |
| 23 | <div placeholder></div> | |
| 24 | <div overflow></div> | |
| 25 | </amp-iframe> | |
| 26 | <button class="cl-ts-close-button" on="tap:AMP.setState({tsvisibilityState: {clhideTs: true}})" style=""></button>
| |
| 27 | </div> | |
| 28 | </template> | |
| 29 | </amp-list> | |
| 30 | </div> | |
| 31 | ||
| 32 | ||
| 33 | ---CSS Rules--- | |
| 34 | ||
| 35 | #cl-top-sticky {
| |
| 36 | position: fixed; | |
| 37 | top: 0; | |
| 38 | left: 0; | |
| 39 | width: 100%; | |
| 40 | height: 100px; | |
| 41 | z-index: 2147483646; | |
| 42 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| 43 | background-color: #fff; | |
| 44 | } | |
| 45 | .cl-ts-hidden {
| |
| 46 | display: none; | |
| 47 | } | |
| 48 | .cl-ts-visible {
| |
| 49 | display: block; | |
| 50 | } | |
| 51 | .cl-ts-close-button {
| |
| 52 | position: absolute; | |
| 53 | bottom: -28px; | |
| 54 | width: 28px; | |
| 55 | height: 28px; | |
| 56 | right: 0; | |
| 57 | background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="341 8 13 13"><path fill="%234F4F4F" fill-rule="evenodd" d="M354 9.31 352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z"/></svg>')
| |
| 58 | 9px 9px no-repeat #fff; | |
| 59 | box-shadow: -1px 2px 1px 0 rgba(0, 0, 0, 0.2); | |
| 60 | border: none; | |
| 61 | border-radius: 0 0 0 12px; | |
| 62 | } | |
| 63 | #clickio-ts-list:has(#clickio-ts-creative[height="100"][width="0"]) {
| |
| 64 | display: none; | |
| 65 | } | |
| 66 |
