I am searching for a way to use Zurb Foundation's Interchange to work on a single image. In my code I change the image 'data-interchange' attribute of another set of images and run the following command:
$(document).foundation('interchange', 'reflow');
However the image stays the same as the first image, it's not being updated to reflect the change in the data-interchaneg attribute and show the new image.
Is there an option to make it work?
This works when 'reflow' and then 'resize' events are called.
$('img#your-image-id').attr('data-interchange', new-params);
$(document).foundation('interchange', 'reflow');
$(document).foundation('interchange', 'resize');
Not sure if you found the answer to your problem.
But I also faced same issue and interchange was not working for me either.
But after some digging, I moved all JS files to footer and all of the sudden it started working and swapping images as it should. These are my scripts.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation.interchange.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
That's it.
when updating data-interchange do not use the jquery
.data('interchange','NEW VALUE') function, you have to use
.attr('data-interchange','NEW VALUE').
then call the reflow function.
Related
I realized a custom viewer to display diagrams realized with diagrams.net editor. More or less my code is:
<script src="http://localhost:8080/my-viewer/mxgraph/js/app.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/shapes.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/stencils.min.js type="text/javascript"></script>
<script src="http://localhost:8080/my-viewer/mxgraph/js/extensions.min.js type="text/javascript"></script>
var graph = new mxGraph(container)
diagram = mxUtils.parseXml(xmlDiagram);
codec = new mxCodec(diagram);
codec.decode(diagram.documentElement, graph.getModel());
graph.fit();
It works quite well but I noticed that some shapes are rendered as rectangles instead of circles,triangles and ellipses, like in the following picture where on the right I highlighted in red the wrong shapes:
I suppose I am missing to include something concerning styles or shapes (JS module, xml file, ...) from draw.io webapp but I can't figure out which one. Can anyone give me some hint?
Thanks in advance,
Marco
I eventually found the solution. The problem is that some shapes in the diagram definition file doesn't have the 'shape' property. For example, triangle is generated by this tag:
<mxCell style="triangle;whiteSpace=wrap;html=1" ...>
but it should be
<mxCell style="shape=triangle;whiteSpace=wrap;html=1" ...>
See here the full discussion on draw.io project Github.
What am I missing to make Foundation's Magellan work?
This is my Codepen that is not working, but I copied the same HTML and CSS from this original Foundations Codepen.
I have added:
jquery.js
foundation.js
foundation.magellan.js
foundation.core.js
foundation.smoothScroll.js
But can't make it work, is something missing?
So a couple of things...
What they don't tell you is you much have the init within a document ready
$(function() {
$(document).foundation();
});
And the active class is
.is-active
Once you update those 2 things... your magellan will work.
I'm using Grunt and Yeoman to precompile my handlebars templates for an ember app.
In the tutorial they write:
<script type="text/x-handlebars" data-template-name="todos">
...
</script>
Instead I have a file todos.hbs
Now I have to create a template:
<script type="text/x-handlebars" data-template-name="todos/index">
</script>
What syntax do I use to make a todos/index .hbs file?
Is your todos/index a nested ressource?
With Grunt in this case, I put my todos.hbs in the parent folder of the nested ressource, render only the {{outlet}}-tag in it and put todos/index named as index.hbs in a subfolder called todos. Inside these templates, i usually omit the <script type="text/x-handlebars" data-template-name="todos/index">...</script> part, because Grunt recognizes them based on their filename.
If your routes are not nested, you should be able to do the same without the subfolders. Correct me if I'm wrong
Be sure to configure your Grunt to watch subfolders for changes when doing it that way. See this thread
I hope this helps
create a new folder todos in the template directory and create an index.hbs file in it.
I'm trying to create a simple Ember.js app to learn more about JavaScript MVC frameworks. However, it appears applying CSS styles to a view template isn't possible (or rather, I am ignorant of the proper way to do this):
Without template
<span class="myClass">
Some value
</span>
In this case, the style appears properly, as expected.
With template
<span class="myClass">
<script type="text/x-handlebars>
{{MyApp.someVariable}}
</script>
</span>
In this case, the style doesn't seem to be applied at all.
I even tried something like:
<script type="text/x-handlebars>
{{MyApp.someVariable classToAdd="myClass"}}
</script>
Which creates an even more bizarre output (I can't even find that element in the Chrome developer element tab).
Online tutorials don't mention this issue and I have tried researching other Stackoverflow issues (there are some about applying styles but not exactly like in this situation). Can anyone enlighten me as to what I am not doing properly?
I normally use ClassNames and classNameBindings property of Ember Views. That get the job done most of the time.
You can also try Ember layout property to wrap the template.
Found answer to this question in jquery's append() documentation
You need to convert text into html using jQuery:
template = Handlebars.compile(..);
html = template(json);
$('body').append($(html)); // <- don't forget to wrap it
I am using Facebook JS SDK for integrating Like buttons in my Rails App. This sunny Monday the like buttons disappeared, and I opened Firebug to check what was going on. I found this error:
ga is undefined (line 25 of http://connect.facebook.net/en_US.all.js#xfbml=1)
So... I created an empty file not related to my Rails app, and I did something as simple as:
<html>
<body>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</body>
</html>
And yes, the error is still there. Any thoughts?
I opened a ticket to Facebook, and apparently some other people were having the same problem. It seemed to be a temporary problem because now is up and running normally. I wasn't able to find the reason, and one of the Facebook employees replied when everything was running normally, so I can't give a clear answer of what was going on.
Please use <div class="fb-like"></div> instead of <fb:like></fb:like>
See http://developers.facebook.com/docs/reference/plugins/like/ and refetch the example code.
It took me a while before I noticed the change in HTML code provided by Facebook.
if you add <div id="fb-root"></div> to your page it will work again ... not sure if it's a temporary bug or a change within their API yet ... :-/
I have fix this bug (for sharrre, jquery plugin) by adding this div:
<div id="fb-root"></div>
Edit: oops I haven't seen the Hellkeeper answer's :)
Your href property is empty in the fb:like tag.