Issues when using Meteor with default Handlebars template.
When I move the tag below into the html body, it autoplays just fine. But in the context of a handlebars template, I see the controls but it does not autoplay. Any way to overcome this??
<template name="showMedia">
<div class="background_audio">
<audio controls autoplay>
<source src="assets/screenDisplayAlert.wav">
</audio>
</div>
</template>
Use Template.showMedia.rendered to execute some code after Meteor has rendered the template. For instance, you could call audio.play() or re-apply any missing autoplay attributes.
The reason this isn't working may have something to do with when the browser hooks up autoplay. Being re-rendered by Meteor may not invoke those same hooks. Personally, I feel like that should "just work". If you can't get it fixed, you might consider filing a bug on Github to see if the devs can reproduce or figure out what's going on.
You could try adding some javascript inside a Meteor.startup() block on the client. For reference see Starting and Stopping Audio in Javascript and how can I play a sound clip on page load?.
I don't know why it works outside a template and not inside, but I'm pretty sure the JS will work, and discretion is the better part of valor :)
Related
I'm writing a documentation with angular.
For now, i duplicate twice the code. Once in the button.component.html to make the componenbt appear, and the other is injected from the button.component.ts as a string so it's not interpreted.
The goal is to show the result you will get if you tips the code contain in pre balise.
I need to avoid these duplication cause when a component change, i need to modify twice the code.
I first have use to simulate include comportement but it's not working as the final content is the generated content and not the original content.
Then i checked how angular material perform for their documentation, and it's same to be a bit tricky and complicated for me has they inject their component as dependancies.
I'm asking if there is a sample way to avoid this duplication content and if someone have faced the same issue.
I have only one idea, it's to run a shell commande in the end of ng build with webpack and node, and get the content of the target block and inject directely in the target balise.
Sample :
<div class="my-5" data-source="myButton">
<button mat-button>
<mat-icon class="icon-left">help</mat-icon>
Support center
</button>
</div>
<code data-target="myButton"></code>
But i'm not very sur about that solution.
Thanks in advance.
Kevin
For people who have face the same problem, there is the module you have to use :
exemplify-angular
It's do the job perfectly.
Kevin
I want to render "reload" github buttons correctly, when i press on another button. I searched and i got this information, but I can't do it, i faced another error:
Uncaught Error: Module name "github-buttons" has not been loaded yet
for context: _. Use require([]).
when i include http://requirejs.org/docs/release/2.2.0/minified/require.js
Node.JS is a server-side technology, not a browser technology. Thus,
Node-specific calls, like require(), do not work in the browser.
See browserify or webpack if you wish to serve browser-specific
modules from Node.
But you can use their steps in order to make this button...
Usage:
Place this tag where you want the button to render
<a class="github-button" href="https://github.com/microsmsm" data-
size="large" aria-label="Follow #microsmsm on GitHub">Follow
#microsmsm</a>
Place this tag in your head or just before your close body tag
<script async defer src="https://buttons.github.io/buttons.js"></script>
Code Example:
https://codepen.io/Microsmsm/pen/NvJaNm?editors=1100
Reference:
https://buttons.github.io/
I am using AEM 6.2 and trying to create a parsys component in crx, using the code below
However, the height of this parsys, in edit mode, comes as 0px.
Attached are the screenshots.
When I manually change the height to some values eg. 40px, it looks fine.
Note: I am not using any client library for the above page. (no css and js)
Futher, All sample sites like geomatrix etc have parsys showing correctly.
Could anyone guide me with what I am doing wrong?
I think that the problem is outside the component or any of the code shown here.
I think what's happening is that the css style for the div that gives the droptarget placeholder its dimensions is not loading.
That's loaded as part of the AEM authoring client libraries which you should be inheriting from the foundation page component.
Examine your page component's sling:resourceSuperType property. It should point to either wcm/foundation/components/page or wcm/foundation/components/page or inherit from a component that does.
If that is set then you have may have blocked one of the scripts within it, quite possibly head.html.
Include following code in the head section of the page component's rendering script.
<!--/* Include Adobe Dynamic Tag Management libraries for the header
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>
*/-->
<!--/* Initializes the Experience Manager authoring UI */-->
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>
For resolving your issue, you need to include init.jsp in the first before writing down the parsys code. I mean write like this.
<head>
<sly data-sly-include='/libs/wcm/core/components/init/init.jsp' />
</head>
<body>
<sly data-sly-resource="${'par' #resourceType='foundation/components/parsys'}" />
</body>
I think #l-klement pointed it out correctly that the problem is outside component. When I rename the landingpage.html file to body.html it starts working fine. I think this may be because of different files like head.html etc present at wcm/foundation/components/page which is required to provide proper styling and load certain required client libraries which assigns proper styling to parsys.
If the above is true, my next question would be, How can I have my own head.html, body.html, header.html, footer.html etc files without compromising with the parsys styling?
I am having a problem with gulp-jade: The Jade compiler always adds a value to HTML attributes without a value, which breaks my AngularJS setup. (e.g. div(ui-view) becomes <div ui-view="ui-view"> when I want <div ui-view>.
The problem does not occur with files that have a doctype html, but since I am mostly working with 'partials' that is no help.
I am running .pipe(jade()) without additional options. Apparently gulp-jade supports all Jade API options, listed here, but I do not see which one would apply here.
There is an undocumented doctype option. .pipe(jade({doctype: 'html'})) compiles the template under the HTML5 doctype
For those finding this page who use Grunt, I found that the following works with ui-view.
div(ui-view="")
I'm trying to create some scripts which require moving through a lot of on-the-fly HTML with random IDs. They require getting the parents of an element - but I'm not sure how to implement this in WebdriverJS.
If I access the element I want via a console, I can do the following to get it;
document.querySelector('span[email="noreply#example.com"]').parentNode.parentNode
Is there a way to do this in WDJS? I've looked and can't see anything obvious - it's specifically the parent stuff I'm having issue with. I saw that a possible solution may be xPath however I'm unsure of syntax having never used it before.
Thanks in advance!
I don't know the syntax of WebDriverJS. But the XPath is as below, you need a way to fit it in somewhere.
This is based on your CSS Selector, so please show HTML if needed.
.//span[#email='noreply#example.com']/../..
For example, if you have HTML like this
<div>
<div>
<span email="noreply#example.com">Contact me</span>
</div>
</div>
You can avoid using .. to go up.
.//div[./div/span[#email='noreply#example.com']]
If you have more levels to look up, another handy method would be using ancestor from XPath Axes.
Also, as #sircapsalot brought up, CSS selectors spec doesn't support parent selecting, so XPath is the only way to go, unless you inject JS.