Want to start animation while scrolling the image only once. How can I do that? "Is amp-position-observer" must need for animate on the scroll?
<div class="section4">
<amp-position-observer on="enter:slideTransition2.start" intersection-ratios="0.1" layout="nodisplay"></amp-position-observer>
<amp-img layout="responsive" alt="A view of the sea" class="eboardimg" src="/images/simbli-screens.png" width="969" height="376"></amp-img>
<amp-animation id="slideTransition2" layout="nodisplay">
<script type="application/json">{
"duration": "500ms",
"fill": "both",
"iterations": "1",
"animations": [{
"selector": ".eboardimg",
"keyframes": [
{ "transform": "translateY(20%)" },
{ "transform": "translateY(0)" }
]
}]
}
</script>
</amp-animation>
<a href="#" class="ampstart-btn LMbtn LMbtn4 travel-input-big rounded center bold white block col-12" >
LEARN MORE ABOUT THE CORE FOUR
</a>
</div>
</div>
You need to leave the first keyframe out of the animation - If you only have one keyframe, it will animate from whatever the current value is to the value of the only keyframe.
You can read more about amp animations at https://www.ampproject.org/docs/reference/components/amp-animation
So you'll want to do something like this:
In the style area:
.eboardimg{
transform:translateY(20%);
}
On the main page:
<div class="section4">
<amp-position-observer on="enter:slideTransition2.start" intersection-ratios="0.1" layout="nodisplay"></amp-position-observer>
<amp-img layout="responsive" alt="A view of the sea" class="eboardimg" src="/images/simbli-screens.png" width="969" height="376"></amp-img>
<amp-animation id="slideTransition2" layout="nodisplay">
<script type="application/json">{
"duration": "500ms",
"fill": "both",
"iterations": "1",
"animations": [{
"selector": ".eboardimg",
"keyframes": [
{ "transform": "translateY(0%)" }
]
}]
}
</script>
</amp-animation>
<a href="#" class="ampstart-btn LMbtn LMbtn4 travel-input-big rounded center bold white block col-12" >
LEARN MORE ABOUT THE CORE FOUR
</a>
</div>
</div>
Here's a working example: https://codepen.io/maxpelic/pen/mozRLQ
Related
What is the solution to have a pre selected value in the sample below? Let's say that the third option should be selected by default when data is retrieved from JSON and the select box is shown (without user interaction).
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<select>
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
<option value="{{url}}">{{title}}</option>
</template>
</amp-list>
</select>
The simplest way is adding the selected attribute in the option tags to make it the default.
<option selected value="{{url}}">{{title}}</option>
If you want to explore other options, this SO post mentioned binding. amp-bind adds custom interactivity with data binding and expressions.
There is a solution with "mustache inverted sections", but it does not work in my case due to other factors involved.
I got it thanks to [Cathy Zhu][1], on [AMP Issues support page][2].
I will provide it, in case it would be helpful for someone:
<amp-selector>
<amp-list width="auto" height="200"
layout="fixed-height"
src="//amp-list-selector.glitch.me/api/amp-list-data.json">
<template type="amp-mustache">
{{#selected}}
// content displayed if selected is true
<div class="story-entry" selected>
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
{{^selected}}
// content displayed if selected is false
<div class="story-entry">
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
</template>
</amp-list>
for the sample data:
{
"items": [
{
"title": "Cat",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": true
},
{
"title": "Dog",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
},
{
"title": "Mouse",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": false
},
{
"title": "Fish",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
}
]
}
I am trying to make a Slick slider jump back to the first slide after the last slide. The closest answer to this topic I have found is this:
Slick slider goto first slide
But unfortunately it uses the fade animation so it does not have the effect I'm after. What I want is that the slideshow will play until the end and then scroll back to the beginning after the last slide is shown.
There are only three slides in my use case, and I can easily fire a message in the console when the last one is reached, but the slickslider method slickGoTo doesn't work.
(function($) {
var slider = $('.sightbox__slideshow');
slider.slick({
arrows: false,
autoplay: true,
infinite: true,
});
function jumpBack() {
slider.slick('slickGoTo', 0);
}
slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
console.log(currentSlide);
if (currentSlide === 2 ) {
console.log('last slide');
jumpBack();
}
});
})(jQuery);
.sightbox__slideshow {
width: 250px;
padding: 50px;
}
.sightbox__slide--1 {
background-color: pink;
}
.sightbox__slide--2 {
background-color: green;
}
.sightbox__slide--3 {
background-color: yellow;
}
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<div class="sightbox__slideshow">
<div class="sightbox__slide sightbox__slide--1" id="sightbox__slide--1">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">1. first</p>
</div>
<div class="sightbox__slide sightbox__slide--2" id="sightbox__slide--2">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">2. second</p>
</div>
<div class="sightbox__slide sightbox__slide--3" id="sightbox__slide--3">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">3. third</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
You may change the trigger event to afterChange and resort to setTimeout function to stay on the last slide for a while (3 seconds approx).
The slick-slider preventing a custom action on its events can also be overridden using the setTimeout function.
function jumpBack() {
setTimeout(function() {
slider.slick("slickGoTo", 0);
},3000);
}
CODEPEN
Hope this helps.
How do I use parameters in DustJS? I made a jsfiddle where I want to print key value pairs where the key = [parameter].
In the fiddle I just want to display Larry, Moe and Curly's weight (not their height).
In XSLT this is easy. Just use Xpath to find prop[#name="weight"] then the following-sibling axis.
Fiddle: http://jsfiddle.net/6YrCg/
<script id="entry-template">
{title}
<ul>
{#names}
<li>{name}</li>{~n}
<ul><li>Weight:{#props.name}{value}{/props.name}</li></ul>
{/names}
</ul>
</script>
<div id="output"></div>
$(document).ready(function () {
var data = {
"title": "Famous People",
"names" : [{ "name": "Larry", "props":[{"name":"height","value":"5.8"},{"name":"weight","value":"160"}] },{ "name": "Curly", "props":[{"name":"height","value":"5.9"},{"name":"weight","value":"200"}]},{ "name": "Moe", "props":[{"name":"height","value":"5.8"},{"name":"weight","value":"160"}]}]
}
var source = $("#entry-template").html();
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);
dust.render("intro", data, function(err, out) {
$("#output").html(out);
});
});
Here is one solution, using the {#eq} helper to only output the value if the name key is equal to "weight".
{title}
<ul>
{#names}
<li>
{name}
<ul><li>Weight: {#props}{#eq key=name value="weight"}{value}{/eq}{/props}</li></ul>
</li>
{/names}
</ul>
Context helpers such as {#eq} are functions that augment the core syntax of Dust. For more information about this helper and other officially-supported helpers, check out the dustjs-helpers wiki page.
I have added columns in the kendo ui grid dynamically.
I have a column named 'Formatted' with the data displayed in the below format.
<div class="class1"> <div>This is <strong>bold </strong>text.</div> <div> </div> <div>This is <em>italics</em> text.</div> <div> </div> <div>This is a hyperlink.</div> <div> </div> <div>Bulleted list:</div> <ul> <li>Bullet #1</li> <li>Bullet #2</li> <li>Bullet #3</li></ul></div>
I want the 'Formatted' column to display the data as below.
This is bold text.
This is italics text.
This is a hyperlink.
Bulleted list:
Bullet #1
Bullet #2
Bullet #3
How can I do this.
Please anyone can help me on this.
You should define a column template.
Example:
<script id="ob-template" type="text/x-kendo-template">
<div class="class1">
<div>This is <strong>bold </strong>text.</div>
<div> </div>
<div>This is <em>italics</em> text.</div>
<div> </div>
<div>This is a hyperlink.</div>
<div> </div>
<div>Bulleted list:</div>
<ul>
<li>Bullet #1</li>
<li>Bullet #2</li>
<li>Bullet #3</li>
</ul>
</div>
</script>
and then, when you define the columns use it:
$("#grid").kendoGrid({
dataSource: ...,
columns: [
{ field: "...", title: "...", template: $("#ob-template").html()}
]
});
You can use template property: template: "#=rawHtmlDataVariable#" like this
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "#=rawHtmlDataVariable#"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template
I trying to get an image (cookie policy) that, once clicked, displays a dialog box informing that cookies are used on this website. I was hoping to use a jQuery dialogue box but it seem difficult.
Demo link: http://myfirststepsto.weebly.com/
The jQuery I would like to use: http://jqueryui.com/dialog/#default
<div id="oneout">
<span class="onetitle">
</span>
<div id="oneout_inner">
<centre>
<img src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" />
</a>
<br></center></div></div>
I made a fiddle for you hope it helps! jsFiddle here
HTML:
<div id="oneout">
<span class="onetitle"></span>
<div id="oneout_inner">
<center>
<a><img id="opener" src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" /></a>
<br>
</center>
</div>
</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Javascript:
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});