Is it possible to have two joyrides on one page? For example: run one joyride, then, once the user selects something, start a second joyride?
I believe what your looking for has its roots in the answer to this question. You can use the Callback to then initialize a 2nd Joyride by doing something such as triggering a button click on a hidden button.
I haven't been able to test this code yet, but it should work something along these lines:
// set up the config for a Callback
var config = {
nubPosition : 'auto',
postRideCallback : function() {
// Joyride has ended, simulate a click on a hidden button
$(#hidden_button).click();
}
// When the Hidden button is clicked, call the 2nd Joyride
$( "#hidden_button" ).click(function() {
$(document).foundation('joyride2', 'start');
});
You just have to wrap your joyride in a div and then start that joyride when you want to.
For example:
<div id="Joyryde1">
<ol class="joyride-list" data-joyride >
<li data-id="message1" data-text="Next" data-options="tip_location: top">
<p>Joyride 01</p>
</li>
</ol>
</div>
<div id="Joyryde2">
<ol class="joyride-list" data-joyride >
<li data-id="message1" data-text="Next" data-options="tip_location: top">
<p>Joyride 02</p>
</li>
</ol>
</div>
<script>
$("#joyride1").foundation('joyride', 'start'); //Start when the page loads
// Add this to your trigger(button or another page load)
$("#joyride2").foundation('joyride', 'start');
</script>
Related
I have created a dialog box using the ember-modal-dialog. The content that is going to displayed in the dialog is received from the server. I am able to make the call to server and fetch the data. But I don't know how to save the data into my model store from actions.
Controller.js
actions:{
fiModal1: function(photo){
Ember.$('body').addClass('centered-modal-showing');
var currentState = this;
photo.toggleProperty('fidialogShowing'))
console.log('opendialog');
raw({
url: 'http://example.co.in/api/photo/'+photo.get('like_pk')+'/likes/',
type: 'GET',
}).then(function(result){
currentState.set('model.feed.liker',result)
});
},
bookmarked:function(liker){
liker.set('is_bookmarked',true)
},
}
feed.hbs
<p {{action "fiModal" photo }}>
{{photo.0.numlikes}}
</p>
{{#if photo.fidialogShowing}}
{{#modal-dialog translucentOverlay=true close = (action "fiDialogClose" photo)}}
{{#each model.feed.liker as |liker}}
<div class = "col-sm-6">
{{#if liker.is_bookmarked}}
<a href {{action "unbookmarked" liker}}>
<img class="foll" src = "images/button-bookmark-secondary-state-dark-b-g.png">
</a>
{{else}}
<a href {{action "bookmarked" liker}}>
<img class="foll" src = "images/button-bookmark.png">
</a>
{{/if}}
</div>
{{/each}}
Now the problem is that when action inside the dialog box is fired it throws an error:
fiver.set is not function
I think that the problem is occurring because I am not saving the result in the model store. How should I do it so the action inside the dialog box also works?
You can just encapsulate the results from your server into Ember.Object
Ember.Object.create(json)
For exemple replace your line
currentState.set('model.feed.liker',result)
by
currentState.set('model.feed.liker', result.map(function(item) {
return Ember.Object.create(item);
})
that way each elements inside your model.feed.liker should have a method 'set' available.
I have two div, have open the same modal window:
<div id="regulatorias" data-toggle="modal" data-target="#myModalReguOpor" data-alert="regulatorias">
Content...
</div>
<div id="oportunidades" data-toggle="modal" data-target="#myModalReguOpor" data-alert="oportunidades">
Content...
</div>
When invoking the event that opens the modal, I want to get the id atribute or the value of the data-alert, of the div which I am clicking.
$("#myModalReguOpor").on('shown.bs.modal', function () {
// here I want to get the id or data-alert value, about the div that i'm clicking
});
How could make it?
Thanks,
You can do like this
$(document).ready(function(){
$('#myModalReguOpor').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).attr('id');
alert(id);
});
});
I would suggest to replace id with data-attribute like data-id="regulatorias" in modal trigger button
<div data-id="regulatorias" data-toggle="modal" data-target="#myModalReguOpor" data-alert="regulatorias">
Content...
</div>
and in JS
$(document).ready(function(){
$('#myModalReguOpor').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
});
});
I have a toolbar component which has a list of items. When I click on an element I need to add background color to the clicked element. Also need to deselect the previously selected item.
I tried using classNameBinding but it applies to all the elements in the list.
How can I apply Background Color to the elements which are clicked inside the Component
In Template:
<script type="text/x-handlebars" data-template-name="components/test-toolbar">
<ul>
<li {{bindAttr class="bgColor"}} {{action 'redClick'}}>
Red
</li>
<li {{bindAttr class="bgColor"}}>
Yellow
</li>
<li {{bindAttr class="bgColor"}}>
Blue
</li>
</ul>
</script>
<script type="text/x-handlebars" data-template-name="index">
<div>
{{test-toolbar}}
</div>
</script>
In app.js:
App.TestToolbarComponent = Ember.Component.extend({
classNameBindings: ['bgColor'],
bgColor: false,
actions: {
redClick: function () {
this.set('bgColor', true);
}
}
});
Here is the working DEMO: JSBIN LINK
Using actions you can't get the target element to manipulate it. Also using 3 different actions for same is something i don't suggest. You can use click hook to handle this in simple jquery way. here is code and jsbin link
App.TestToolbarComponent = Ember.Component.extend({
click: function(event){
var elem = Ember.$(event.target);
if(elem.is('li')) {
this.$('li').removeClass('active');
elem.addClass('active');
}
}
});
http://emberjs.jsbin.com/qiriwi/2/edit
The answers given will definitely work. But I think there is a very simple way to get this done. You will have a .css (most probably style.css) file associated with your ember app. In that file add the following snippet:
.active{
/*your code goes here
eg. background-color: 'red';*/
}
This will simply allow you to style the component whichever is active at that moment of time.
Is there a simple way to accomplish this using dojo (jQuery would be easier for me but I have to use dojo): I have a simple unordered list. I don't want dojo to style the list (as it might if I used some widget). When I click a link on the list I want to show a div associated with the link. Then if I click another link in the list the first div hides and that one shows.
<div id="content">
<h2>Header</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div id="sub_content1" style="display:none;">
<h3>Sub Content Header 1</h3>
<p>Lorem ipsum veritas britas conflictum civa</p>
</div>
<div id="sub_content2" style="display:none;">
<h3>Sub Content Header 2</h3>
<p>Lorem ipsum mobius ceti</p>
</div>
<div id="sub_content3" style="display:none;">
<h3>Sub Content Header 3</h3>
<p>Lorem ipsum citrus pecto</p>
<ul>
<li>Lemons</li>
<li>Limes</li>
</ul>
</div>
</div><!-- end of #content -->
So in fact you're creating your own tabcontainer? If you really want to do it yourself you should probably need something like this:
require(["dojo/ready", "dojo/on", "dojo/dom-attr", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"], function(ready, on, domAttr, domStyle, query) {
ready(function() {
query("ul li a").forEach(function(node) {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "none");
});
on(node, "click", function(e) {
query("ul li a").forEach(function(node) {
if (node == e.target) {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "block");
});
} else {
query(domAttr.get(node, "href")).forEach(function(node) {
domStyle.set(node, "display", "none");
});
}
});
});
});
});
});
I'm not sure how familiar you are with Dojo, but it uses a query that will loop all links in lists (with the dojo/query and dojo/NodeList-dom modules) (you should provide a classname or something like that to make it easier). Then it will, for each link, retrieve the div corresponding to it and hide it, it will also connect a click event handler to it (with the dojo/on module).
When someone clicks the link, it will (again) loop all the links, but this time it's doing that to determine which node is the target one and which isn't (so it can hide/show the corresponding div).
I made a JSFiddle to show you this. If something is still not clear you should first try to look at the reference guide of Dojo since it really demonstrates the most common uses of most modules.
But since this behavior is quite similar to a TabContainer, I would recommend you to look at the TabContainer reference guide.
I'm still trying to learn ember.js so please bear with me.
Objective
I'm currently creating a one page web application. When the application, the application will do an ajax call which will return a list of numbers lets. The application will process these numbers and create a div for each of the numbers and store it into a div container.
A click event will be associated with each div, so when the user clicks on the link a pop up dialoge will come up.
Code
Index.html
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="payloads">
<div class="page">
<div id="desktopWrap">
<div id="theaterDialog" title="Theater View" class="bibWindow1">
{{view.name}}
{{#each item in model}}
<div {{bindAttr id="item"}} {{action click item}}>
<div class="thumb1" ></div>
<div class="userDetails1">Payload {{item}}</div>
<div class="online1" ></div>
</div>
<div class="spacer10"></div>
{{/each}}
</div>
</div>
</div>
</script>
My app.js file is here:
App = Ember.Application.create();
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['Payload_1', 'Payload_2', 'Payload_3'];
}
});
App.PayloadsRoute = Ember.Route.extend({
model: function() {
return ['Payload_1', 'Payload_2', 'Payload_3'];
}
})
App.IndexController = Ember.ObjectController.extend(
{
click: function(e)
{
alert("clicked:" + e);
}
})
General Idea
The current code above will create the "theaterDialogue" div box with 3 divs. A onclick action is associated with it through the Controller for each of these divs. When a user clicks on the first div "payload 1" will be printed in an alert box, second div "payload 2" etc. Instead of the print out, I want to be able to render a new dialogue box (jquery dialogue box) where the contents will be rendered from a template. Its not clear to me how this is done.....I understand that views are used to store data for the templates...but not how you would nest a template within one that is generated by an action?
If you could point me anyone, that would be awesome!
Any advice appreciated,
D
Basic approach for nesting is,
Define the nested routes (Main step, if you get this right, you are almost there)
Add {{outlet}} in the templates if you think that this view will have something appended to it later on
For example we have 3 views A, B, C and the nesting is as follows
A
|_B
|_C
Then the templates A & B should have the {{outlet}}, while C is the last one it shouldnt have {{outlet}}
A good example