tap:AMP.setState not working at times but it works when i reload the page.
<div class="padTop20">
<a [class]="model.nextStep.expand ? 'hide' : 'show'" role="button" class="show" on="tap:AMP.setState({model:{nextStep:{expand: true}}})" id="showmore">Show more</a>
<a [class]="model.nextStep.expand ? 'show' : 'hide'" role="button" class="hide" on="tap:AMP.setState({model:{nextStep:{expand: false}}})" id="showless">Show less</a>
</div>
Here's my default state:
<amp-state id="model">
<script type="application/json">
{
"nextStep":{
"expand":false
}
}
</script>
</amp-state>
Is it something because of network that makes it behave like this?? Appreciate for any help! thanks!
You should try;
[class]="(model.nextStep.expand == 'true') ? 'hide' : 'show'"
and
[class]="(model.nextStep.expand == 'false') ? 'show' : 'hide'"
On page load, as soon as the DOM is loaded, your initial state (false) is fired and [class] is rendered because of amp-bind.
You didn't post much in terms of any console errors or validation errors you might be facing with AMP (which will affect the functionality if you did something weird/wrong)
Related
I'm trying to do the same as this question
My real question is why did he have to add .property() at the end of the function in the errorClass attribute? And can someone please point me to a documentation on how this work?
when I don't include the .property(), a stringed function of the attribute is placed as value in my template.
Handlebar:
<div class="tab-pane fade show {{loginActiveClass}}" id="login" role="tabpanel">
Expectation:
<a data-toggle="tab" href="#login" role="tab" class="nav-link active">
What happens when I discard the .property():
<a data-toggle="tab" href="#login" role="tab" class="nav-link function loginActiveClass() {
return this.get('page') === 'login' ? 'active' : '';
}">
With {{att}} in your hbs you access the value of the component's or controller's attribute/property named att.
By your description, your attribute loginActiveClass has a value of type function. This is what you get in your handlebars. Since the position where you use it only admits string values, you get the toString() representation of your value, which for a function is the function's code as string.
You cannot trigger actual evaluation of the function code by simply accessing it with {{att}} in your .hbs.
Adding .property() at the end gives you a computed property that does indeed evaluate the function and returns the evaluation result to the "caller". (Note that the preferred syntax for computed properties in Ember has changed a while ago to something more explicit. I recommend using eslint and eslint-plugin-ember to let your IDE or ember's cli inform you about best practices when appropriate.)
Also, in your specific example, the "logic" of the function is easily integrated into the hbs:
<div class="tab-pane fade show {{if (eq page 'login') 'active'}}" id="login" role="tabpanel">
On this page there is a slider updating a input box with example HTML code. You can also see that same code in the source.
I would like to use this in my application so I transplanted it into my code and converted it to Jade (aka Pug). The source now looks like:
div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")
And the resulting html looks like this (after prettifying it):
<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>
Which is very close that shown on in the docs. However on the resulting page the input box is not updated. If I change the input box to a span like in the
'With Label' example it updates.
span(id="days-off-count" value="28")
becomes
<span id="days-off-count" value="28"></span>
I have the foundation.js and the .slider.js included at the bottom of the page.
In addition, if I manually change the value of the input box via the keyboard the slider will jump to that position, so there is some sort of link there.
The software being used:
Ubuntu 14_04
Chrome
Node v0.10.25
Express 4.14.0
Jade 1.11.0
Foundation v5.5.0
Other things to note:
The page has more than one slider so any javascript solutions need to take this into account.
I think this is a bug (hasOwnProperty instead of hasAttribute #6221) in the version of Foundation (5.5.0) you're using. It seems that while it initially applied only to Firefox, it now applies to Chrome too.
Example with (broken) sliders from 5.5.0: jsfiddle.net/tymothytym/jth99pkw/3
Example with (working) sliders from 5.5.3: jsfiddle.net/tymothytym/tw1we8fk/3
The bug was fixed here: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45
Basically, go to foundation.slider.js and change this (line 157):
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty('value')) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}
to this:
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasAttribute('value')) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}
This is not my fix, it's the same as the patch, but it should mean that when you do upgrade you don't need to modify your application code to account for a workaround.
1) Maybe I be wrong... but you didn't specify the version, you give an example from Foundation v5... are you not have installed Foundation v6?
Try this example : https://foundation.zurb.com/sites/docs/slider.html
2) After you include your js files, you need to have this:
<script>
$(document).foundation();
</script>
Edit: Sorry, first time I didn't read all, maybe the problem is that the Foundation use the "value" attribute, which is an attribute designed for <input> tags:
value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Specifies the value of the element
Source: https://www.w3schools.com/tags/ref_attributes.asp
I created one button manually like below in foundation joy ride, in-order to disable the foundation joy ride completely.
neverShowJoyRide: function(){
$(document).foundation('joyride', 'hide'); //hide the joy ride on trigger
},
render: function () {
var self = this;
return (
<ol className="joyride-list" data-joyride>
<li data-id="startJoyRide" data-text="Next" data-options="prev_button: false; tip_location: left">
<p>Welcome to XXXX - Would you like to take a guided tour of the site ?</p>
<button className="small button" onClick={this.neverShowJoyRide}>Never show this Again</button>
</li>
</ol>
);
}
I am using this code in react. When i render this code in my react component, it is not showing any error. But when i click on the button "never show this again" then i am getting an error message like:
invariant.js:42 Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0.0.5.0.2.0.0.1
Does any one have any idea about this? please help me. Thanks in advance.
I am using jquery cycle 2 to get a continuous slideshow effect...http://jquery.malsup.com/cycle2/demo/continuous.php
Here is code:
<div class="cycle-slideshow cycle-autoinit"
data-cycle-fx="scrollHorz"
data-cycle-slides="> div"
data-cycle-speed="3000"
data-cycle-pause-on-hover="true"
data-cycle-timeout="1"
data-cycle-easing="linear"
data-cycle-carousel-visible=5>
<div>
<a href="#slide.Link" target="_blank">
<img src="#Url.Content("~/content/cms/slideshow/")#slide.ImageName" alt="" /></a>
</div>
<div>
<a href="#slide.Link" target="_blank">
<img src="#Url.Content("~/content/cms/slideshow/")#slide.ImageName" alt="" /></a>
</div>
</div>
This works. However only one image slides across the screen and then the next appears. What i want is all images slides across next to each other so like 5 are appearing and going round on a rotation?
Hi I think you have to set your data-cycle-fx=carousel.
Try this:
<div class="cycle-slideshow cycle-autoinit"
data-cycle-fx="carousel"
data-cycle-slides="> div"
data-cycle-speed="3000"
data-cycle-pause-on-hover="true"
data-cycle-timeout="1"
data-cycle-easing="linear"
data-cycle-carousel-visible=5>
...
I can't test it now but I hope it works.
Cycle2's carousel transition plugin must be included in order to use the carousel effect.
Here is an example of what you want if it helps: http://jsfiddle.net/CersX/2/
I basically added data-cycle-carousel-fluid=true data-cycle-easing="linear" to there example.
Just swap out the images for yours.
I based my code from http://codepen.io/colir/pen/bhcAx
Here's the answer -
carousel-slide-dimension on Jquery Cycle2 -fixed width/height
'carouselSlideDimension' as your argument or:
data-cycle-carousel-slide-dimension=ANUMBER
$this.cycle({
"allowWrap" : false,
"carouselSlideDimension" : "151px",
"carouselVisible" : 3,
"fx" : "carousel",
"log" : false,
"timeout" : 0,
"next" : "#" + id + " .next",
"prev" : "#" + id + " .prev",
"slideActiveClass" : "active",
"slides" : "> .slide",
});
We're building app that allows users to post messages to various social media outlets. Our designer has created a series of interactions which allow users to change various settings in their application by use of sliding panels. I've done a quick screen cap to illustrate:
http://screencast.com/t/tDlyMud7Yb7e
The question I have is one of architecture. I'm not sure whether I should be using a View or a Controller (or both) to store some of the methods these panels will contain. Here's the HTML for the panels. They're not currently in a script tag or view:
<div id="panel-account-settings" class="panel closed">
<div class="panel-inner">
<i class="icon-cancel"></i>close
<h3>Account Settings</h3>
Google Analytics
Link Shortening
Disconnect Account
</div>
<div id="panel-google-analytics" class="panel-inner">
<i class="icon-arrow-right"></i>back
<h3>Google Analytics</h3>
<div class="toggle">
<label>Off</label>
</div>
<p>We <strong>won't</strong> append stuff to your links, so they <strong>won't</strong> be trackable in your Google Analytics account.</p>
<img src="{{ STATIC_URL }}images/ga-addressbar.png" />
</div>
<div id="panel-disconnect" class="panel-inner">
<i class="icon-arrow-right"></i>back
<h3>Disconnect This Account</h3>
<p>If you disconnect this account you will lose all the metrics we tracked for each message. Are you absolute sure you want to get rid of them?</p>
<div class="button-group">
Disconnect
</div>
</div>
</div>
The gear icon shown in the video is contained with the accounts template
<script type="text/x-handlebars" data-template-name="accounts">
{{#each account in controller}}
<div class="avatar-name">
<p>{{account.name}}</p>
<p>#{{account.username}}</p>
<i class="icon-cog" {{action "openPanel" Social.SettingsView account }}></i>
</div>
{{/each}}
</script>
which has a bare bones controller
Social.AccountsController = Ember.ArrayController.extend({
openPanel: function(view,account){
console.log(view,account);
$(this).parents(".item-account").addClass("active");
$("#panel-account-settings").prepareTransition().removeClass("closed");
}
});
as well as a Route and a Model. Given the interaction I'm looking to accomplish, my question is where should I be putting the pieces and parts? At a minimum I need to pass in the current Account model so that I know which account I'll be applying changes to. I thought about creating a mainPanel view which would contain the other view...something like this:
<script type="text/x-handlebars" data-template-name="panelView">
<div id="panel-account-settings" class="panel closed">
{{ partial "panelSettingsView" }}
{{ partial "panelAnalyticsView" }}
{{ partial "panelDisconnectView" }}
</div>
</script>
and then the action helper on the gear icon could pass in the account AND the required view. But I'm not sure if that's the right approach. I'd appreciate some input or suggestions. Thanks.
UPDATE 1
Ideally I'd like to eventually load in the content of each panel via AJAX but that's a want to, not a need to.
UPDATE 2
I tried creating a PanelView which would contain the logic on which panels to load:
Social.PanelView = Ember.View.extend({
tagName: 'div',
classNames: ['panel-inner'],
openPanel: function(view,account){
console.log(view,account);
}
});
But when I tried to call it from the gear icon I got an error. This:
<i class="icon-cog" {{action openPanel target="Social.PanelView" }}></i>
Threw this error:
Uncaught Error: assertion failed: The action 'openPanel' did not exist on Social.PanelView
Isn't that the correct syntax?
UPDATE 3
Adding version information:
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1
The best practice is to always put any DOM- or UI-related logic into your view, and leave data representation to the controller (i.e., a reference to a 'selected' item in the controller is a common example).
Your Social.AccountsController.openPanel method has logic that touches the DOM, which is entirely a view concern. A good start would be to move that logic into the view (Social. SettingsView ?).
It'd be a bit easier to understand your goals and offer more suggestions if you had a jsfiddle of what you have so far.
EDIT: Another good practice is to decompose things into very small objects. So you could explore having a selectedAccount ObjectController whose content is the currently chosen Account (and a corresponding View for it).