amp-html | 易学教程

Select option element after event on amp

阅读更多关于 Select option element after event on amp

问题 I want to automatically select one of the options of the second & third dropdowns automatically once the user changes the first one. <body> <h1>Hello AMPHTML World!</h1> <label for="color">Color</label> <select name="color" id="color" on="change:size.focus"> <option disabled selected></option> <option value="blue">blue</option> <option value="red">red</option> <option value="green">green</option> </select> <label for="size">Size</label> <select name="size" id="size"> <option disabled selected

amp-story video not displaying full picture (width, height issues)

阅读更多关于 amp-story video not displaying full picture (width, height issues)

问题 the desired behavior AMP allows you to embed images, video and audio content. The full width of the content should be viewable by users a specific problem or error It is possible to upload a video in amp-story and not see the full width the shortest code necessary to reproduce it in the question itself <amp-story-page id="cover page" auto-advance-after="cover" > <amp-story-grid-layer template="fill"> <amp-video placeholder="img/icon.png" id="cover" controls autoplay width="720" height= "1280"

WordPress AMP Integration

阅读更多关于 WordPress AMP Integration

问题 I just installed the AMP from Automatic in my WordPress site. When I load the page I have to type /amp after the link in order to display the amp page/post. Questions are: how can I display the page automatically without having to type the /amp ? how can I show the other posts that I have on the site? Hope you can give me a starting point since I am a bit lost. Here my site : http://www.demosite.burnnotice.co.za/ Hope you can help. 回答1: You will have to type /amp and the end in order to view

amp-img not showing in carousel

阅读更多关于 amp-img not showing in carousel

问题 I used an AMP carousel to show a list of articles abstracts. For some reason only the abstracts which were visible at page load have pictures. ( If i rotate the screen more but not all pictures are loaded. ) What am i doing wrong? Feel free to ask for more info. Here's the layout: <amp-carousel class="articles-carousel" layout="fixed-height" height="200" type="carousel"> <article role="button" tabindex="1" class="article-abstract" on="tap:AMP.setState({selectedArticle:1072}),AMP.scrollTo('id'

Is it ok to self-host the AMP Project javascript?

阅读更多关于 Is it ok to self-host the AMP Project javascript?

问题 I want to host the javascript myself, to make sure I know the code being distributed to my users. Is it possible? Would there be consequences? (i'm assuming the javascript can be built from https://github.com/ampproject/amphtml) 回答1: Basically, AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts: AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The

IFrame contents do not show up in an hidden div container

阅读更多关于 IFrame contents do not show up in an hidden div container

问题 I have got some problems while displaying an Iframe content within hidden DIV-Container. As soon as the link gets clicked, the div container gets visible, that works so far, but the content within, which is an amp-iframe itself do not show up. Something is preventing the Iframe from loading the content. Here is some code extract: <a href="#" class="bsel" [text]="visible ? 'On' : 'Off'" on="tap:AMP.setState({visible: !visible})"> Click me </a> ...... <div id="showInfo" [class]="visible ? 'show

AMP Mustache and Math

阅读更多关于 AMP Mustache and Math

问题 I am getting some variables from a JSON file using amp-list and amp-template. One of the variables I've gathered is a number that I need to round up or down. The number would normally be displayed as {{number}}. However, I need to manipulate this number to make it a whole number. I am not sure how to do the conversion on that amp var. any help is appreciated. 回答1: If you're displaying data in an amp-list you can do the rounding inside the src attribute by using amp-state and map : <amp-state

Multiple Google Tracking Codes on AMP pages

阅读更多关于 Multiple Google Tracking Codes on AMP pages

问题 Is there a way to add different Google Analytics tracking accounts? I've been looking around but I only find examples and sites are using 1 single account: <script type="application/json"> { "requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}", "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }, "vars": { "account": "ABC123" }, "triggers": { "trackPageview": { "on": "visible", "request":

Display Raw HTML from json to AMP page

阅读更多关于 Display Raw HTML from json to AMP page

问题 Currently, I'm trying to implement AMP to an existing Product page and I'm a little bit stuck on displaying some data. The field which I'm trying to display comes from json and contains Raw HTML (something like the following): description: { '<h1>section title</h1><p>section description</p>' } On the AMP documentation I couldn't find any informations about displaying/converting the above string into default HTML tags. Could you tell me please if there is a way to achieve this with AMP? 回答1:

AMP with amp-state and amp-position-observe

阅读更多关于 AMP with amp-state and amp-position-observe

问题 I have a problem in AMP combining amp-state and amp-position-observe. <amp-state id="myState"> <script type="application/json"> { "visible": "n" } </script> </amp-state> <amp-state id="variableChange"> <script type="application/json"> { "visible": "y" } </script> </amp-state> <amp-position-observer on="enter:variableChange" layout="nodisplay"> </amp-position-observer> This code return a strange error: url.js:348 Trust for 'activate' (1) insufficient (min: 100). 回答1: amp-position-observer