I already searched the forum for this (for example: HTML/CSS: Foundation stylesheet wont link) , but there was no answer which helped for my case.
I downloaded the current version of Foundation here:
https://foundation.zurb.com/sites/download.html/
Then I put it into my project folder and made a link to it inside my index.html. The link looks like this:
<link rel="stylesheet" href="Foundation/css/foundation.css">
Other links to external sources worked.
So I tried out the implementation and copypasted some code from foundations examples, this one:
<div class="card-info info">
<div class="card-info-label">
<div class="card-info-label-text">
FYI
</div>
</div>
<div class="card-info-content">
<h3 class="lead">Chappie</h3>
<p>In the near future, crime is patrolled by a mechanized police
force. When one police droid, Chappie, is stolen and given new
programming, he becomes the first robot with the ability to think
and feel for himself.</p>
</div>
</div>
However, nothing happens. I just get the strings outputted without any styling, so I guess that the link doesnt work.
My site is running on angular, could this pose an issue? And if so, why does the other link work but this one not?
For building blocks to work you have to copy the SCSS / CSS content from the bottom, which you need additionally to the foundation.css file.
Related
I recently got started with Django, took a few courses on it and got the basic idea in terms of project structure, urls, templates, static files etc. To avoid learning frontend development (and build my app faster), I thought a bootstrap theme would be a good option. I got this https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469 which has bootstrap4 in the title, however, it seems that integrating it into the project is not as simple as placing the scss, js and vendor files into my static folder. The 'getting started' resources suggest that it runs on NodeJS, and has a whole backend of its own. I'm not asking for a bespoke full guide on how to do it, but it'd be nice to know if the two things are compatible or I if should move on and try some other frontend solution instead. Cheers!
They are "compatible", but you are probably better off starting with a theme that is just HTML/CSS/JS (not made for Angular, unless you are trying to use Angular with Django). I have actually used this exact theme in a Django project.
To start, just take components from the HTML and put them into Django template files. Generally, I would make a layout page which is something like this:
{% load static %}
<!-- templates/layout.html -->
<!DOCTYPE html>
<html>
<head>
<!-- include styles from metronic here -->
</head>
<body>
{% block body %}
{% endblock %}
</body>
Hope this helps a bit, good luck!
I just upgraded my Ember addon from version 3.0 to version 3.8, and I get this warning now:
Interaction added to non-interactive element no-invalid-interactive
An example of this is something like:
<div class="some-class" onclick={{action "selectDate" "today"}}>
<div> more content </div>
</div>
When you click the action, it should take you to a new route.
What are my options to fix it the right way, so that it is accessible?
The solution here depends on what the action should do.
Refactoring an action that triggers a transition
Since this action takes the user to a new route, it should be a link element, <a> and not a button. This gives assistive technology/screen reader users a clue that interacting will take them somewhere new in the app.
This can be refactored to a link-to in Ember, which will wrap the content in <a>:
{{#link-to someRoute}}
<div> more content </div>
{{/link-to}}
someRoute could be a computed property if it needs to be informed by multiple pieces of data. Otherwise, it could be a string.
Refactoring an interaction that keeps you on the same page
In cases where the action does not take you to a different page, it may be appropriate to use a <button>. An example of this would be a button that expands a collapsible container or toggles a setting. However, the w3 validator tells us that you can't put divs inside of buttons. You can use Phrasing Content that is non-interactive, such as <span>.
<button class="some-class" onclick={{action "toggleSomething"}}>
<span> more content </span>
</button>
Learn More
To catch more accessibility problems in an app, try out ember-a11y-testing which audits your app for problems and gives you a report of how to fix them.
This question was answered as part of "May I Ask a Question" Season 2 Episode 3. If you would like to see us discuss this answer in full you can check out the video here: https://youtu.be/nQsG1zjl8H4
I created an Intraweb template with single colored boxes.
When i now try to run my Intraweb Application, i can see the different slices of my template but the pictures wasn't loaded. I put it in the win32/debug folder lile its said in the documentation but the pictures are never loaded.
Any suggestions?
Thank you
Chris
[Edit]
Piece of my Html Code
<div id="Tabelle_01">
<div id="Test-01">
<img src="Bilder/Test_01.jpg" width="454" height="127" alt="">
{%IWRegion1%}
</div>
[Solution]
Adding next to the "Templates" Folder a Folder "wwwroot" and adding the Images to it and then it works.
Thanks
You did not say which version of Intraweb you are using, but in current versions Templates go in the (application)\Templates directory. Templates only modify the form, so pictures go wherever the form expects them to be. ex: your wwwroot (Application)\wwwroot.
In your case (guessing) "debug\templates" and "debug\wwwroot".
Please post your code.
Dan
I have an ember-cli project and my application.hbs setup looks like this.
{{#site-navigation}}
<h1>Welcome to turbo entertainment</h1>
{{/site-navigation}}
site-navigation is a component which looks like this
{{#nav-bar}}{{/nav-bar}}
{{yield}}
{{#nav-footer}}{{/nav-footer}}
The problem is that <h1>Welcome to turbo entertainment</h1> get rendered perfectly fine but
my nav-bar and nav-footer don't show up at all. Here's the rendered html
<div id="ember287" class="ember-view">
<div id="ember316" class="ember-view site-navigation-view">
<h1>this is helix entertainment</h1>
</div>
</div>
I have added classNames:[whateverThisComponentIs-view] to every of my component so I can identify the rendering. But as visible, I don't see a container named nav-bar-view or nav-footer-view.
I am on ember-cli --version 0.1.4
You say you're yielding
<h1>Welcome to turbo entertainment</h1>
to the site-navigation component but when it gets rendered you're seeing
<h1>this is helix entertainment</h1>
Was this a mistake in composing the question? If not, are you sure you're debugging the correct app or correct version of the app? If you're using liveReload with ember cli make sure you restart ember serve to ensure that everything is compiled properly and all your templates are up to date.
The issue was some of the node modules were not properly installed. I basically removed the app and restarted the whole project, making sure I did npm update on the whole thing. That worked it out.
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.