How to apply dynamic style to AMP page?
Question
Currently we have in our web site we have one slider as following.
As we can see that position of pointer(arrow of asking price) is changed based on Fair Condition, Good Condition and Asking Price value. This value comes through api and then we bind it here using javascript. And we calculate position of pointer(arrow of asking price) using some function and then using left we will set position.
eg For first image value for style attribute of tag which is showing pointer is left: 85% and image value for style attribute of tag which is showing pointer is left: 40%
Now problem is when we are converting this page to AMP, we are not able to set position of pointer based on api response.
The one possible way is create 100 class of something like this
.left-21{left: 21%}
.left-51{left: 51%}
And according response from api we can add this class to div(which is showing pointer) using amp-bind. But it is not right way.
Is there any other way we can accomplish this in amp?
2 answers
solution1
2 2018-03-05 11:18:38
Use UI Components > Form Elements > Range Input
<input type="range" min="1" max="100" value="20" class="slider" id="myRange">
Change the value on input with AMP-BIND
.slider { max-width:273px; -webkit-appearance: none; width: 100%; height: 25px; background: url(https://s17.postimg.org/z9in37267/image.png) no-repeat 0px 10px; outline: none; -webkit-transition: .2s; transition: opacity .2s; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 21px; height: 31px; background: url(https://s17.postimg.org/8og47pke7/image.png) no-repeat; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: url(https://s17.postimg.org/8og47pke7/image.png) no-repeat; cursor: pointer; }
<input type="range" min="1" max="100" value="20" class="slider" id="myRange">
solution2
0 2018-03-05 07:51:22
You may follow this page on how to add several dynamic CSS class names onto the <body> element of AMP pages. The AMP Dynamic CSS Classes extension adds the amp-referrer-* and amp-viewer CSS classes onto the element. Check this AMP By Example 's amp-dynamic-css-classes example. Be noted that AMP's dynamic CSS classes provided by the amp-dynamic-css-class tag enable boolean logic for a handful of conditions
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.