So I've got this working so far:
<script type="text/javascript">
window.addEvent('domready', function() {
$('casestudies').addEvent('click', function( ){
$('gomobileinfo').setStyle('margin-left', '-500px');
});
});
</script>
really simple, and works fine; basically slides a div to the left. But I'm trying to make it transition smoothly instead of immediately. I know it would be really simple to use tween or morph with MooTools 1.2, but I have to use version 1.1 for this project.
You can use
new Fx.Style('gomobileinfo', 'margin-left', {duration : 2000}).start(-500);
Demo:
new Fx.Style('gomobileinfo', 'margin-left', {duration : 2000}).start(-500);
#gomobileinfo{
width:100px;
height:200px;
background:red;
margin-left:500px;
}
<script src="http://cdn.strategiqcommerce.com/ajax/libs/mootools/1.1.2/mootools-yui-compressed.js"></script>
<div id="gomobileinfo">Go Mobile</div>
http://jsfiddle.net/A5fVx/
P.S. this MooTools version is REALLY old, you should upgrade and/or tell to the boss to upgrade.
Related
Maybe this question sounds silly but still my vue code doesn't want to work. I'm totally new in Vue. I just added script in my <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
And thought it would be enough. Then I wrote the simple piece of code:
new Vue({
el: ".seats_displayer",
data: {
display: "redbox"
}
})
and the caught element:
<div class="seats_displayer">
{{display}}
</div>
console says that "display" has not been defined. When I type VUE in console it shows me the vue's object. What did I do wrong ?
I have a basic slideshow function as shown below, but to make it smoother I would like to use the FadeIn/Out/Toggle to transition between the images. I have tried various ways of inserting this JS function but cannot get it to work.
<script type="text/javascript">
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/homepage_images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload=function(){
setInterval("rotateimages()", 3500)
}
</script>
Any help much appreciated.
Managed to resolve this by adding the attribute as a function of fadeout().
I have recently decided to do a major upgrade with my javascript libraries and have ran into a perplexing issue with appending Ember.Views. I have been researching this issue for several hours now and have tried many things but nothing has worked.
What I want to do is quite simple: Extend Ember.View, manually create a new instance of this extended view and then append it to a div. In a much earlier version (ember.js 1.5) this was extremely straightforward. Now (ember.js 1.9) attempting the same thing results in an error.
Container was not found when looking up a views template. This is most
likely due to manually instantiating an Ember.View. See:
http://git.io/EKPpnA
Here is a very simple example that demonstrates this: http://jsfiddle.net/81dhm3ta/
html
<body>
<script data-template-name="main" type="text/x-handlebars">
Main
</script>
<div id="main" style="text-align: center;"></div>
</body>
javascript
$(document).ready(function () {
App = Ember.Application.create();
App.MainView = Ember.View.extend({
templateName: 'main',
});
App.view = App.MainView.create();
App.view.appendTo("#main");
});
Can someone show me the simplest way to do this properly?
App.view is neither a D0M element or jQuery object that you can simply append to a div. It is an Ember object of type View.
In the link given by the error, you are clearly told that you can't create views like you did in your snippet. Dynamic views must be instantiated within a parent view or directly through the container (not recommended).
Your life will be much easier if you add views within a template by just using the view helper:
<script type="text/x-handlebars" data-template-name="index">
{{view 'main'}}
</script>
I am using Ember i18n in my app. I also want to use the translation strings in the controllers (in most cases in an alert or confirm message). How can this be done ?
See http://jsfiddle.net/cyclomarc/36VS3/2/
Clicking on the button should alert "info" and not "T1005" ...
<script type="text/x-handlebars">
{{t T1005}}<br>
<button {{action 'clickMe' content}}>{{t T1005}} - Click me</button>
</script>
CLDR.defaultLanguage = 'en';
App.ApplicationController = Ember.Controller.extend({
clickMe: function(){
alert('T1005');
}
})
I know that a possible workaround is to no longer use alert and confirm and replace them by for example the bootstrap alternatives. However, I could imagine that in certain cases you will want to do something with the strings in Javascript (e.g. update a certain label via jQuery or so).
Any ideas on how to use the i18n strings in the controllers is helpful. Using an i18n library is only usefull if all aspects of the application can be translated ...
Just found the solution. Just access the string via Ember.I18n.t("T1005");
JSFiddle updated: http://jsfiddle.net/cyclomarc/36VS3/7/
Might be late here, but what about using the Em.I18n.TranslateableProperties mixin as documented here ?
You could do something like :
App.ApplicationController = Ember.Controller.extend(Em.I18n.translateableProperties, {
messageTranslation: 'T1005',
clickMe: function(){
alert(this.get('message'));
}
});
In the template, {{message}} will also hold the translation.
The solution that works to me is the following (using Ember I18n):
App.ApplicationController = Ember.Controller.extend(Em.I18n.translateableProperties, {
messageTranslation: 'T001',
showMessage: function(){
alert(this.get('message'));
}
});
The answer from cyclomarc didn't work for me (it's from 2013, which might be related), but it pointed me in the right direction:
this.container.lookup('service:i18n').t('my.translation.id')
I'm having quite the problem with Handlebars.JS as it is not replacing {{anything}} with the corresponding variables.
I have the following helper function:
function compileTemplate(name){
return Handlebars.compile($('#'+name+'-template').html());
}
Which I use in the following Backbone view:
Soccer.Teams.Li = compileTemplate('team-li');
Soccer.Router = Backbone.Router.extend({
routes: {
"": "index"
},
index: function(){
Soccer.container.html(compileTemplate('main'));
var teams = new Soccer.Teams.View();
var container = Soccer.container.find('.sub-content');
container.html(teams.render().$el.html());
var teamsList = container.find('#teams-list');
teams.teams.forEach(function(team){
teamsList.append(Soccer.Teams.Li(team.toJSON()));
}, this);
Soccer.page.trigger('pagecreate');
}
});
And #team-li-template is the following:
<script id="team-li-template" type="text/x-handlebars-template">
<li team-id="{{id}}"><a>{{name}}</a></li>
</script>
The correct information is definitely being passed, if I console.log the .toJSON it does contain the correct information, but nothing is replaced, the tags are just turned into nothing.
Any ideas?
Thanks!
Update:
Strangely enough I copied all of my code to a JSFiddle and it worked fine:
http://jsfiddle.net/vcrhh/1/
The actual app is 54.235.201.41 (sorry, wouldn't let me add it as a link).
Also tried just saving the code as a file locally and running it, that works fine too.
User username: mkremer90#gmail.com and password test for both. See anything wrong with the actual app? Why would it work in JSFiddle/local and not in my app?
The Handlebars and Backbone looks fine and the fiddle runs so the problem is with your testing environment. When I look at the page source on your server, I see this:
<script id="team-li-template" type="text/x-handlebars-template">
<li team-id=""><a></a></li>
</script>
Note the conspicuous absence of braces. I'd guess that something server-side is eating your braces. You say that you're using Django so Django's templates are probably causing your problem.