Some AMP Shortcodes to Make It Easier to Create Multiple Elements

Contents

It turns out that in AMP there are some standard action codes or shortcodes to make it easier to give certain commands to an element such as redirect, print, show, hide, toggle, scroll to, and focus on input.

With these commands, we do not need the AMP plugin to carry out its functions.

The commands include the following.

AMP.navigateTo()

<button on="tap:AMP.navigateTo(url='http://google.com')">google.com</button>



AMP.print()

<button on="tap:AMP.print">Print</button>



Show, Hide, Toggle Visibility

<button on="tap:normal-element.show">Show</button>
<button on="tap:normal-element.hide">Hide</button>
<button on="tap:normal-element.toggleVisibility">Toggle Visibility</button>

<div id="normal-element" hidden>
  I was initially hidden.
</div>




Scroll To

<button on="tap:normal-element2.scrollTo">ScrollTo</button>
  <button on="tap:normal-element2.scrollTo('position' = 'bottom')">ScrollTo Bottom</button>
  <button on="tap:normal-element2.scrollTo('position' = 'center')">ScrollTo Center</button>
  <button on="tap:normal-element2.scrollTo('duration' = 5000)">ScrollTo Slowly</button>

<div id="normal-element2">
  You have to scroll to see me.
</div>






Focus

<button on="tap:input-element.focus">Focus</button>



Combining Commands

<button on="tap:normal-element2.scrollTo('position' = 'center'), input-element.focus">ScrollTo and Focus</button>


Back to Content ↑


Please use as needed.