I have this code:
<div class="off-canvas-wrap">
<div class="inner-wrap">
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label class="first">Foundation</label></li>
<li>Home</li>
</ul>
<hr>
<ul class="off-canvas-list">
<li><label class="first">Learn</label></li>
<li>Anchor1</li>
</ul>
<hr>
I'd like to click on Anchor1 link and to close the canvas menu after the webpage scrolls to right anchor.
How can I do that?
--
I have found to close canvas-menu :
<script>
$(document).ready(function() {
$('a[href="#anchor1"]').click(function() {
$(".menu-wrap").removeClass("move-right");
});
});
</script>
just saw this question when I was running into the same problem.
Actually Foundation provides an option for this which you can set to true:
http://foundation.zurb.com/docs/components/offcanvas.html#optional-javascript-configuration
$(document).foundation({
offcanvas : {
// Sets method in which offcanvas opens.
// [ move | overlap_single | overlap ]
open_method: 'move',
// Should the menu close when a menu link is clicked?
// [ true | false ]
close_on_click : false
}
});
Related
Im used Bootstrap v4-alpha Im added pop over its working, but i need to add popover-content for the on click function its not fire in Ember-js,
how to put onclick function in emebr-js
this is im used onlick event
<li class="list-group-item" onclick={{action `'event'}}>Airport Pickup</li>
This is my code sample
add-newbooking.hbs
<div class="form-group">
<a href="#" data-toggle="popover" data-placement="bottom" data-toggle="popover" title="Bill Category">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder=""></a>
</div>
<title>Bootstrap Example</title>
<!-- loaded popover content -->
<div id="popover-content" style="display: none">
<ul class="list-group custom-popover">
<li class="list-group-item" onclick={{action 'event'}}>Airport Pickup</li>
<li class="list-group-item" >Food and Beverage</li>
<li class="list-group-item">Yoga Class</li>
</ul>
</div>
<script>$(document).ready(function() {
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
});</script>
add-newbooking.js
import Ember from 'ember';
export default Ember.Component.extend({
actions:{
event: function () {
console.log("ppessssssss")
}
}
});
The guides have a whole section on this
<li class="list-group-item" {{action 'event'}}>Airport Pickup</li>
You could be better off adding a link or button inside the list item though so that the button is focusable etc
adding onclick and action on an element will add both events i.e. DOM events as well as ember events. so always remember to add any one of the events (preferably ember).
I want to know how we can make modals which have routes.
In Trello, whenever you click on a card, the route changes from abc.com/b/personal to abc.com/c/some-random-string and the card opens in a modal. Also, when you close the modal, you get redirected to the previous url (abc.com/b/personal).
I want to know how can we achieve this using Emberjs.
Example: https://trello.com/b/ezWgKsol/sales-enterprise-feature-requests-sample
Here is my modal (using foundation) where we delete a record:
<div class="reveal" id="deleteLocationModal" data-reveal>
<div class="row">
<div class="columns">
Are you sure you want to delete this location?
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="columns">
<button id="cancelButton" class="secondary button" data-close type="button">Cancel</button>
<button id="deleteButton" class="button" {{action "deleteLocation" model}} data-close type="button">Delete</button>
</div>
</div>
</div>
The router has the falling in the actions hash:
actions: {
deleteLocation(model) {
Ember.assert("Params must be provided", model);
model.save().then(( /* response */ ) => {
this.transitionTo('locations'); //locations is my index page.
//flash message to inform the user of success.
});
}, (error) => {
//handle error.
// display flash message
// rollback any dirty attributes
});
}
I hope this helps,
Jeff
I want to change the DIV class base on CLICK action. I am trying to make a floating sidebar like this http://startbootstrap.com/templates/simple-sidebar.html
This demo has only three lines of code for toggle-ing the class.
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
I want to achive same thing but in ember way. Below is my HTML code:
<div id="wrap">
<div class="pull-left" id="main_menu">
<ul class="list-group">
<li class="list-group-item">{{#link-to "selectImage"}}<h4>Choose Picture</h4>{{/link-to}}</li>
<li class="list-group-item">{{#link-to "message"}}<h4>Write Message</h4>{{/link-to}}</li>
<li class="list-group-item"><h4>Account info</h4></li>
<li class="list-group-item"><h4>Recent Orders</h4></li>
<li class="list-group-item"><h4>How to</h4></li>
<li class="list-group-item"><h4>FAQ</h4></li>
</ul>
</div>
<!-- Begin page content -->
<div class="container" id="page_content">
{{outlet}}
</div>
<!-- End page content -->
</div>
</script>
<script type="text/x-handlebars" id="cards/index">
<h1>
<button class="pull-left btn btn-default" data-target="#main_menu" {{action 'changeClass'}}>
<img src="images/icons/menu_tablet.png" class="main_menu"/>
</button>
</script>
Now I do not know how can I use the action to change the class in WRAP div. I will really appreciate any help regarding this issue.
You can add the action handler within the controller for cards/index
Controller = Ember.ObjectController.extend({
actions: {
changeClass: function() {
// Run logic here
}
}
})
I have a sub menu that appears only when a menu item in the main menu is selected. What I want to do is save the state of the sub menu so that, when a user selects something in the sub menu, then navigates away in the main menu, that sub menu item should still be selected when they return to the sub menu. But, I'm not sure how to go about it. Any ideas?
http://jsfiddle.net/martinp999/Ce5j8/2/
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#/a/f">Main Menu</a>
<ul class="nav">
<li>{{#link-to 'a'}}A{{/link-to}}</li>
<li>{{#link-to 'b'}}B{{/link-to}}</li>
<li>{{#link-to 'c'}}C{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="a">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#/a/f">Sub Menu A</a>
<ul class="nav">
<li>{{#link-to 'f'}}F{{/link-to}}</li>
<li>{{#link-to 'g'}}G{{/link-to}}</li>
<li>{{#link-to 'h'}}H{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="b">
B
</script>
<script type="text/x-handlebars" id="c">
C
</script>
<script type="text/x-handlebars" id="f">
F
</script>
<script type="text/x-handlebars" id="g">
G
</script>
<script type="text/x-handlebars" id="h">
H
</script>
App.Router.map(function () {
this.resource('a', function() {
this.resource('f');
this.resource('g');
this.resource('h');
});
this.resource('b');
this.resource('c');});
When transitioning from the A route, you can inspect the transition object and see where you're going. It is possible to stash the location where you're going (if it is a sub-route of A) and then utilize it again in the redirect hook of the AIndexRoute.
Check out this updated fiddle: http://jsfiddle.net/ahaurw01/Ce5j8/3/
Figured it out. I thought that ember-latest.js pointed at latest production release, it actually points at the beta of beta - canary. The transition object does not contain a handlerInfos object in prod or in beta, only in canary.
Hi there i have a small question that belonging to my small ember application.
JSFiddle upload is here. I used bootstrap accordion to visualize my tickets. When i click on the "click" it adds another accordion into my view. But sadly it cannot be opened or used. Every accordion i dynamically created cannot be opened or closed. There is no error or exception thrown and from my point of view everything should work fine. My click-function looks like this:
click: function() {
this.counter++,
name = this.name+this.counter.toString(),
tre = App.Ticket.create({
Text: "try",
id: name
});
this.pushObject(tre);
}});
The belonging html is here:
<div class="accordion-group">
{{#each content}}
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" {{bindAttr href="id"}}>
Ticket ID/Störfall
</a>
</div>
<div {{bindAttr id="id"}} class="accordion-body collapse in ">
<div class="accordion-inner">
{{Text}}
</div>
</div>
{{/each}}
</div>
I hope you can help me.
You can add an action helper to the accordion link title
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2"
{{bindAttr href="item.id"}}
{{action "click" item target="view"}}>
Ticket ID/Störfall
</a>
Then implement a click handler event in your view
App.TicketView = Em.View.extend({
click:function(context) {
var el = this.$('a[href='+context.get('id')+']');
el.toggleClass('collapsed');
this.$('#'+el.attr('href')).toggleClass('in');
}
});
Here's a working fiddle