When I add new list items to an existing dropdown button they do not show up on the front end. The dropdown just continues to show the original list items. All my caching systems are off and I cleared the cache locally, but I'm still getting the same issue. Anyone know what could be causing this?
<div class="sidebar-dropdown">
<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="large alert round button dropdown">Select Type</button>
<br>
<ul id="drop" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="false" tabindex="-1">
<li>All-Purpose (USA)</li>
<li>Mobile</li>
<li>E-Commerce</li>
<li>All-Purpose (CAN)</li>
<li>Tablet POS</li>
<li>High Risk</li>
</ul>
</div>
The Foundation-generated dropdown needs to be refreshed when new content is added to it. This can be done by adding this to your javascript, which adds a listener to the dropdown element(s):
$(document).foundation('dropdown', 'reflow');
See the docs for more info
Related
I want to add a btn in my navbar.html in django-templates, and every time client clicks it, he navigates to page previous to what he in on, and also "naviaget Forward" if clicked other button.
how can i do it?
You can use JS:
<button onclick="history.back()">Go Back</button>
<button onclick="history.forward()">Go Forward</button>
I am working in angular-9 , there are many things which works on reloading, but not after navigation. eg: there are two components A and B. and another component c have a reveal modal code(in foundation).
c component is to be included in both A and B.from component A through navigation I can move to component B which is a another page.
c.ts:
import { FormControl, Validators, FormBuilder,FormGroup, FormGroupDirective } from '#angular/forms';
loginFormControl:FormGroup;
ngOnInit() {
$('#loginModal').foundation();
this.loginFormControl = this.formBuilder.group({
phone_number: ''
});
}
c.html
<div class="reveal" id="loginModal" data-reveal>
<form class="loginForm" [formGroup]="loginFormControl"
(ngSubmit)="onSubmit()">
<input placeholder="Enter Mobile Number" formControlName="phone_number">
<button type="submit" class="button">LOGIN</button>
</form>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
If I open the modal 'c' in both of the pages A and B on a click of two buttons on both pages with $('#loginModal').foundation('open'); in A.ts and B.ts files, it results me with some unexpected behavior.
1. the modal is open in both the pages. no issue related to view
2. But events of that modal(click,change) or if I enter phone number, It doesn't accept it from user. Even there no event works in a page until i refresh or reload the page.
3. After refreshing a page it will work on that page (including all
events and inputs), there won't be any issue in that page after reloading. but as i navigate to another component B, then it's(c) events and input won't work until i refresh this page too. this same will happen again with component A.
I haven't reach at any solution of this till now and why is this happening. Please let me know if anyone have solution of my problem. It would be fruitful for me.
When my page loads the active accordion item slides open which causes the other elements on the page to also move for a second.
I'd like the active accordion item to render "already opened", but still retain the animation for when a user clicks on another accordion item, or even the originally opened item in cases where the user selects another item and then the original.
I cant find any css being used to do this, so maybe its something in the javascript? If so, how would I go about overriding this.
Any suggestions on how to accomplish this would be greatly appreciated!
Foundation Accordion: http://foundation.zurb.com/sites/docs/accordion.html
There's no simple solution from what I know, but you can override some attributes on load so that the active item is displayed by default. You'd have to begin with an accordion none of the items are active i.e. none of the accordion items have a class of .is-active:
Html:
<ul class="accordion" data-accordion data-allow-all-closed='true'>
<li class="accordion-item" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content>
Panel 1. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content>
Panel 2. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content>
Panel 3. Lorem ipsum dolor
</div>
</li>
</ul>
jQuery:
//Initialise the Foundation plugins
$(document).foundation();
function activateWithoutAnimation(itemIndex) {
//Get the accordion item according to its index (0 based)
var $accordionItem = $('.accordion-title:eq(' + itemIndex + ')');
//Set the aria attributes of the accordion item you want to appear
$accordionItem.attr('aria-expanded', 'true');
$accordionItem.attr('aria-selected', 'true');
//Set the attributes of the content.
$accordionItem.next().attr('aria-hidden', 'false');
$accordionItem.next().css('display', 'block');
//This is essential as it lets foundation know that the item is active (to re-allow toggling)
$accordionItem.trigger('click');
}
//Call the function.
activateWithoutAnimation(0);
There might be a better way to do the above, but from what I've read, there's no option that allows the animation to be disabled. I've tried overriding the defaults that Foundation provides to no avail.
Fiddle Demo
CSS Solution
If using the default helper class .is-active on initial load then some plain css can eliminate the slide open animation.
.is-active .accordion-content {
display: block;
}
https://jsfiddle.net/r6jvbohu/
CSS only (without losing the animation)
To always open the first item immediately while still keeping the animation, you can use the following code.
.accordion-item:first-of-type .accordion-content {
display: block;
}
The first item should still have the .is-active class to be consistent, but this removes the initial animation because we overwrite the display value from none to block. The JS still overwrites this state when another accordion item is clicked, resulting in the animation we want to keep.
Say I have a few links in my navigation:
...
{{#linkTo 'projects.trending' tagName="li"}}
<a href="#" {{bindAttr href="view.href"}}> Trending projects</a>
{{/linkTo}}
{{#linkTo 'projects.all' tagName="li"}}
<a href="#" {{bindAttr href="view.href"}}> All projects</a>
{{/linkTo}}
...
When I click one of these links, it will fetch data via Ajax and go to that route. But sometimes it takes a while to fetch the data, so I'd like to show a spinner. I currently already have a global spinner at the top of the page. It would be cool to show a spinner next to the navigation link that was clicked, so the user sees what page is currently loading.
What would be the best/easiest approach to implement this?
You could put a span next to each navigation link that's hidden by default, and contains the spinner. Then onClick, show the span. Hide all of them after ajax is done.
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).