I have upgraded my version of jBox from "old, 2016ish" to 0.4.9 today and checked if my code was still working - and noticed that Image seems to behave differently now. Investigating this in more detail I have build this fiddle which uses essentially the same code as Stephan's sample (plus a bit of harmless CSS) and still fails - so if even Stephan's example does not work I believe there must a bug in jBox, not in my code...
Fiddle: here
HTML:
<img src="https://stephanwagner.me/img/jBox/demo-img/CIMG4778_small.jpg" alt="">
<img src="https://stephanwagner.me/img/jBox/demo-img/CIMG4547_small.jpg" alt="">
JS:
new jBox('Image');
BTW, I have also experimented with $(function(){new jBox("Image");});but that did not help.
Remember to initialise jBox when your DOM is ready: https://jsfiddle.net/StephanWagner/q8cv1Lqg/
$(document).ready(function() {
new jBox("Image");
});
It turned out I had not loaded plugins/Image/jBox.Image.css and plugins/Image/jBox.Image.js
Related
This problem only just appeared when I migrated my code to production, it does not happen in my development environment.
I have a handlebars template which receives an object, something like:
{node: {sections: [{name: 'abc'},{name: 'xyz'}]}}
The template looks like this:
{{#each node.sections}}
{{#ifCond type '==' "image-left-text-right"}}
{{> admin/section/image-left-text-right}}
{{/ifCond}}
{{#ifCond type '==' "two-columns-image-and-text"}}
{{> admin/section/two-columns-image-and-text}}
{{/ifCond}}
{{#ifCond type '==' "four-columns"}}
{{> admin/section/four-columns}}
{{/ifCond}}
{{/each}}
Now this all looks great in my development environment and the template renders correctly, in production nothing shows.
After console logging my entire object I can confirm it's there, wrote a little helper to help me console log it:
<script>
console.log('----1---')
console.log({{{json node}}})
console.log('----2---')
console.log({{{json node.sections}}})
console.log('----3---')
</script>
What is super weird, is that console.log on the node returns:
However the second console log outputs nothing.
It is like it doesn't have access to that attribute on the object?
I'm running version handlebars#4.7.6 in both dev and prod. Is there some weird private/public flag I'm not aware off in Handlebars I need to set, to allow it to access the array directly?
So, apparently I was wrong, I'm running 4.0.12 in dev and 4.7.6 in production. the ^4.0.12 in the package.json file caused it to install the newer version. Apparently the issue is related to 4.7.6, for now I've changed it to 4.0.12 and will eventually investigate what changes in 4.7.6 have caused this problem.
I'm working with polymer and I'm testing all in my local environment and all is working as expected, but the problem is when I'll move it into production, where the url shouldn't be the same as in my local. In node.js I can set it via the config.json file and catch it with app.get('config') or something like that, but in polymer I cant get it, and the only chance I have is to create another endpoint with all the config.json config file, but, and here is the best part, I should hardcode this url in polymer!! (so annoying). There is some way or library or component or something that I'm missing ?
Thanks in advance guys! StackOverflow and the users helped my a lot!
UPDATE
The thing is that I'm using custom elements (because I had handlebars too and there is a little problem with the {{}}) so, in the custom elements that I created I have this (for example in the core-ajax call):
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="/app/middle/login" ....></core-ajax>
as you can see the url is a little bit hardcoded, I want to use something like this (this is what I have on the node.js endpoint application):
router.post(endpoint.login, function (req, res) {
and I want to got something like that over polymer
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="{{login}}" ... ></core-ajax>
<script>
Polymer('log-form', {
login: endpoint.login,
ready: function () {
....
})
});
</script>
I'ts more clear now? I'm not so strong on english language.
Thanks Guys, for all!
I am a jQuery user and just learning YUI. I have the following code and I keep the error that YUI is not defined. I know it is an issue with linking to the library but I'm not exactly sure what. I had someone else test my code where they had YUI held locally and it worked fine. If I need to do this, how do I obtain a copy of the min.js file? When you download a copy from the YUI site its a tonne of files...
<head>
<title>YUI3 Test</title
<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
</head>
<body>
<div id="menu">
<p>Click here to test.</p>
</div>
<script>
YUI().use('node', 'event', function (Y){
var changeText = function(e){
e.target.setHTML("<p>Now you see the test working.</p>");
}
var node = Y.one("#menu");
node.on("click", changeText);
//node.on("click", function(e){
// Y.one(node).load('menu.html');
//});
});
</script>
</body>
Thanks!
You're missing a > after </title. This may be causing the script tag not to be recognized and so it's not loading.
Here it is broken: http://jsbin.com/ubaxoy/1/edit
And here it works after adding the missing >: http://jsbin.com/ubaxoy/2/edit
I also had to change setHTML to setContent because YUI 3.2 didn't have setHTML yet. I'd also recommend you to use a newer version of YUI, from 3.9.1 up. There have been a number of great additions since 3.2.
I have been evaluating couchdb for a project and am using couchapp to develop the prototype. So far all I can only say it that it is an awesome tool. I have however run across a problem (which is surely caused by ignorance of the tool) that I cannot seem to get mustache partials to work and the reason for that I believe is that evently can't find the definitions of the partials I am using.
example out of a message queue evently template (evently/queues/_change/mustache.html)
<div class="queue">{{>queue_info}}</div>
...
and I have a queue_info.html with something like
<h2>{{name}}</h2>
where do I place the "queue_info.html" so that evently would find it and insert it properly? If I put it in the same directory as mustache.html it doesn't work.
Best regards,
Vukasin
ok i have figured this out so I am writing to help anyone who might run into the same issue in the future:
if you have data:
{ "queue_info": { "name": "queuename", "owner": "user1" }, "messages": [...] }
and you want to render the "queue_info" part using a partial you will need to create the partial called "queue_info" (it is important that the partial is called the same as the field) and place it in a file "queue_info.html" located in the subdirectory "partials" of the evently directory you are working in).
so we have evently/queues/_change/mustache.html
<div class="queue">
{{>queue_info}}
{{#messages}}
<div class="message">
author: {{author}}
message: {{text}}
</div>
{{/messages}}
</div>
and evently/queues/_change/partials/queue_info.html
Queue: {{name}}
Owner: {{owner}}
when we push this couchapp to the server we get a result which cascades as expected.
Hope this helps someone :-)
How must the code below be changed to embed this YouTube with sound off?
<embed src="http://www.youtube.com/v/etnh6_omu0w&hl&rel=1&autoplay=1&sound=1" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="200"></embed>
Here's the code as it should be:
you'll need to include this as well in the same folder this code is in:
SWFObject.js
That's just some helper code, I wouldn't worry about it.
code:
<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/FSz_a_yx9hA&hl&enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.mute();
}
</script>
Ok I tested that code and I know it works so if you have any problems let me know, happy hacking!
Get the docs here: YouTube Embedded Player Javascript API Reference
It doesn't work in my web browsers. It said my flash player should be version 8+ But I was using flash player 9 with javascript on. I tested on both Firefox 3.11 & IE 7.
I realize, the flash player's support on Firefox is a little bit buggy (update the player several times), some flash movie may still not appear (blank), but on IE it should work fine. But not in your sample code..
Correction: it works on my IE 7.
But not in Firefox 3.11. I wonder, why flash player / SWFObject not getting along with recent firefox. Do you have any tweak or recommendation can be done to make Firefox 3 plays all swf well?
There might be a volume parameter on the embed tag:
Link