I need to be able to add a js file to be able to manipulate the html? I tried to add something similar to what is done in the assets.yml by loading the styles.css, but I did not have the expected result, and I do not understand how else I could do it.
There is a new Quick Start Guide in a JavaScript tutorial that has the exact example you are asking for:
https://doc.oroinc.com/frontend/javascript/js-quick-start/
You can do JavaScript coding inline, I would suggest making a separate file for it though, just like you do with a .css file. A .js file is called with a <script> tag instead of <link> in your HTML document.
How to do it
Make a new file called main.js inside your folder
Call it with the <script> tag in your HTML document, usually just before the closing </body> tag.
Make an element and manipulate it - this example is the p element that has the ID #change. One way to do it is with document.querySelector. You can do it with a classname as well if you prefer.
I'll let you do the rest.
document.querySelector('#change').innerHTML =
<p id="change">Change me</p>
<script src="main.js"></script>
Related
I work with Liferay and sometimes I need to build models.ftl, it's including put all the code in a single file. Is it possible to automate this process? I have already searched and the only way I found is to put script tag with src, not the script inline.
Individuals files
/js/script.js
/css/style.css
Index.ftl
Should be:
Index.ftl
<style>
style here
</style>
<div>
html tags here with freemarker.
</div>
<script>
code here
</script>
I'm new to VueJS and trying to setup a simple page and embed a script to play HLS video using JW Player the script provided by JW Player dashboard <script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>
What would be the proper way to embed that script into .vue file
Knowing .vue files should have template, script and style elements and my understanding is it has to go inside script as a part of data but I'm quite confused on how I would do that and call it inside the template to view it in the browser??
Any help would be appreciated
As you've discovered, <script> tags cannot be embedded in Vue.js. However, <iframe> is a valid tag. The JW Platform allows for you to embed videos via a script tag OR an iframe tag.
Change this:
<script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>
Into this:
<iframe src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.html"></iframe>
Notice that the .js changes into .html and script changes into iframe
You may need to customize the iframe to fit your usage properly, some reference docs for how to do that can be found here.
Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0
So basically, when using components - the app root passed to the Vue instance gets replaced by whatever HTML is in the component. Is there a way to disable this and just nest the stuff Vue renders inside the app root instead?
for example - if index.html has a wrapper of
<div id="myVueApp"></div>
and I set el: "#myVueApp" on the Vue instance, the whole node will get removed and replaced by whatever I have in my template resulting in
<div id="myComponent">...</div>
Is there a way to make it into
<div id="myVueApp">
<div id="myComponent">...</div>
</div>
Should work. From what I understand, you want to have multiple parts of your Vue app to be splitted up in the rendered HTML output as well, more specifically into multiple divs.
I think this should work if you use multiple Vue instances.
Set up a structure in your HTML file and give them appropriate id's.
Then, create the Vue instances you want and assign each of them to their specific div using el.
However, I can't tell you if this is a good idea and follows the best practice..
Hope this helps!
I tried to add a js file or css file as i mentioned below in the .vm file
<script src='/templates/jquery-1.6.2.js>
it didn't work.
But when i tried adding as given below it worked
<script type="text/javascript">
#include( "jquery-1.6.2.js" )
</script>
But the issue is in the browser if do view source even the jquery-1.6.2.js code also appears.It doesnot hide the js code. Is there any alternate way to add the js or css file in velocity template ??
In case someone comes across this question, there is a straightforward way to include CSS styles in a Velocity template. I had a need to add some overrides to a .vm file, and putting a <style> tag with the appropriate rules inside <body> worked. I initially had the <style> inside the <head> tag but that wasn't being picked up by the parser for some reason. It looked fine in IE 8, FF 3.6, and Chrome.